/*slider-hero*/
/* Базові стилі для hero секції */
html {
  scroll-behavior: smooth;
}

.hero-slider-section {
  width: 100%;
  background: #000;
  padding: 80px 0;
  overflow: hidden;
}

.hero-slider-container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  position: relative;
  padding: 0;
  user-select: none;
}

.hero-slider-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  position: relative;
  height: 600px;
  transition: transform 0.1s ease-out;
}

.hero-career-section .hero-title::after {
  margin: 0 auto;
}

.hero-slide {
  position: relative;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 24px;
  display: block;
  pointer-events: none;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide-label {
  font-family: "Poppins", sans-serif;
  background: white;
  text-align: center;
  text-transform: uppercase;
  padding: 19.5px 0;
  border-radius: 50px;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: #000;
  z-index: 10;
  pointer-events: none;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-label-top {
  top: 30px;
  left: 30px;
}

.hero-label-bottom {
  bottom: 30px;
  left: 30px;
}

/* Анімація появи */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(20px);
  }

  to {
    opacity: 1;
    transform: scale(0.95) translateY(0);
  }
}

/* Анімація зникання */
@keyframes slideOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

.hero-slide.animating-in {
  animation: slideIn 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-slide.animating-out {
  animation: slideOut 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ефект при переході в центр */
.hero-slide.center img {
  transform: scale(1.05);
}

.hero-slide.center .hero-slide-label {
  transform: scale(1.1);
}

/* Позиції слайдів */
.hero-slide.far-left {
  width: 280px;
  height: 400px;
  opacity: 0.8;

  z-index: 1;

  margin-top: 100px;
  flex-direction: column-reverse;
}

.hero-slide.left {
  width: 280px;
  height: 450px;
  opacity: 0.8;

  z-index: 2;
}

.hero-slide.center {
  width: 380px;
  height: 570px;
  opacity: 1;
  transform: scale(0.95);
  z-index: 10;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
}

.hero-slide.center .hero-slide-label {
  display: none;
}

.hero-slide.right {
  width: 280px;
  height: 450px;
  opacity: 0.8;
  flex-direction: column-reverse;
  z-index: 2;
}

.hero-slide.far-right {
  width: 280px;
  height: 400px;
  opacity: 0.8;

  z-index: 1;

  margin-bottom: 100px;
}

.hero-slide.hidden {
  display: none;
}

/* Адаптивність */
@media (max-width: 1200px) {
  .hero-slider-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    position: relative;
    height: 400px;
    transition: transform 0.1s ease-out;
  }

  .hero-slide.center {
    width: 380px;
    height: 400px;
  }

  .hero-slide.left,
  .hero-slide.right {
    width: 210px;
    height: 320px;
  }

  .hero-slide.far-left,
  .hero-slide.far-right {
    width: 180px;
    height: 290px;
  }

  .hero-slider-wrapper {
    gap: 20px;
  }
}

@media (max-width: 767px) {
  .hero-slider-wrapper {
    gap: 0;
    height: 450px;
  }

  .hero-slide.center {
    width: 90%;
    max-width: 400px;
    height: 400px;
  }

  /* Ховаємо всі слайди окрім центрального */
  .hero-slide.left,
  .hero-slide.right,
  .hero-slide.far-left,
  .hero-slide.far-right {
    display: none;
  }

  .hero-slider-section {
    padding: 50px 0;
  }
}

@media (max-width: 576px) {
  .hero-slider-wrapper {
    height: 380px;
  }

  .hero-slide.center {
    width: 100%;
    height: 360px;
  }

  .hero-slider-section {
    padding: 40px 0;
  }
}

@media (max-width: 375px) {
  .hero-slider-wrapper {
    height: 360px;
  }

  .hero-slide.center {
    width: 100%;
    height: 360px;
  }

  .hero-slide-label {
    padding: 8px 16px;
    font-size: 11px;
  }
}

@media (min-width: 1600px) {
  .hero-slider-wrapper {
    height: 500px;
    gap: 30px;
  }

  .hero-slide.center {
    width: 520px;
    height: 500px;
  }

  .hero-slide.left,
  .hero-slide.right {
    width: 280px;
    height: 340px;
  }

  .hero-slide.far-left,
  .hero-slide.far-right {
    width: 240px;
    height: 300px;
  }

  .hero-slider-section {
    padding: 100px 0;
  }
}

/*who-we-are-section*/
.who-we-are-section {
  background-color: var(--primary-light-color);
}

.who-we-are-section .hero-title {
  color: var(--text-dark-color);
  font-size: 44px;
}

.who-we-are-title-container {
  display: flex;
  flex-direction: unset;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.who-we-are-title-container h2 {
  order: 1;
}

.who-we-are-title-container .btn-portfolio {
  order: 2;
}

.who-we-are-section-text {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 600;
  color: var(--primary-dark-color);
}

.who-we-are-section-second-text {
  font-weight: 500;
  color: var(--primary-dark-color);
}

@media (min-width: 767px) {
  .who-we-are-section .hero-title {
    font-size: 104px;
  }

  .who-we-are-title-container h2 {
    order: 2;
  }

  .who-we-are-title-container .btn-portfolio {
    order: 1;
  }

  .who-we-are-title-container {
    gap: 20px;
  }

  .who-we-are-section-text {
    font-size: 24px;
    display: block;
    width: 35%;
  }

  .who-we-are-section-second-text {
    font-size: 24px;
    display: block;
    width: 60%;
    margin-left: auto;
    margin-top: 0;
  }
}

/*company-values-section*/
.company-values-container-text h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 44px;
  line-height: 48px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.career h2 b,
.company-values-container-text h2 span {
    font-weight: 500;
  color: var(--primary-color);
}

.company-values-container-text p {
  font-weight: 500;
  font-family: "Poppins", sans-serif;
}

.company-values-container-text {
  margin-bottom: 32px;
}

@media (min-width: 767px) {
  .company-values-container-text h2 {
    font-size: 104px;
    line-height: 112px;
  }

  .company-values-container-text p {
    font-size: 24px;
    text-align: end;
    padding-bottom: 10px;
  }

  .company-values-container-text {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 56px;
  }
}

.slide-text-main h3 {
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.slide-text-main p {
  font-weight: 500;
}

/* Базові стилі карток */
.values__item {
  padding: 12px;
  border-radius: 16px;
  background: #fff;
  color: #000;
  height: 100%;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.values__item--yellow {
  background-color: var(--primary-color);
}

.values__item--image {
  background: url("https://backmut.portfolioserver.xyz/wp-content/themes/backmut/assets/img/career-page/company-values-background.webp") no-repeat center/cover;
  color: #fff;
}

.values__slider {
  width: 100%;
  overflow: hidden;
  /* Важливо для Swiper */
}

.values__slider .company-values-slider {
  box-sizing: border-box;
}

.values__slider .swiper-pagination {
  position: static;
  margin-top: 32px;
}

.company-values-section .swiper-pagination-bullet {
  opacity: 1;
}

.company-values-slide-1 {
  grid-area: el1;
}

.company-values-slide-2 {
  grid-area: el2;
}

.company-values-slide-3 {
  grid-area: el3;
}

.company-values-slide-4 {
  grid-area: el4;
}

.company-values-slide-5 {
  grid-area: el5;
}

@media (min-width: 768px) {
  .values__item {
    border-radius: 24px;
    padding: 24px;
  }

  .values__slider {
    padding-bottom: 0;
    overflow: visible;
  }

  .values__slider .swiper-pagination {
    display: none;
  }

  .values__item {
    min-height: 300px;
  }

  .values__grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "el5 el5 "
      "el1 el2 "
      "el3 el4 ";
    gap: 24px;

    transform: none !important;
    width: 100% !important;
  }

  .slide-text-main h3 {
    font-size: 24px;
    line-height: 32px;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

  .slide-text-main p {
    font-size: 20px;
  }

  .values__item--wide {
    grid-column: span 2;
  }

  .company-values-section .values__icon img {
    width: 100px;
    height: 100px;
  }
}

@media (min-width: 1000px) {
  .values__grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas:
      "el1 el5 el5 "
      "el2 el3 el4";
  }

  .values__item {
    min-height: 316px;
  }
}

/*vacancies-section*/
.vacancies-section .faq-question {
  padding: 16px 0;
}

.vacancies-number {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
}

.vacancies-section .vacancies-section-title {
  font-size: 44px;
  line-height: 48px;
}

.vacancies-time-ful,
.vacancies-remote {
  text-transform: none;
}

.vacancies-title,
.vacancies-time-ful,
.vacancies-remote {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.vacancies-title {
  text-transform: uppercase;
  line-height: 24px;
}

.vacancies-container-text {
  font-family: "WixMadeforText", sans-serif;
  display: grid;
  align-items: center;
  grid-template-columns: 55px 1fr;
}

.vacancies-section .faq-answer.open {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 3500px;
}

.desc-vacancies-time-remote-mobile {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.desc-vacancies-time-remote-mobile span {
  font-weight: 700;
  font-size: 20px;
}

.desc-vacancies-top-text {
  font-weight: 500;
}

.desc-vacancies-title-list {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 500;
}

.desc-vacancies-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: disc;
  padding-left: 25px;
}

.vacancies-section .faq-answer p {
  max-width: 100%;
  padding: 0;
  margin: 0;
}

a.desc-vacancies-link-btn {
  display: block;
  margin: 0 auto;
  width: 100%;
  border-radius: 100px;
  color: #fff;
  padding: 16px 0;
  text-align: center;
  margin-bottom: 32px;
  font-weight: 800;
  font-size: 16px;
  text-transform: uppercase;
  background-color: #000;
  transition: all 0.3s;
}

a.desc-vacancies-link-btn:hover {
  color: #000;
  background-color: var(--primary-color);
}

.desc-vacancies-list {}

@media (min-width: 480px) {
  .desc-vacancies-link-btn {
    max-width: 257px;
  }
}

@media (min-width: 1000px) {
  .desc-vacancies-time-remote-mobile {
    display: none;
  }
}

@media (max-width: 1000px) {

  .vacancies-time-ful,
  .vacancies-remote {
    display: none;
  }
}

@media (min-width: 767px) {
  .vacancies-section .faq-answer.open {
    gap: 24px;
  }

  .desc-vacancies-time-remote-mobile span {
    font-size: 24px;
  }

  .desc-vacancies-top-text {
    font-size: 20px;
  }

  .desc-vacancies-title-list {
    font-size: 24px;
  }

  .desc-vacancies-list {
    gap: 20px;
    font-size: 20px;
  }

  a.desc-vacancies-link-btn {
    font-size: 20px;
    padding: 20px 0;
  }

  .vacancies-section .faq-question {
    padding: 28px 0;
  }

  .vacancies-section .vacancies-section-title {
    font-size: 104px;
    line-height: 112px;
  }

  .vacancies-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .vacancies-container-text {
    flex: 1;
    grid-template-columns: 0.1fr 1fr;
  }

  .vacancies-time-ful,
  .vacancies-remote,
  .vacancies-number {
    font-size: 24px;
  }
}

@media (min-width: 1000px) {
  .vacancies-container-text {
    flex: 1;
    gap: 20px;
    grid-template-columns: 0.08fr 0.5fr 0.3fr 0.3fr;
  }
}

/*career-benefits-section*/
.career-benefits-section .company-values-container-text p {
  text-transform: uppercase;
  text-align: end;
  font-size: 32px;
}

.career-benefits-list h3 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  line-height: 24px;
  font-weight: 600;
  text-transform: uppercase;
}

.career-benefits-list .career-benefits-line {
  border: 2px solid #ffffff;
  width: 120px;
  margin: 16px 0;
  border-radius: 4px;
}

.career-benefits-list {
  display: grid;
  gap: 32px;
}

@media (min-width: 767px) {
  .career-benefits-list {
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    column-gap: 24px;
  }

  .career-benefits-list h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .career-benefits-list p {
    font-size: 20px;
  }
}

@media (min-width: 1300px) {
  .career-benefits-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/*marquee-content*/
.marquee-content-section {
  overflow: hidden;
}

.marquee-content {
  display: flex;
  width: max-content;
  align-items: center;
  animation: scroll-left 24s linear infinite;
  transition: animation-play-state 0.3s;
  padding-top: 18px;
  padding-bottom: 18px;
  background-color: #fff;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.marquee-content p {
  font-family: "Poppins", sans-serif;
  margin: 0;
  font-weight: 500;
  font-size: 44px;
  line-height: 48px;
  text-transform: uppercase;
  color: #000;
}

.marquee-content img {
  display: block;
  width: 180px;
  height: 52px;
  border-radius: 100px;
  object-fit: cover;
}

.marquee-content p,
.marquee-content img {
  margin-right: 12px;
}

.marquee-content-section:hover .marquee-content {
  animation-play-state: paused;
}

@media (min-width: 767px) {
  .marquee-content p {
    font-size: 100px;
    line-height: 1.2;
  }

  .marquee-content img {
    width: 251px;
    height: 89px;
  }

  .marquee-content p,
  .marquee-content img {
    margin-right: 24px;
  }
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(calc(-50%));
  }
}

/*how-work-section*/
.how-work-section {
  overflow: hidden;
}

.how-work-section .main-title span {
  color: var(--primary-color);
}

.how-work-section-subtitle {
  font-size: 20px;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 32px;
}

.how-work-section .how-work-section-title {
  font-size: 44px;
  line-height: 48px;
}

/* GRID Layout */
.steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  position: relative;
}

.step-card {
  position: relative;
  z-index: 2;
}

/* Стилі номера (кружечок) */
.step-number {
  font-family: "Poppins", sans-serif;
  width: 88px;
  height: 88px;
  background-color: #fff;
  color: #000;
  border-radius: 50%;
  display: flex;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}

.step-content h3 {
  font-family: "Poppins", sans-serif;
  margin: 0 0 8px 0;
  font-size: 20px;
  line-height: 24px;
  text-transform: uppercase;
}

.step-content p {
  line-height: 1.2;
  margin: 0;
}

@media (min-width: 767px) {
  .how-work-section .main-title {
    text-align: center;
  }

  .how-work-section-subtitle {
    font-size: 24px;
    text-align: center;
    margin-bottom: 56px;
  }

  .step-content h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .step-content p {
    font-size: 20px;
  }

  .how-work-section .how-work-section-title {
    font-size: 104px;
    line-height: 112px;
  }
}

@media (max-width: 992px) {
  .how-work-section-icon {
    position: absolute;
  }

  .step-card {
    transition: all 0.6s ease-out;
    opacity: 1;
    transform: translateY(0);
  }

  .step-card.hidden {
    opacity: 0;
    transform: translateY(30px);
  }

  .step-card.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .steps-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    padding-bottom: 40px;
  }

  .snake-line {
    display: none;
  }

  .step-card {
    position: relative;
    padding-left: 45px;
    padding-bottom: 30px;
    padding-top: 90px;
  }

  .step-card::before {
    content: "";
    position: absolute;
    left: 26px;
    top: 72px;
    bottom: 0;
    width: 4px;
    background-color: var(--primary-color);
    z-index: 1;
  }

  .step-1::before {
    top: 72px;
  }

  .step-number {
    width: 56px;
    height: 56px;
    background-color: #fff;
    color: #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;

    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
  }

  .step-final span {
    font-family: "Poppins", sans-serif;
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 36px;
    text-align: center;
  }

  .step-final .highlight {
    color: var(--primary-color);
  }

  .snake-line {
    display: none;
  }

  .step-final::before {
    content: none;
  }

  .step-final>div {
    position: relative;
  }

  .step-final {
    padding-left: 0;
    padding-top: 30px;
  }

  .how-work-section-icon {
    position: absolute;
    top: -55%;
    left: 50%;
    max-width: 290px;
    transform: translateX(-50%);
  }
}

/* --- DESKTOP ВЕРСІЯ (від 992px) --- */
@media (min-width: 992px) {
  .step-number {
    font-size: 32px;
  }

  .step-3 .step-content {
    padding-right: 8px;
  }

  .step-content {
    padding-left: 102px;
    margin-top: -35px;
  }

  .step-content h3 {
    font-size: 24px;
    line-height: 32px;
  }

  .step-content p {
    font-size: 20px;
  }

  .steps-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    row-gap: 80px;
    column-gap: 24px;
  }

  .step-1 {
    grid-column: 1;
    grid-row: 1;
  }

  .step-2 {
    grid-column: 2;
    grid-row: 1;
  }

  .step-3 {
    grid-column: 3;
    grid-row: 1;
  }

  .step-4 {
    grid-column: 3;
    grid-row: 2;
  }

  .step-5 {
    grid-column: 2;
    grid-row: 2;
  }

  .step-final {
    grid-column: 1;
    grid-row: 2;
  }

  .snake-line {
    display: block;
    position: absolute;
    top: 25px;
    left: 16%;
    right: 16%;
    height: calc(100% - 50px);
    z-index: 1;
    pointer-events: none;
  }

  .snake-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 66.66%;
    height: 100%;
    border-top: 2px solid var(--primary-color);
    border-right: 2px solid var(--primary-color);
    border-radius: 0 20px 20px 0;
    height: calc(100% + 25px);
  }

  .snake-line::after {
    content: "";
    position: absolute;
    bottom: -210px;
    right: 0;
    width: 66.66%;
    border-top: 2px solid var(--primary-color);
  }

  .snake-line {
    display: none;
  }

  /* Вимикаємо загальний блок, вмикаємо лінії на картках */

  /* Лінія від 1 до 2 */
  .step-1::after {
    content: "";
    position: absolute;
    top: 44px;
    left: 100px;
    width: calc(100% - 100px);
    height: 4px;
    background: var(--primary-color);
    z-index: -1;
  }

  /* Лінія від 2 до 3 */
  .step-2::after {
    content: "";
    position: absolute;
    top: 44px;
    left: 100px;
    width: calc(100% - 100px);
    height: 4px;
    background: var(--primary-color);
    z-index: -1;
  }

  .step-3::after {
    content: "";
    position: absolute;
    top: 44px;
    left: 100px;
    width: calc(100% - 100px);
    height: calc(100% + 84px);
    border-top: 4px solid var(--primary-color);
    border-right: 4px solid var(--primary-color);
    border-bottom: 4px solid var(--primary-color);
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    z-index: -1;
  }

  .step-5::after {
    content: "";
    position: absolute;
    top: 44px;
    right: 100%;
    width: 60px;
    height: 4px;
    background: var(--primary-color);
    z-index: -1;
    left: 100px;
    width: calc(100% - 100px);
  }

  .step-final span {
    font-family: "Poppins", sans-serif;
    display: block;
    font-size: 52px;
    font-weight: bold;
    color: #fff;
    line-height: 64px;
    text-align: center;
  }

  .step-final .highlight {
    color: var(--primary-color);
  }

  .step-final>div {
    position: relative;
  }

  .step-final {
    padding-left: 0;
    padding-top: 0;
  }

  .how-work-section-icon {
    position: absolute;
    top: -34%;
    left: 50%;
    transform: translateX(-50%);
  }

  .step-card {
    transition: all 0.6s ease-out;
    opacity: 1;
    transform: translateY(0);
  }

  .step-card.hidden {
    opacity: 0;
    transform: translateY(30px);
  }

  .step-card.visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 992px) and (max-width: 1300px) {
  .how-work-section-icon {
    display: none;
  }

  .step-final>div {
    border: 4px solid #fff;
    border-radius: 24px;
    padding: 5px;
  }
}

/*career-contact-section*/
.career-contact-section {
  background-color: #fff;
  color: #000;
}



.career-contact-section .container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}


.career-contact-section-title {
  font-size: 44px;
  line-height: 48px;
  font-weight: 500;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.career-contact-section-text {
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
}

/* --- ПРАВА ЧАСТИНА (ФОРМА) --- */
.career-form {
  display: flex;
  flex-direction: column;
}

.career-form .form-title {
  margin: 0;
}

/* Група поля */
.career-form .form-group {
  width: 100%;
  position: relative;
}

/* Стилі для INPUT та SELECT */
.career-form .form-group input {
  width: 100%;
  border: none;
  border-bottom: 4px solid #bebebe;
  padding: 20px 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000;
  background: transparent;
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s;
}

.career-form .form-group input::placeholder {
  color: #000;
  font-weight: 500;
  opacity: 1;
}

.career-form textarea::placeholder {
  color: #000;
}

.career-form textarea {
  font-family: "Poppins", sans-serif;
  padding: 20px 0;
  border: none;
  font-weight: 500;
  color: #000;
  resize: vertical;
  min-height: 105px;
  overflow: auto;
  font-size: 14px;
  background: transparent;
  border-radius: 0;
  outline: none;
  transition: border-color 0.3s;
  width: 100%;
  border-bottom: 4px solid #bebebe;
}

.career-form .form-group input:focus,
.career-form .form-group textarea:focus {
  border-bottom: 4px solid #000;
  font-weight: 600;
}

.career-form .form-group input:focus::placeholder {
  font-weight: 600;
}

.career-form input:not(:placeholder-shown),
.career-form textarea:not(:placeholder-shown) {
  border-bottom: 4px solid #000;
  /* Жирна чорна лінія */
  border-color: #000;
  font-weight: 600;
}

/* --- КАСТОМНИЙ SELECT (Стрілочка) --- */
.career-form .select-wrapper {
  position: relative;
}

.career-form .select-wrapper::after {
  content: "";
  position: absolute;
}

.select-selected::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.68626 6.79561C3.59084 6.70118 3.4786 6.62736 3.35595 6.57836C3.23329 6.52936 3.10262 6.50614 2.97139 6.51003C2.84017 6.51392 2.71096 6.54484 2.59115 6.60102C2.47133 6.6572 2.36325 6.73755 2.27309 6.83747C2.18292 6.9374 2.11243 7.05494 2.06565 7.18339C2.01886 7.31185 1.99669 7.44869 2.0004 7.58612C2.00411 7.72355 2.03363 7.85886 2.08728 7.98434C2.14093 8.10982 2.21765 8.223 2.31307 8.31743L11.3078 17.2139C11.4933 17.3976 11.739 17.5 11.9944 17.5C12.2497 17.5 12.4954 17.3976 12.681 17.2139L21.6767 8.31743C21.7742 8.22363 21.8529 8.11047 21.9083 7.98453C21.9637 7.85859 21.9947 7.72238 21.9994 7.58381C22.0041 7.44524 21.9824 7.30707 21.9357 7.17733C21.889 7.04759 21.8181 6.92887 21.7272 6.82806C21.6363 6.72724 21.5272 6.64635 21.4062 6.59007C21.2852 6.5338 21.1547 6.50327 21.0223 6.50025C20.89 6.49723 20.7584 6.52178 20.6351 6.57249C20.5119 6.62319 20.3995 6.69903 20.3045 6.79561L11.9944 15.0139L3.68626 6.79561Z' fill='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s;
  border: none;
}

/* --- ЗАВАНТАЖЕННЯ ФАЙЛУ (+ UPLOAD YOUR CV) --- */
.career-form .file-upload-group {
  margin-top: 20px;
  margin-bottom: 20px;
}

.career-form .file-upload-label {
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 16px;
  color: #000;
  cursor: pointer;
  text-transform: uppercase;
}

.career-form .plus-icon {
  font-size: 24px;
  margin-right: 10px;
  font-weight: 400;
  line-height: 1;
}

.career-form .file-name-display {
  font-size: 14px;
  color: #555;
  margin-top: 5px;
  font-weight: 500;
}

/* --- КНОПКА (SUBMIT) --- */
.career-form .submit-btn {
  background-color: var(--primary-color);
  color: #000;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 800 !important;
  text-transform: uppercase;
  border-radius: 100px;
  cursor: pointer;
  width: 100%;
  transition: background-color 0.3s;
}

.career-form .submit-btn:hover {
  background-color: #000;
  color: #fff;
}

/* --- КАСТОМНИЙ ЧЕКБОКС --- */
.career-form .career-checkbox-group {
  display: flex;
  align-items: center;
  margin-top: 24px;
}

.form-span-privacy {
  text-decoration: underline;
}

.career-form .career-checkbox-group input[type="checkbox"] {
  display: none;
}

.career-form .career-checkbox-group label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.career-form .career-checkbox-group label p {
  font-size: 14px;
  font-weight: 600;
  color: #000;
}

.career-form .career-custom-checkbox {
  width: 24px;
  height: 24px;
  background-color: #000;
  margin-right: 12px;
  position: relative;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Галочка (з'являється тільки коли checked) */
.career-form .career-checkbox-group input[type="checkbox"]:checked+label .career-custom-checkbox::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: 16px;
  height: 12px;

  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.28846 8.775L13.7635 0.3C13.9635 0.1 14.1968 0 14.4635 0C14.7301 0 14.9635 0.1 15.1635 0.3C15.3635 0.5 15.4635 0.737667 15.4635 1.013C15.4635 1.28833 15.3635 1.52567 15.1635 1.725L5.98846 10.925C5.78846 11.125 5.55513 11.225 5.28846 11.225C5.02179 11.225 4.78846 11.125 4.58846 10.925L0.288462 6.625C0.0884617 6.425 -0.00753846 6.18767 0.000461538 5.913C0.00846154 5.63833 0.112795 5.40067 0.313461 5.2C0.514128 4.99933 0.751795 4.89933 1.02646 4.9C1.30113 4.90067 1.53846 5.00067 1.73846 5.2L5.28846 8.775Z" fill="white"/></svg>');

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: none;
}

.select-items {
  position: absolute;
  background-color: #fff;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  border-top: none;
}

.select-items div {
  padding: 12px 0px;
  cursor: pointer;
  font-size: 16px;
  border-bottom: 1px solid #ededed;
  /* Тонка лінія між пунктами */
  transition: background 0.2s;
}

.select-items div:last-child {
  border-bottom: none;
}

.select-items div:hover,
.same-as-selected {
  background-color: #bebebe;
  /* Сірий колір з макету */
}

.select-hide {
  display: none;
}

.custom-select-container select {
  display: none;
}

.select-selected {
  padding: 20px 0;
  border-bottom: 4px solid #bebebe;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  position: relative;
  color: #000;
}

.career-form .select-selected {
  border-bottom: 4px solid #bebebe;
  font-weight: 500;
  transition: all 0.2s ease;
}

.career-form .select-selected.is-active {
  border-bottom: 4px solid #000;
  font-weight: 600;
}

.career-form .select-selected.has-value {
  border-bottom: 4px solid #000;
  font-weight: 600;
  color: #000;
}

.select-selected.is-active::after {
  transform: translateY(-50%) rotate(-180deg);
}


/* ===== OPTION STYLES ===== */
.career-form select.career-select option {
  padding: 20px !important;
  font-size: 14px;
}
/* ===== BASE SELECT ===== */
.career-form select.career-select {
  width: 100%;
  padding: 20px 0;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  transition: border-color 0.3s;
  font-weight: 500;
  color: #000;
  background-color: #fff;

  border: none;
  border-bottom: 4px solid #bebebe;
  border-radius: 0;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  cursor: pointer;
  transition: border-color 0.2s ease, font-weight 0.2s ease;
}

/* ===== FOCUS STATE ===== */
.career-form select.career-select:focus {
  outline: none;
  border-bottom-color: #000;
  font-weight: 600;
}

/* ===== VALID / SELECTED ===== */
.career-form select.career-select:not([value=""]):valid {
  border-bottom-color: #bebebe;
  font-weight: 500;
}

.career-form select.career-select:not([value=""]):valid:focus {
  border-bottom-color: #000;
  font-weight: 600;
}

.career-form select.career-select option[value="Choose your Role*"] {
  color: #999;
}

/* ===== ARROW (SVG) ===== */
.career-form .form-group .select-wrapper {
  position: relative;
}

.career-form .form-group .select-wrapper::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;

  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.68626 6.79561L11.9944 15.0139L20.3045 6.79561' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}



.form-group.checkbox-group {
  display: flex;
  gap: 12px;
}

.career-form select.career-select option:hover {
  background-color: #bebebe;
}

.career-form select.career-select option:checked {
  background-color: #bebebe;
  color: #000;
}

.career-form select.career-select {
  font-weight: 500;
}

.career-form select.career-select.is-filled {
  border-bottom-color: #000 !important;
  font-weight: 600 !important;
}

@media (min-width: 992px) {
  .career-contact-section .container {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .career-contact-section-title {
    font-size: 104px;
    line-height: 112px;
    margin-bottom: 24px;
  }

  .career-contact-section-text {
    font-size: 24px;
  }

  .career-form .form-group input,
  .select-selected,
  .career-form textarea {
    font-size: 20px;
    padding: 24px 0;
  }

  .career-form textarea {
    min-height: 125px;
  }

  .career-form .select-items div {
    font-size: 16px;
    padding: 20px 0;
  }

  .career-form .form-title {
    font-size: 40px;
    line-height: 48px;
  }

  .career-form .file-upload-label {
    font-size: 20px;
  }

  .career-form .file-upload-group {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .career-form .submit-btn {
    font-size: 20px;
    padding: 20px;
  }

  .career-form .career-checkbox-group {
    justify-content: center;
  }
  /* ===== BASE SELECT ===== */
.career-form select.career-select {
  padding: 24px 0;
  font-size: 20px;
}
/* ===== OPTION STYLES ===== */
.career-form select.career-select option {
  padding: 24px !important;
  font-size: 20px;
}
}