/* banner start */

#career .career-bg {
  background-image: url(/img/v2/homeWeb/career-banner.webp);
  background-repeat: no-repeat;
  background-position: center;
  height: 100%;
}

#career .banner {
  height: calc(100vh - 4rem);
  padding: 0 .25rem;
}

#career .header-txt {
  font-size: clamp(3rem, 7vw, 4.15rem);
  background: linear-gradient(232.27deg,
      rgba(43, 161, 227, 1) 0%,
      rgba(0, 104, 199, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#career .stroke-effect {
  font-size: clamp(3rem, 7vw, 7.15rem);
  font-weight: bolder;
  line-height: 6.5rem;
  -webkit-text-fill-color: transparent;
  /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: var(--dark-clr);
}

/* banner end */

/* Benefits start */

.career-rounded-bg {
  background: linear-gradient(145.58deg,
      rgba(0, 144, 224, 1) -60%,
      rgba(228, 240, 255, 1) 100%);
  border-radius: 139px 139px 0px 0px;
}

#career .sticky-content {
  position: sticky;
  top: 5%;
}

#career .sticky-inner-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid white;
  height: 750px;
}

#career .custom-text {
  font-size: clamp(2.5rem, 5vw, 3rem);
}

#career .custom-circle {
  width: 14px;
  height: 14px;
  background: linear-gradient(152.01deg,
      rgba(0, 104, 199, 1) 0%,
      rgba(27, 42, 50, 1) 65.3477430343628%,
      rgba(0, 0, 0, 1) 100%);
  border-radius: 100%;
}

#career .custom-rectangle {
  background: linear-gradient(152.01deg,
      rgba(0, 104, 199, 1) 0%,
      rgba(27, 42, 50, 1) 65.3477430343628%,
      rgba(0, 0, 0, 1) 100%);
  border-radius: 17px;
  width: 71.5px;
  height: 12px;
}

#career .right-scroll-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 1rem;
  transition: 0.4s ease-in-out;
}

#career .right-scroll-content:hover {
  background-color: var(--background-clr);
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* Benefits end */

/* How to become start */

#career .step-bar {
  position: relative;
  max-width: 1000px;
  margin: 1rem auto;
  z-index: 1;
}

#career .step-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  bottom: 0;
  background-color: #ccc;
  width: 4px;
  z-index: 1;
}

#career .step-box-l {
  position: relative;
  text-align: right;
  margin-bottom: 1rem;
  margin-right: 2.5rem;
  margin-left: 0;
}

#career .step-box-r {
  margin-bottom: 1rem;
  text-align: left;
  position: relative;
  margin-left: 2.5rem;
  margin-right: 0;
}

#career .step-content {
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: #fff;
  border-radius: 0.5rem;
  transition: 0.4s ease-in-out;
  position: relative;
}

#career .step-content:hover {
  background-color: var(--background-clr);
}

#career .one {
  position: absolute;
  border: 6px solid var(--dark-clr);
  padding: 0.5rem 1.25rem;
  top: 0%;
  left: -10%;
  font-size: 1.2rem;
  border-radius: 100%;
  box-shadow: 0px 4px 8px 0px rgba(0, 64, 216, 0.3);
  z-index: 10;
  /* ✅ Higher than line */
  background: white;
}

#career .right {
  position: absolute;
  border: 6px solid var(--dark-clr);
  padding: 0.5rem 1.15rem;
  top: 0%;
  left: -10%;
  font-size: 1.2rem;
  border-radius: 100%;
  box-shadow: 0px 4px 8px 0px rgba(0, 64, 216, 0.3);
  z-index: 10;
  /* ✅ Higher than line */
  background: white;
}

#career .left {
  position: absolute;
  border: 6px solid var(--dark-clr);
  padding: 0.5rem 1.1rem;
  top: 0%;
  right: -11%;
  font-size: 1.2rem;
  border-radius: 100%;
  box-shadow: 0px 4px 8px 0px rgba(0, 64, 216, 0.3);
  z-index: 10;
  /* ✅ Higher than line */
  background: white;
}

#career .emoji {
  position: absolute;
  border: 6px solid var(--dark-clr);
  padding: 0.5rem 0.85rem;
  top: 20%;
  right: -11%;
  font-size: 1.2rem;
  border-radius: 100%;
  box-shadow: 0px 4px 8px 0px rgba(0, 64, 216, 0.3);
  z-index: 10;
  /* ✅ Higher than line */
  background: white;
}

/* How to become end */

/* Opening start */

#career .opening-card {
  background-color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0px -5px 10px 0px rgba(117, 117, 117, 0.1),
    0px -19px 19px 0px rgba(117, 117, 117, 0.09),
    0px -42px 25px 0px rgba(117, 117, 117, 0.05),
    0px -75px 30px 0px rgba(117, 117, 117, 0.01),
    0px -117px 33px 0px rgba(117, 117, 117, 0);
  padding: 2.15rem 1.75rem;
}

#career .time-based {
  font-size: 0.9rem;
  border: 1px solid #111;
  padding: 0.5rem 1.25rem;
  border-radius: 1rem;
}

#career .apply-btn {
  background-color: rgba(0, 104, 199, 1);
  color: white;
  font-size: 0.95rem;
  padding: 0.4rem 2.5rem;
  border-radius: 2rem;
  border: 2px solid transparent;
}

.white-arrow {
  transition: transform 0.3s ease;
}

button[aria-expanded="true"] .white-arrow {
  transform: rotate(90deg);
}

#career .job-form {
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0px -5px 10px 0px rgba(117, 117, 117, 0.1),
    0px -19px 19px 0px rgba(117, 117, 117, 0.09),
    0px -42px 25px 0px rgba(117, 117, 117, 0.05),
    0px -75px 30px 0px rgba(117, 117, 117, 0.01),
    0px -117px 33px 0px rgba(117, 117, 117, 0);
  padding: 1rem;
  margin-top: 1.5rem;
}

#career .job-form-title {
  background-color: var(--dark-clr);
  padding: 0.75rem 0;
  text-align: center;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 1rem 1rem 0 0;
}

#career .jf-feild input {
  background-color: transparent;
  outline: none;
  border: none;
  width: 100%;
}

#career .jf-feild {
  background-color: var(--background-clr);
  padding: 0.75rem;
  border-radius: 1.4rem;
  box-shadow: -2.24px 0px 5.6px 0px rgba(112, 112, 112, 0.1),
    -11.2px 0px 11.2px 0px rgba(112, 112, 112, 0.09),
    -24.63px 0px 14.55px 0px rgba(112, 112, 112, 0.05),
    -42.54px 0px 16.79px 0px rgba(112, 112, 112, 0.01),
    -67.18px 0px 19.03px 0px rgba(112, 112, 112, 0);
}

#career .jf-upl-feild {
  position: relative;
  background-color: var(--background-clr);
  padding: 0.75rem;
  border-radius: 1.4rem;
  box-shadow: -2.24px 0px 5.6px 0px rgba(112, 112, 112, 0.1),
    -11.2px 0px 11.2px 0px rgba(112, 112, 112, 0.09),
    -24.63px 0px 14.55px 0px rgba(112, 112, 112, 0.05),
    -42.54px 0px 16.79px 0px rgba(112, 112, 112, 0.01),
    -67.18px 0px 19.03px 0px rgba(112, 112, 112, 0);
}

#career .jf-upl-feild input {
  position: absolute;
  opacity: 0;
}

#career .jf-file {
  position: relative;
  background-color: var(--background-clr);
  padding: 0.35rem 0.35rem 0.35rem 1.15rem;
  border-radius: 1.4rem;
  box-shadow: -2.24px 0px 5.6px 0px rgba(112, 112, 112, 0.1),
    -11.2px 0px 11.2px 0px rgba(112, 112, 112, 0.09),
    -24.63px 0px 14.55px 0px rgba(112, 112, 112, 0.05),
    -42.54px 0px 16.79px 0px rgba(112, 112, 112, 0.01),
    -67.18px 0px 19.03px 0px rgba(112, 112, 112, 0);
  cursor: pointer;
}

#career .jf-file__input--file {
  position: absolute;
  opacity: 0;
}

#career .jf-file__input--label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
}

#career .jf-file__input--label:after {
  content: attr(data-text-btn);
  background: linear-gradient(90deg,
      rgba(0, 104, 199, 1) 0%,
      rgba(11, 76, 158, 1) 100%);
  border-radius: 0px 70px 70px 0px;
  color: #fff;
  padding: 0.5rem 1rem;
}

/* Opening end */

/* -----------------------------------------Responsiove Codes----------------------------------------------------------- */

/* Extra Small Devices (Phones) */
@media only screen and (max-width: 576px) {
  #career .stroke-effect {
    line-height: 4rem;
  }

  #career .sticky-content {
    position: static;
  }

  .career-rounded-bg {
    border-radius: 59px 59px 0px 0px;
  }

  #career .step-bar::before {
    visibility: hidden;
  }

  #career .left,
  #career .emoji {
    right: 100%;
    visibility: hidden;
  }

  #career .right,
  #career .one {
    visibility: hidden;
  }

  #career .step-box-r,
  #career .step-box-l {
    text-align: left;
    position: relative;
    margin-left: 0.5rem;
    margin-right: 0rem;
    margin-bottom: 0;
  }

  #career .step-content {
    padding: 1rem 1rem;
  }
}

/* Small Devices (Tablets) */
@media only screen and (min-width: 577px) and (max-width: 767px) {
  #career .stroke-effect {
    line-height: 5rem;
  }

  #career .sticky-content {
    position: static;
  }

  .career-rounded-bg {
    border-radius: 59px 59px 0px 0px;
  }

  #career .step-bar::before {
    visibility: hidden;
  }

  #career .left,
  #career .emoji {
    visibility: hidden;
  }

  #career .right,
  #career .one {
    visibility: hidden;
  }

  #career .step-box-r,
  #career .step-box-l {
    text-align: left;
    position: relative;
    margin-left: 0.5rem;
    margin-right: 0rem;
  }

  #career .step-box-l {
    text-align: left;
    margin-left: 0.5rem;
    margin-right: 0;
  }

  #career .step-content {
    padding: 0.1rem 1.5rem;
  }
}

/* Medium Devices (Laptops, Smaller Desktops) */
@media only screen and (min-width: 768px) and (max-width: 992px) {
  #career .banner {
    padding: 0 .5rem;
  }

  #career .stroke-effect {
    line-height: 5rem;
  }

  #career .sticky-content {
    position: static;
  }

  .career-rounded-bg {
    border-radius: 109px 109px 0px 0px;
  }

  #career .step-bar::before {
    left: 0%;
  }

  #career .left,
  #career .emoji {
    right: 101%;
  }

  #career .right,
  #career .one {
    left: -10%;
  }

  #career .step-box-l {
    text-align: left;
    margin-left: 2.5rem;
    margin-right: 0;
  }

  #career .step-content {
    padding: 1rem 1.5rem;
  }
}

@media only screen and (min-width: 993px) and (max-width: 1200px) {}

@media only screen and (min-width: 1201px) and (max-width: 1399px) {}

@media only screen and (min-width: 1441px) and (max-width: 1920px) {}

@media only screen and (min-width: 1921px) {}