.job-details-container {
  background-color: #fff;

  border-radius: 20px;

  border: solid 1px var(--second-color);

  padding: 15px 10px;

  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.company-details-logo-img {
  width: 100%;

  max-width: 80px;

  height: 80px;

  border-radius: 50%;
}

.path {
  font-size: 14px;
  text-decoration: none;
  color: #808080;
}

.company-job-title {
  font-size: 23px;

  font-weight: 600;

  width: 100%;

  max-width: 600px;

  color: #000000;
}

.share-book-icon {
  color: #000000;

  font-size: 20px;
}

.job-desc-info {
  font-size: 15px;

  font-weight: 500;

  color: #000000;
}

.job-desc-para-content {
  font-size: 14px;

  font-weight: 500;

  /* color:#918A8A; */

  text-align: justify;

  margin-top: 15px;
}

.job-service-tag {
  white-space: nowrap;

  font-size: 11px;

  font-weight: 500;

  border: solid 1px var(--second-color);

  padding: 7px 10px;

  border-radius: 15px;

  color: #000000;
}

.job-desc-icon-show {
  width: 100%;

  max-width: 30px;

  height: 30px;
}

.job-locate-main-container h6 {
  font-size: 16px;

  font-weight: 600;

  color: #000000;
}

.job-locate-main-container p {
  font-size: 14px;

  font-weight: 500;

  text-align: justify;
}

.job-require-icons-show {
  width: 100%;

  max-width: 30px;

  height: 30px;
}

.job-filter-scroll-show {
  display: flex;

  align-items: center;

  white-space: nowrap;

  gap: 10px;

  scrollbar-width: none;

  scroll-behavior: smooth;

  overflow-x: scroll;

  width: 100%;

  max-width: 730px;
}

.filter-tab-box {
  background-color: #e8e8e8;

  padding: 7px 13px;

  border-radius: 20px;

  font-size: 15px;

  font-weight: 500;

  color: #000000;

  white-space: nowrap;

  cursor: pointer;
}

.range-wrapper {
  max-width: 500px;

  margin: 50px auto;

  text-align: center;
}

.output-labels {
  display: flex;

  justify-content: space-between;

  margin-bottom: 5px;

  font-weight: 500;
}

.form-range {
  pointer-events: auto;
}

.desktop-job-filter {
  position: sticky;

  top: 0px;
}

.mob-job-filter-box {
  background-color: var(--first-color);

  color: #fff;

  border-radius: 10px;

  padding: 10px 15px;

  font-size: 15px;

  font-weight: 500;
}

.job-filter-overlay {
  position: fixed;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 255, 255, 0.97);

  z-index: 9999;

  transform: translateY(100%);

  transition: transform 0.3s ease-in-out;

  overflow-y: auto;

  padding: 20px 5px;
}

.job-filter-overlay.show {
  transform: translateY(0);
}

.job-filter-content {
  max-width: 600px;

  margin: auto;
}

/* =================================BPO Page======================================= */

.bpo-benefit-container {
  border: solid 1px var(--first-color);

  color: var(--first-color);

  padding: 20px 20px;
}

.bpo-benefit-container .benefit-icon-box {
  background-color: var(--first-color);

  width: 50px;

  height: 50px;

  border-radius: 50%;

  padding: 10px 9px;
}

.bpo-benefit-container .benefit-icon-box img {
  width: 30px;

  height: 30px;
}

.video-container-box {
  position: relative;
}

.video-container-box img {
  width: 100%;

  height: 400px;

  object-fit: cover;

  border-radius: 15px;

  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.video-container-box span {
  position: absolute;

  top: 15px;

  left: 15px;

  padding: 4px 10px;

  border-radius: 20px;

  font-size: 13px;

  font-weight: 500;

  background-color: #ffffffa6;
}

.video-container-box span i {
  color: #f5bb1b;
}

.video-container-box .play-icon {
  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  background-color: #ffffff79;

  color: var(--first-color);

  padding: 5px 13px;

  border-radius: 50%;

  color: var(--first-color);

  font-size: 30px;

  cursor: pointer;
}

.video-popup {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.85);

  display: none;

  justify-content: center;

  align-items: center;

  z-index: 9999;
}

.close-icon {
  position: absolute;

  top: 20px;

  right: 30px;

  font-size: 28px;

  color: white;

  cursor: pointer;
}

.iframe-wrapper {
  width: 80%;

  max-width: 800px;

  aspect-ratio: 16/9;

  background: #000;
}

#videoIframe {
  width: 100%;

  height: 100%;

  border: none;
}

.bpo-input-box {
  width: 100%;

  border-radius: 10px;

  padding: 10px;

  outline: none;

  border: none;
}

.bpo-input-box:focus {
  outline: none;
}

.bpo-form-submit-btn {
  width: 100%;

  border-radius: 10px;

  padding: 10px 15px;

  background-color: var(--third-color);

  color: #000000;

  border: solid 1px var(--third-color);
}

.counter-number h3 {
  color: var(--third-color);

  font-size: 50px;

  text-align: center;

  font-weight: 600;
}

.counter-number p {
  font-size: 14px;

  text-align: center;

  font-weight: 500;
}

.bpo-page-banner-area-container {
  background: url("../images/bpo-bg.png") no-repeat;

  background-size: cover;

  height: 500px;
}

.bpo-page-content-section {
  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  background-color: rgba(255, 255, 255, 0.3);

  padding: 20px 20px;

  width: 100%;

  max-width: 650px;

  height: 500px;

  position: relative;
}

.bpo-page-content-section .details {
  position: absolute;

  bottom: 0;

  padding-right: 20px;
}

.bpo-page-content-section h1 {
  font-size: 30px;

  font-weight: 700;

  color: #000000;
}

.bpo-page-content-section p {
  font-size: 18px;

  font-weight: 400;

  color: #000000;

  text-align: justify;
}

@media only screen and (max-width: 992px) {
  .company-details-logo-img {
    max-width: 40px;

    height: 40px;
  }

  .company-job-title {
    font-size: 14.5px;

    max-width: 200px;
  }

  .share-book-icon {
    color: #000000;

    font-size: 15px;
  }

  .desktop-job-filter {
    display: none;
  }

  .video-container-box img {
    height: 200px;
  }

  .bpo-page-content-section .details {
    top: 30px;
  }

  .bpo-page-banner-area-container {
    height: 300px;
  }

  .bpo-page-content-section {
    backdrop-filter: blur(2px);

    -webkit-backdrop-filter: blur(2px);

    background-color: rgba(255, 255, 255, 0.2);

    height: 300px;
  }

  .bpo-page-content-section h1 {
    font-size: 20px;
  }

  .bpo-page-content-section p {
    font-size: 15px;
  }
}

@media only screen and (min-width: 992.99px) {
  .mobile-job-filter {
    display: none;
  }
}

.company-job-title-2 {
  max-width: 100% !important;
  font-size: 14.5px;
  max-width: 200px;
}