.job-listing {
    margin: 0 auto;
    padding-top: 20px;
  }
 
  .job-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #ededed;
    padding: 30px;
    margin-bottom: 20px;
  }

  .job-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
  }

  .job-info {
    flex: 1;
  }

  .job-title {
    font-family: Raleway, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0c2058;
    margin: 0;
  }

  .job-location {
    font-family: Noto Sans, sans-serif;
    font-size: 14px;
    color: #0c2058;
    margin: 15px 0;
  }

  .badge-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }

  .badge {
    background: rgba(112, 182, 246, 0.12);
    border-radius: 30px;
    padding: 8px 12px;
  }

  .badge-text {
    font-family: Raleway, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: rgba(25, 40, 48, 0.9);
  }

  .salary-section {
    display: flex;
    align-items: center;
    gap: 16px;
    align-items: flex-start;
    margin-top: -20px;
  }

  .salary-controls {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .salary {
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #0c2058;
    margin: 0;
  }

  .accordion-toggle {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: #0c2058;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
  }

  .accordion-toggle .button-text {
    display: none;
    margin-right: 20px;
  }

  .accordion-toggle .button-text .hide-text {
    display: none;
  }

  .accordion-toggle .button-text .show-text {
    display: inline;
  }

  .accordion-toggle[aria-expanded="true"] .button-text .hide-text {
    display: inline;
  }

  .accordion-toggle[aria-expanded="true"] .button-text .show-text {
    display: none;
  }

  .accordion-toggle[aria-expanded="true"] .accordion-icon {
    transform: rotate(180deg);
  }

  .job-details {
    margin-top: 30px;
  }

  .job-details[hidden] {
    display: none;
  }

  .details-section {
    margin-bottom: 30px;
  }

  .details-heading {
    font-family: Raleway, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #0c2058;
    margin: 0 0 10px;
  }

  .details-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  .details-list li {
    font-family: Raleway, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #0c2058;
    padding-left: 12px;
    position: relative;
    margin-bottom: 8px;
  }

  .details-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #0c2058;
  }

  @media (max-width: 1024px) {
    .job-card {
      padding: 24px;
    }

    .job-header {
      gap: 30px;
    }

    .salary-section {
        min-width: auto;
    }
    
    .b-btn.btn-gray {
        padding: 10px 20px;
    }
  }

  @media (max-width: 756px) {
    .job-card {
      padding: 20px;
    }

    .job-header {
      flex-direction: column;
      gap: 20px;
      align-items: flex-start;
    }

    .salary-controls {
        width: 100%;
        justify-content: flex-end;
    }
    
    .salary-section {
        width: 100%;
        justify-content: space-between;
    }

    .resume-btn {
        margin-top: 16px;
    }

    .badge-container {
      margin-top: 10px;
    }

    .accordion-toggle .button-text {
        display: inline;
    }

    .accordion-toggle {
      margin-top: 20px;
    }

    .mobile-salary {
        display: block;
    }
    
    .salary-section .salary {
        display: none;
    }
  }

  @media (min-width: 757px) {
    .mobile-salary {
        display: none;
    }
    
    .salary-section .salary {
        display: block;
    }
  }

  @media (max-width: 480px) {
    .job-listing {
      padding: 12px 0px;
    }

    .job-card {
      padding: 16px;
    }

    .job-title {
      font-size: 14px;
    }

    .job-location {
      font-size: 13px;
      margin: 12px 0;
    }

    .salary {
      font-size: 18px;
    }

    .badge {
      padding: 6px 10px;
    }

    .badge-text {
      font-size: 12px;
    }

    .details-list li {
      font-size: 13px;
      line-height: 18px;
    }

    .b-btn.btn-gray {
        padding: 8px 16px;
        font-size: 13px;
    }
    
    .salary-controls {
        gap: 12px;
    }

    .resume-btn {
        width: 100%;
        text-align: center;
    }

    .mobile-salary {
        font-size: 18px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .accordion-toggle {
      transition: none;
    }
  }

    .join-team-container {
    border-radius: 20px !important;
    background: #F6F6F6 !important;
    display: flex;
    max-width: 455px;
    flex-direction: column;
    font-family: "Raleway", sans-serif;
    color: var(--text-01);
    justify-content: center;
    padding: 38px 60px;
    box-sizing: border-box;
  }

  .content-wrapper {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 40px 213px;
    justify-content: flex-start;
  }

  .text-content {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    width: 334px;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0 auto;
  }

  .team-heading {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: lining-nums proportional-nums;
    margin: 0;
  }

  .contact-info {
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 20px;
    font-variant-numeric: lining-nums proportional-nums;
  }

  .email-link {
    color: var(--text-01);
    text-decoration: underline;
    transition: opacity 0.3s ease;
  }

  .email-link:hover,
  .email-link:focus {
    opacity: 0.8;
    outline: none;
  }

  .email-link:focus-visible {
    outline: 2px solid var(--text-01);
    outline-offset: 2px;
  }
.vac-desc-wrapper{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.vac-desc-wrapper .reviews-description{
    width: 58% !important;
    max-width: auto !important;
}
.join-team-container{
    margin-top: -50px;
}
  @media (max-width: 756px) {
    .join-team-container {
      padding: 24px 20px;
      margin: 0px;
    }

    .text-content {
      width: 100%;
      min-width: auto;
    }

    .content-wrapper {
      gap: 20px;
    }
    .vac-desc-wrapper .reviews-description{
        /* Базовое правило выше стоит с !important, без него ширина 58% не перебивается. */
        width: 100% !important;
    }
    .salary-section {
      display: block;
    }
  }
  @media (max-width: 480px) {
    .join-team-container {
      padding: 24px 20px;
      margin: 0px;
    }

    .text-content {
      width: 100%;
      min-width: auto;
    }

    .content-wrapper {
      gap: 20px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .email-link {
      transition: none;
    }
  }

.resume-button-container {
    margin-top: 30px;
}

.b-btn.btn-gray {
    display: inline-block;
    padding: 12px 24px;
    background: #F6F6F6;
    border-radius: 8px;
    font-family: Raleway, sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0c2058;
    text-decoration: none;
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.b-btn.btn-gray:hover {
    background: #e9e9e9;
}

@media (max-width: 480px) {
    .resume-button-container {
        margin-top: 20px;
    }
    
    .b-btn.btn-gray {
        padding: 10px 20px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .b-btn.btn-gray {
        transition: none;
    }
}

.resume-btn {
    margin-top: 12px;
    display: block;
    width: fit-content;
    position: absolute;
    right: 0px;
    top: 60px;
}

.mobile-salary {
    display: none;
    font-family: Manrope, sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0c2058;
    margin: 15px 0 0;
}

.salary-section .salary {
    display: block;
}

.job-card .mobile-salary {
    display: none;
    font-family: Manrope, sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: #0c2058;
    margin: 15px 0 0;
}

.job-card .salary-section .salary {
    display: block;
}

/* Мобильная версия */
@media (max-width: 756px) {
    .job-card .mobile-salary {
        display: block !important;
    }
    
    .job-card .salary-section .salary {
        display: none !important;
    }
    .resume-btn {
        margin-top: -5px;
        display: block;
        width: fit-content;
        position: absolute;
        right: 0px;
        top: 60px;
    }
}

/* Десктопная версия */
@media (min-width: 757px) {
    .job-card .mobile-salary {
        display: none !important;
    }
    
    .job-card .salary-section .salary {
        display: block !important;
    }
}