.employer-page .fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.employer-page .fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.cta-btn a{
  padding: 10px 36px;
  color: #fff !important;
}

.md\:text-6xl{
  font-size: 3rem;
}
.font-inherit{
  font-size: inherit;
}

/* Arabic (RTL): corner card badges use top/right; mirror to top/left so they sit on the leading edge */
.lang_ar .employer-page .ej-card-badge {
  right: auto;
  left: 0;
}

.lang_ar .employer-page .ej-card-badge .inline-flex {
  flex-direction: row-reverse;
}

/* JD builder mock: Arabic — keep body shrink-safe; no horizontal inset (badge uses max-width instead of pushing content with padding) */
.lang_ar .employer-page .ej-jd-builder-card .ej-jd-builder-body {
  min-width: 0;
  padding-top: 0.5rem;
}

.lang_ar .employer-page .ej-jd-builder-card .ej-card-badge {
  max-width: calc(100% - 1.25rem);
  box-sizing: border-box;
}

.lang_ar .employer-page .ej-jd-builder-generate,
[dir="rtl"] .employer-page .ej-jd-builder-generate {
  flex-direction: row-reverse;
}

/* AI mode mock: fixed h-10 + long placeholder wraps and overflows on narrow cards */
.employer-page .ej-ai-modes-placeholder {
  min-width: 0;
}

/* Pipeline intro: slightly tighter space below heading on small / portrait tablet viewports */

@keyframes job-posting-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.45;
  }
}

.job-posting-pulse {
  animation: job-posting-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@media screen and (max-width: 576px) {
  /* mobile phones */
  .md\:text-6xl {
    font-size: 2rem;
  }

  .employer-page main > section {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .employer-page main > section.pt-24 {
    padding-top: 3.5rem !important;
    padding-bottom: 2.25rem !important;
  }

  .employer-page main > section.py-20 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .employer-page main > section.py-12 {
    padding-top: 1.75rem !important;
    padding-bottom: 1.75rem !important;
  }

  .employer-page .ej-ai-modes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .employer-page .ej-ai-modes-placeholder {
    height: auto !important;
    min-height: 2.5rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .employer-page .ej-ai-modes-generate {
    width: 100%;
    justify-content: center;
  }

  .employer-page .ej-pipeline-intro {
    margin-bottom: 3rem;
  }

  .lang_ar .employer-page .ej-jd-builder-card {
    padding: 1.25rem !important;
  }

  .lang_ar .employer-page .ej-jd-builder-card .ej-card-badge {
    max-width: calc(100% - 1rem);
    padding: 0.625rem !important;
  }

  .lang_ar .employer-page .ej-jd-builder-job-field,
  .lang_ar .employer-page .ej-jd-builder-skills-field {
    width: 100%;
    min-width: 0;
  }

  .lang_ar .employer-page .ej-jd-builder-job-value {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .lang_ar .employer-page .ej-jd-builder-skills {
    width: 100%;
    min-width: 0;
  }

  .employer-page .ej-pipeline-status-grid {
    gap: 1rem !important;
  }

  .employer-page .ej-cta-bottom-title {
    font-size: 1.375rem !important;
    line-height: 1.3;
    margin-bottom: 1.25rem !important;
  }

  .employer-page .ej-cta-bottom-btn {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    font-size: 0.9375rem !important;
    gap: 0.375rem;
  }
}

@media screen and (min-width: 576px) and (max-width: 768px) and (orientation: portrait) {
  /* iPad mini / small tablets in portrait */
  .md\:text-6xl {
    font-size: 2.5rem;
  }

  .employer-page main > section {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .employer-page main > section.pt-24 {
    padding-top: 4.5rem !important;
    padding-bottom: 3rem !important;
  }

  .employer-page main > section.py-20 {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }

  .employer-page main > section.py-12 {
    padding-top: 2.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  .employer-page .ej-ai-modes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .employer-page .ej-ai-modes-placeholder {
    height: auto !important;
    min-height: 2.5rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .employer-page .ej-ai-modes-generate {
    width: 100%;
    justify-content: center;
  }

  .employer-page .ej-pipeline-intro {
    margin-bottom: 3.25rem;
  }

  .employer-page .ej-pipeline-status-grid {
    gap: 1.25rem !important;
  }

  .employer-page .ej-cta-bottom-title {
    font-size: 1.5rem !important;
    line-height: 1.3;
    margin-bottom: 1.5rem !important;
  }

  .employer-page .ej-cta-bottom-btn {
    padding-top: 0.875rem !important;
    padding-bottom: 0.875rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    font-size: 1rem !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 820px) and (orientation: portrait) {
  /* iPad Air (portrait) */
  .md\:text-6xl {
    font-size: 2.5rem;
  }

  .employer-page main > section {
    padding-left: 1.35rem !important;
    padding-right: 1.35rem !important;
  }

  .employer-page main > section.pt-24 {
    padding-top: 5rem !important;
    padding-bottom: 3.25rem !important;
  }

  .employer-page main > section.py-20 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }

  .employer-page main > section.py-12 {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
  }

  .employer-page .ej-ai-modes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .employer-page .ej-ai-modes-placeholder {
    height: auto !important;
    min-height: 2.5rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .employer-page .ej-ai-modes-generate {
    width: 100%;
    justify-content: center;
  }

  .employer-page .ej-pipeline-intro {
    margin-bottom: 3.5rem;
  }

  .employer-page .ej-pipeline-status-grid {
    gap: 1.375rem !important;
  }

  .employer-page .ej-cta-bottom-title {
    font-size: 1.625rem !important;
    line-height: 1.3;
    margin-bottom: 1.5rem !important;
  }

  .employer-page .ej-cta-bottom-btn {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    font-size: 1.0625rem !important;
  }
}

@media screen and (min-width: 821px) and (max-width: 834px) and (orientation: portrait) {
  /* iPad Pro 11" (portrait) */
  .md\:text-6xl {
    font-size: 2.5rem;
  }

  .employer-page main > section {
    padding-left: 1.4rem !important;
    padding-right: 1.4rem !important;
  }

  .employer-page main > section.pt-24 {
    padding-top: 5.25rem !important;
    padding-bottom: 3.5rem !important;
  }

  .employer-page main > section.py-20 {
    padding-top: 4.25rem !important;
    padding-bottom: 4.25rem !important;
  }

  .employer-page main > section.py-12 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  .employer-page .ej-ai-modes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .employer-page .ej-ai-modes-placeholder {
    height: auto !important;
    min-height: 2.5rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .employer-page .ej-ai-modes-generate {
    width: 100%;
    justify-content: center;
  }

  .employer-page .ej-pipeline-intro {
    margin-bottom: 3.5rem;
  }

  .employer-page .ej-pipeline-status-grid {
    gap: 1.5rem !important;
  }

  .employer-page .ej-cta-bottom-title {
    font-size: 1.625rem !important;
    line-height: 1.3;
    margin-bottom: 1.5rem !important;
  }

  .employer-page .ej-cta-bottom-btn {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    font-size: 1.0625rem !important;
  }
}

@media screen and (min-width: 835px) and (max-width: 1024px) and (orientation: portrait) {
  /* iPad Pro 12.9" and large tablets (portrait) */
  .md\:text-6xl {
    font-size: 2.5rem;
  }

  .employer-page main > section {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  .employer-page main > section.pt-24 {
    padding-top: 5.5rem !important;
    padding-bottom: 3.75rem !important;
  }

  .employer-page main > section.py-20 {
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }

  .employer-page main > section.py-12 {
    padding-top: 3.25rem !important;
    padding-bottom: 3.25rem !important;
  }

  .employer-page .ej-ai-modes-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }

  .employer-page .ej-ai-modes-placeholder {
    height: auto !important;
    min-height: 2.5rem;
    align-items: flex-start;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .employer-page .ej-ai-modes-generate {
    width: 100%;
    justify-content: center;
  }

  .employer-page .ej-pipeline-intro {
    margin-bottom: 3.5rem;
  }

  .employer-page .ej-pipeline-status-grid {
    gap: 1.5rem !important;
  }

  .employer-page .ej-cta-bottom-title {
    font-size: 1.6875rem !important;
    line-height: 1.3;
    margin-bottom: 1.625rem !important;
  }

  .employer-page .ej-cta-bottom-btn {
    padding-top: 1.125rem !important;
    padding-bottom: 1.125rem !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    font-size: 1.0625rem !important;
  }
}