/* ==========================================================================
RESPONSIVE
========================================================================== */
html {
  font-size: 62.5%;
  font-size: 10px;
}
@media (max-width: 1920px) {
  html {
    font-size: calc(10 * 100vw / 1920);
  }
}

@media (max-width: 1023px) {
  html {
    font-size: calc(10 * 100vw / 375);
  }

  /* ==========================================================================
  GENERAL STYLES
  ========================================================================== */
  main {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* --- WRAPPER ---- */
  .wrapper {
    padding: 0 2rem;
  }

  .main-title > p,
  .main-title {
    line-height: var(--line-height-40);
    font-weight: var(--font-weight-extrabold);
  }
  .main-title > p > span,
  .main-text > p > span {
    color: var(--color-secondary);
  }

  /* ==========================================================================
VARIABLES
========================================================================== */
  :root {
    /* Font Size Headline */
    --font-size-h1: 3rem;
    --font-size-h2: 3.4rem;
    --font-size-h3: 3.2rem;
    --font-size-h4: 2.7rem;
    --font-size-h5: 2.4rem;
    --font-size-h6: 2rem;

    /* Font Size Body */
    --font-size-p1: 1.8rem;
    --font-size-p2: 1.6rem;
    --font-size-p3: 1.4rem;

    /* Line Height */
    --line-height-65: 6.5rem;
    --line-height-40: 4rem;
    --line-height-36: 3.6rem;
    --line-height-30: 3rem;
    --line-height-28: 2.8rem;
    --line-height-25: 2.5rem;
    --line-height-22: 2.2rem;
  }

  /* ==========================================================================
  HEADER STYLES
  ========================================================================== */
  .mainHeader .logo {
    width: 13.4rem;
    height: 4.4rem;
  }
  .mainHeader .logo img {
    width: 100%;
    height: auto;
  }

  /* MENU MOBILE */
  .mainHeader .menuDesktop {
    display: none;
  }

  .mainHeader .hamburger {
    z-index: 100;
    border: none;
    cursor: pointer;
    background: none;
    outline: none;
    display: flex;
    color: var(--color-white);
    padding: 1rem 1.5rem;
  }
  .mainHeader .hamburger:focus {
    outline-offset: -6px;
    outline: 2px dotted currentColor;
  }
  .mainHeader .hamburger .dropdown-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-p2);
    line-height: var(--line-height-25);
    font-weight: var(--font-weight-medium);
  }
  .mainHeader .hamburger .dropdown-icon .svg-icon {
    margin-left: 1rem;
  }
  .closeIcon {
    display: none;
  }
  .menuMobile {
    position: fixed;
    transform: translateY(100%);
    transition: transform 0.2s;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    background: var(--color-black);
    color: var(--color-white);
    list-style: none;
    padding-top: 8rem;
  }
  .showMenu {
    transform: translateY(0);
  }
  .showMenu + .hamburger {
    position: fixed;
    right: 2rem;
  }

  .mainHeader .primary-navigation .menu {
    flex-direction: column;
    align-items: flex-start;
  }
  .mainHeader .primary-navigation .menu .menu-item {
    margin-left: 2rem;
    margin-bottom: 2rem;
  }
  .mainHeader .primary-navigation .menu .menu-item::after {
    content: '';
    width: 1px;
    height: 3.2rem;
    background: var(--color-white);
    position: absolute;
    left: -2.5rem;
    top: 50%;
    transform: translate(0, -50%);
  }
  .mainHeader .primary-navigation .menu .menu-item::after {
    display: none;
  }
  .mainHeader .primary-navigation .menu .menu-item a {
    text-decoration: underline;
    display: block;
  }
  .mainHeader .primary-navigation .menu .menu-item.current_page_item,
  .mainHeader .primary-navigation .menu .menu-item.current_page_item a {
    color: var(--color-primary);
  }

  /* ==========================================================================
  JOBS PAGE STYLES
  ========================================================================== */
  /* --- HERO SECTION ---- */
  .jobs-page .hero-s {
    padding: 8rem 0;
  }
  .jobs-page .hero-s .left-content {
    width: 100%;
    padding-left: 0;
  }
  .jobs-page .hero-s .hero-title {
    margin-bottom: 7.8rem;
  }
  .jobs-page .hero-s .hero-text {
    font-size: var(--font-size-p2);
    line-height: var(--line-height-25);
    font-weight: var(--font-weight-light);
  }
  .jobs-page .hero-s .hero-text .line {
    width: 10.4rem;
    height: 1.2rem;
    left: -2rem;
    top: -4rem;
  }
  .jobs-page .hero-s .hero-bk {
    width: 335vw;
    height: auto;
    left: -13rem;
  }
  .jobs-page .hero-s .right-content {
    width: calc(100% + 3rem);
    height: auto;
    position: static;
    margin-right: -2rem;
    margin: 4rem -2rem 0 -1rem;
  }

  /* --- JOBS SECTION ---- */
  .jobs-page .jobs-s {
    padding: 0 0 8rem 0;
  }
  .jobs-page .jobs-s > .wrapper {
    flex-direction: column;
  }
  .jobs-page .jobs-s .left-content {
    width: 100%;
  }
  .jobs-page .jobs-s .left-content .jobs-title {
    margin-bottom: 4rem;
    font-size: var(--font-size-h2);
  }
  .jobs-page .jobs-s .right-content {
    width: 100%;
    height: auto;
  }
  .jobs-page .jobs-s .right-content .job-cards-content {
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: auto;
    grid-column-gap: 0;
    grid-row-gap: 3rem;
  }
  /* CARD JOB */
  .jobs-page .jobs-s .job-cards-content .card .card-header {
    padding: 1.5rem 1.5rem 1.5rem 4.2rem;
    border-radius: 1.5rem 0.4rem 0 0;
  }
  .jobs-page .jobs-s .job-cards-content .card .card-header .category-name {
    font-size: var(--font-size-p2);
    line-height: var(--line-height-28);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary) !important;
  }
  .jobs-page .jobs-s .job-cards-content .card .card-header .category-name::before {
    width: 1.2rem;
    height: 1.2rem;
    left: -2.6rem;
  }

  .jobs-page .jobs-s .job-cards-content .card:nth-child(3n + 1) .category-name {
    color: var(--color-primary) !important;
  }
  .jobs-page .jobs-s .job-cards-content .card:nth-child(3n + 1) .category-name::before {
    background: var(--color-primary) !important;
  }

  .jobs-page .jobs-s .job-cards-content .card:nth-child(3n + 2) .category-name {
    color: var(--color-iris) !important;
  }
  .jobs-page .jobs-s .job-cards-content .card:nth-child(3n + 2) .category-name::before {
    background: var(--color-iris) !important;
  }

  .jobs-page .jobs-s .job-cards-content .card:nth-child(3n + 3) .category-name {
    color: var(--color-extra) !important;
  }
  .jobs-page .jobs-s .job-cards-content .card:nth-child(3n + 3) .category-name::before {
    background: var(--color-extra) !important;
  }

  /* ACCORDEON */
  .jobs-page .jobs-s .job-cards-content .card .card-body .accordion .accordion-content .info {
    margin: 3rem 0 0 auto;
  }

  /* --- FORM SECTION ---- */
  .jobs-page .form-s {
    padding: 8rem 0 0 0;
  }
  .jobs-page .form-s > .wrapper {
    flex-direction: column;
  }
  .jobs-page .form-s .left-content {
    width: 100%;
    padding-left: 0;
    margin-bottom: 5rem;
  }
  .jobs-page .form-s .line {
    width: 31rem;
    height: 1.4rem;
    left: -2rem;
    top: -5rem;
  }
  .jobs-page .form-s .form-text {
    position: relative;
    padding-right: 4rem;
    font-size: var(--font-size-h6);
    line-height: var(--line-height-30);
    font-weight: var(--font-weight-medium);
  }
  .jobs-page .form-s .right-content {
    width: 100%;
    padding-right: 0;
  }
  /* FORM */
  .jobs-page .form-s .form-content {
    width: 100%;
    margin-top: 0.8rem;
  }
  .jobs-page .form-s .form-content .field.field-message {
    height: 16.8rem;
  }
  .jobs-page .form-s .form-content .field > span input,
  .jobs-page .form-s .form-content .field > span textarea,
  .jobs-page .form-s .form-content .field.field-attach {
    font-size: var(--font-size-p2);
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .jobs-page .form-s .form-content .field > span textarea {
    padding-top: 1.5rem;
  }

  .jobs-page .form-s .img-content {
    width: calc(100% + 3rem);
    height: auto;
    position: static;
    margin-right: -2rem;
    margin: 9rem 0 0 -2rem;
  }

  .jobs-page .form-s .form-bk {
    margin-top: 3rem;
  }

  /* ==========================================================================
  JOBS SINGLE STYLES
  ========================================================================== */
  /* --- HEADER SECTION ---- */
  .jobs-single .header-s {
    padding: 5.8rem 0 4.5rem 0;
    z-index: 2;
  }
  .jobs-single .header-s .text-content {
    flex-direction: column;
  }
  .jobs-single .header-s .header-title {
    width: 100%;
    margin-bottom: 3rem;
    text-align: left;
    padding-left: 2.6rem;
  }
  .jobs-single .header-s .header-text {
    width: 100%;
    padding-left: 2.6rem;
    padding-right: 2.6rem;
    margin-top: 0;
    text-align: left;
    font-size: var(--font-size-p2);
    line-height: var(--line-height-22);
    font-weight: var(--font-weight-light);
  }
  .jobs-single .header-s .header-text > p > span {
    font-size: var(--font-size-h5);
    line-height: var(--line-height-28);
    margin-bottom: 1.2rem;
  }
  .jobs-single .header-s .header-bk {
    width: 100vw;
    height: 26.5rem;
  }

  /* --- BOX SECTION ---- */
  .jobs-single .box-s .wrap-box {
    padding: 14rem 2rem 8rem 2rem;
  }
  /* Box Header */
  .jobs-single .box-s .wrap-box .box-header {
    margin-bottom: 8rem;
  }
  .jobs-single .box-s .wrap-box .box-header .box-title {
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
    font-size: var(--font-size-h3);
    line-height: var(--line-height-36);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
  }
  .jobs-single .box-s .wrap-box .box-header .box-subtitle {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-25);
  }

  /* Box Body */
  .jobs-single .box-s .wrap-box .box-body {
    flex-direction: column;
  }
  .jobs-single .box-s .wrap-box .box-body .left-content {
    width: 100%;
    padding-right: 0;
  }
  .jobs-single .box-s .wrap-box .box-body .right-content {
    width: 100%;
  }
  /* left */
  .jobs-single .box-s .wrap-box .box-body .hello-title {
    margin-bottom: 3rem;
    font-size: var(--font-size-h4);
    line-height: var(--line-height-30);
  }
  .jobs-single .box-s .wrap-box .box-body .hello-text {
    font-size: var(--font-size-p2);
    line-height: var(--line-height-22);
  }
  .jobs-single .box-s .wrap-box .box-body .hello-text p {
    margin-bottom: 0;
  }
  .jobs-single .box-s .wrap-box .box-body .hello-text b {
    font-weight: var(--font-weight-bold);
  }
  /* right */
  .jobs-single .box-s .wrap-box .box-body .job-description .tasks,
  .jobs-single .box-s .wrap-box .box-body .job-description .doing,
  .jobs-single .box-s .wrap-box .box-body .job-description .experience {
    width: 100%;
    margin-bottom: 3rem;
  }
  .jobs-single .box-s .wrap-box .box-body .job-description,
  .jobs-single .box-s .wrap-box .box-body .job-description > div {
    font-size: var(--font-size-p2);
    line-height: var(--line-height-22);
  }
  .jobs-single .box-s .wrap-box .box-body .job-description .title {
    margin-bottom: 2rem;
  }
  .jobs-single .box-s .wrap-box .box-body .job-description .tasks .text {
    margin-bottom: 3rem;
  }
  .jobs-single .box-s .wrap-box .box-body .job-description .text ul li {
    margin-bottom: 1.5rem;
  }

  /* --- FORM SECTION ---- */
  .jobs-single .form-s {
    padding: 12rem 0 18rem 0;
  }
  .jobs-single .form-s > .wrapper {
    flex-direction: column;
  }
  .jobs-single .form-s .left-content {
    width: 100%;
    padding-right: 0;
    margin-bottom: 4rem;
  }
  .jobs-single .form-s .form-title {
    font-size: var(--font-size-h2);
  }
  .jobs-single .form-s .right-content {
    width: 100%;
    padding-right: 0;
  }

  /* FORM */
  .jobs-single .form-s .form-content {
    width: 100%;
    margin-top: 0.8rem;
  }
  .jobs-single .form-s .form-content form .fields-c {
    grid-template-columns: repeat(1, 1fr);
    grid-column-gap: 0;
    grid-row-gap: 2rem;
    margin-bottom: 5.5rem;
  }

  .jobs-single .form-s .form-content .field > span input,
  .jobs-single .form-s .form-content .field > span textarea,
  .jobs-single .form-s .form-content .field.field-attach {
    font-size: var(--font-size-p2);
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }

  .jobs-single .form-s .form-bk {
    border-width: 102rem 0 0 250vw;
  }
}