/* About Us */

.vm-right-bg-img {
  position: absolute;
  right: 0;
  top: -13%;
  z-index: 1;
  pointer-events: none;
  width: 26%;
  height: 20%;
}

.about-iso-img {
  position: absolute;
  top: -95px;
  right: 5.6%;
}

.about-iso-img img {
  width: 85%;
}
.gradient-big-text {
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: var(--secondary-font);
}

.gradient-text-wrap {
  position: relative;
}

/* MAIN TEXT */
.main-text {
  font-size: 110px;
  font-weight: 650;
  line-height: 1;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  position: relative;
  z-index: 3;
  /* background: linear-gradient(90deg, #ff7a18, #ff3d00); */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* OUTLINE TEXT (TOP BACK) */
.outline-top {
  position: absolute;
  top: -71px;
  left: 0;
  font-size: 110px;
  font-weight: 650;
  color: transparent;
  -webkit-text-stroke: 1px #f18721;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(13 13 13 / 75%) 20%,
    rgba(0, 0, 0, 0) 60%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(13 13 13 / 75%) 20%,
    rgba(0, 0, 0, 0) 60%
  );
}
.outline-bottom {
  position: absolute;
  bottom: -63px;
  left: 0;
  font-size: 110px;
  line-height: 150px;
  font-weight: 650;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 120, 0, 0.5);
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to top,
    rgb(128 128 128) 25%,
    rgb(67 67 67 / 0%) 50%
  );
  mask-image: linear-gradient(
    to top,
    rgb(128 128 128) 25%,
    rgb(67 67 67 / 0%) 50%
  );
}
/* DARK FADE OVER TEXT (BOTTOM SHADOW EFFECT) */
.main-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
}
.vm-section {
  position: relative;
  min-height: 600px;
  margin: auto;
  overflow: hidden;
}
.vm-heading {
  font-size: 110px;
  font-weight: 800;
  position: absolute;
}
.abt-desc {
  position: absolute;
  width: 44%;
  color: #ddd;
}
.vision-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    0deg,
    rgba(7, 11, 8, 0) 0%,
    rgb(7 11 8 / 100%) 80%
  );
}
.vision-title {
  top: 15%;
  left: 0%;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.vision-text {
  top: 10%;
  right: 0%;
  text-align: center;
}
.vision-line {
  position: absolute;
  top: 20%;
  right: 20%;
  width: 45%;
  height: 12%;
}
.vision-line::before {
  content: "";
  position: absolute;
  bottom: -14%;
  left: 0;
  width: 100.9%;
  height: 1.5px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 1)
  );
}
.vision-line::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 120%;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 1)
  );
}
.mission-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 8, 0) 0%,
    rgb(7 11 8 / 100%) 80%
  );
}
.mission-title {
  top: 45%;
  right: 0%;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.mission-text {
  bottom: 12%;
  left: 0%;
  text-align: center;
}
.mission-line {
  position: absolute;
  bottom: 27%;
  left: 20%;
  width: 35%;
  height: 12%;
}
.vision-bg {
  position: relative;
}
.vision-bg::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 55%;
  transform: translateY(-50%);
  width: 50%;
  height: 75%;
  background: url(../../assets/images/company/about-us/vision-bg-image.png)
    no-repeat left / contain;
  opacity: 1;
  z-index: 0;
}

.vision-bg::after {
  content: "";
  position: absolute;
  right: 0%;
  top: 90%;
  transform: translateY(-50%);
  width: 45%;
  height: 68%;
  background: url(../../assets/images/company/about-us/our-values-dots-bg-image2.png)
    no-repeat left / cover;
  opacity: 1;
  z-index: 0;
}
.mission-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5px;
  width: 130%;
  height: 1.1px;
  background: linear-gradient(
    to left,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 1)
  );
}
.mission-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 1.5px;
  height: 135%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.4),
    rgba(255, 255, 255, 1)
  );
}

.about-us-hero-section-bg {
  position: relative;
  z-index: 2;
  margin-top: 0;
  padding: 18% 0 3%;
  overflow: hidden;
}

/* ---- ::before used for left-edge warm strip (subtle, matches Figma left bleed) ---- */
.about-us-hero-section-bg {
  position: relative;
  z-index: 1;
}

/* Image */
.about-us-hero-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/images/company/about-us/about-us-hero-section-bg.png")
    no-repeat left center / 100% 100%;
  z-index: -2;
}

/* Shadow Overlay */
.about-us-hero-section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 8, 0) 60%, rgb(7 11 8) 100%);
  z-index: -1;
}
.abt-values-section-wrapper {
  position: relative;
}

.abt-values-section-wrapper::before {
  content: "";
  position: absolute;
  left: -30%;
  top: 99%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  background: url(../../assets/images/company/about-us/our-values-dots-bg-image.png)
    no-repeat left / contain;
  opacity: 1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: bottom center;
}

.abt-values-section-wrapper::after {
  content: "";
  position: absolute;
  right: 0%;
  top: -18%;
  width: 35%;
  height: 35%;
  background: url(../../assets/images/company/about-us/start-icon-big.svg)
    no-repeat right / contain;
  opacity: 1;
  z-index: 1;
}

.abt-our-values-section {
  position: relative;
  background: url("../../assets/images/company/about-us/abt-our-values-section-bg.png")
    no-repeat 0% 33% / 60%;
}

/* Keep content above */
.abt-our-values-section > * {
  position: relative;
  z-index: 1;
}

.abt-our-values-card {
  border: 1px solid transparent;
  border-image: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  border-image-slice: 1;
  background-color: var(--body-bg);
}

.gradient-big-text {
  font-size: 125px;
  font-weight: 900;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

.team-member-card {
  position: relative;
}

.team-member-card .img-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.team-member-card .img-wrapper > img {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
  /*-webkit-filter: grayscale(0.8);*/
  /*filter: grayscale(0.8);*/
}

.team-member-card .img-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/images/company/about-us/team-member-img-bg.png");
  background-size: cover;
  background-position: center;
  opacity: 0;
  z-index: 1;
}

.team-member-card:hover .img-wrapper::before {
  opacity: 1;
}

.team-member-card:hover .img-wrapper img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}

.team-member-name {
  font-size: 24px;
  color: #fff;
  font-weight: 500;
}

.team-member-role {
  font-size: 16px;
  color: #fff;
  opacity: 0.6;
  font-family: var(--primary-font);
}

.team-member-card i {
  width: 24px;
  height: 24px;
  align-items: center;
  display: flex;
  justify-content: center;
  opacity: 0.6;
  position: absolute;
  right: 0%;
}

.team-member-card:hover i {
  background: #fff;
  color: #0077b5;
  border-radius: 3px;
}

/* Corner base style */
.team-member-card .corner {
  position: absolute;
  color: rgb(255 255 255 / 80%);
  font-size: 25px;
  font-weight: 100;
  opacity: 0;
  transition: 0.3s ease;
  pointer-events: none;
}

/* Position each corner */
.team-member-card .corner-tl {
  top: 0%;
  left: 0%;
}

.team-member-card .corner-tr {
  top: 0%;
  right: 0%;
}

.team-member-card .corner-bl {
  bottom: -12%;
  left: 0%;
}

.team-member-card .corner-br {
  bottom: -12%;
  right: 0%;
}

/* Show on hover */
.team-member-card:hover .corner {
  opacity: 1;
}

.video-styles {
  background: #000000;
  box-shadow: 0px -10px 25.3px rgba(216, 32, 41, 0.5);
  corner-shape: bevel;
  border-radius: 29px !important;
}

.abt-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 35px;
  color: #fff;
  background: rgb(255 255 255 / 30%);
  z-index: 2;
  transition: 0.3s ease;
  width: 55px;
  border-radius: 39px;
  height: 55px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.star-image1 img,
.star-image2 img {
  width: 8%;
}

.star-image1 {
  position: absolute;
  left: 2%;
  top: 18%;
}

.star-image2 {
  position: absolute;
  right: -2%;
  bottom: 40%;
}

/* .video-wrapper:hover .play-btn {
    color: #dc3545;
    transform: translate(-50%, -50%) scale(1.1);
}

.video-wrapper:hover {
    transform: scale(1.02);
    transition: 0.3s;
} */

/* ================= Careers ================= */

.careers-hero-section {
  position: relative;
  background: #070b08;
  margin-top: 0;
  padding: 14% 0 3%;
  border-radius: 0px 0px 25px 25px;
  overflow: hidden;
}

.careers-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../../assets/images/company/careers/careers-hero-bg.png"); /* change path if needed */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 100% 65%;
}

.careers-hero-container {
  position: relative;
  background-image: url("../../assets/images/company/careers/heading-bg.png");
  background-repeat: no-repeat;
  background-position: 50% -7rem;
  background-size: cover;
}
.careers-gradient-big-text {
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: var(--secondary-font);
}

.careers-gradient-text-wrap {
  position: relative;
}

.our-promise-sec-bg {
  position: relative;
}

.our-promise-sec-bg::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0%;
  transform: translateY(-50%);
  width: 50%;
  height: 75%;
  background: url(../../assets/images/company/careers/our-promise-sec-left-bg.png)
    no-repeat left / contain;
  opacity: 1;
  z-index: 0;
}

.carousel-indicators.careers-carousel {
  bottom: -20%;
  gap: 8px;
}

.carousel-indicators.careers-carousel button[data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50px;
  background-color: #d9d9d9;
  transition: all 0.3s ease;
  margin: 0 !important;
  border: none;
}

.carousel-indicators.careers-carousel button.active {
  width: 25px !important;
  height: 8px !important;
  border-radius: 50px !important;
  background-color: #ffffff;
}

/* =========================
   SECTION BACKGROUND
========================= */
.pg-section-bg {
  position: relative;
  overflow: hidden;
}

/* Background image layer */
.pg-section-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../../assets/images/company/careers/pg-section-bg.png)
    no-repeat center;
  /* transition: all 0.1s ease; */
  z-index: -1;
}

/* =========================
   CARD STYLING
========================= */
.pg-card {
  padding: 95px 20px 20px 20px;
  border: 1px solid transparent;

  border-image: linear-gradient(
      134.94deg,
      rgba(241, 135, 33, 0.5) 0.05%,
      rgba(216, 32, 41, 0.5) 99.95%
    )
    1;

  border-image-slice: 1;
  background: var(--body-bg);
  transition: all 0.4s ease;
}

/* Hover effect on card */
.pg-card:hover {
  background: rgb(29, 29, 29);
}

/* =========================
   BACKGROUND MOVE ON HOVER
========================= */

/* LEFT CARD */
.pg-section-bg:has(.pg-col:nth-child(1) .pg-card:hover)::before {
  background: url(../../assets/images/company/careers/pg-section-bg.png)
    no-repeat center;
  background-size: cover;
  background-position: -500px center;
}

/* MIDDLE CARD */
.pg-section-bg:has(.pg-col:nth-child(2) .pg-card:hover)::before {
  background: url(../../assets/images/company/careers/pg-section-bg.png)
    no-repeat center;
  background-size: cover;
  background-position: center;
  background-size: cover;
}

/* RIGHT CARD */
.pg-section-bg:has(.pg-col:nth-child(3) .pg-card:hover)::before {
  background: url(../../assets/images/company/careers/pg-section-bg.png)
    no-repeat center;
  background-size: cover;
  background-position: 500px center;
}

/* Section Background */
.current-opportunities-section {
  background: linear-gradient(180deg, #101010 0%, #070b08 100%);
  margin-top: 20px;
}

/* Row Styling */
.cos-row {
  cursor: pointer;
  padding: 50px 15px;
  transition: all 0.3s ease;
}

/* Number Styling */
.cos-left-block .numbering {
  font-size: 190px;
  line-height: 160px;
  width: 150px;
  color: var(--body-bg);
  background: #f18721;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px transparent;
  margin-bottom: 0px !important;
  transition: all 0.3s ease;
}

/* Heading */
.cos-left-block h3 {
  font-weight: 300;
  background:
    linear-gradient(0deg, #ffffff, #ffffff),
    linear-gradient(90deg, #ffffff -7.03%, #d82029 107.35%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  transition: all 0.4s ease;
}

/* Flex alignment */
.cos-left-block .d-flex {
  align-items: center;
  transition: all 0.3s ease;
}

/* Hover Effects */
.cos-row:hover .cos-left-block .d-flex {
  align-items: flex-start;
}

.cos-row:hover .cos-left-block h3 {
  transform: translateY(-55px);
}

.cos-row:hover .cos-left-block .numbering {
  color: #f18721;
}

/* Right Block Hidden Initially */
.cos-right-block {
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

/* Show on Hover */
.cos-row:hover .cos-right-block {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* MAIN TEXT */
.careers-main-text {
  font-size: 110px;
  font-weight: 650;
  line-height: 1;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  position: relative;
  z-index: 3;
  /* background: linear-gradient(90deg, #ff7a18, #ff3d00); */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* OUTLINE TEXT (TOP BACK) */
.careers-outline-top {
  position: absolute;
  top: -71px;
  left: 0;
  font-size: 110px;
  font-weight: 650;
  color: transparent;
  -webkit-text-stroke: 1px #f18721;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(13 13 13 / 100%) 30%,
    rgba(0, 0, 0, 0) 60%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(13 13 13 / 100%) 30%,
    rgba(0, 0, 0, 0) 60%
  );
}
.careers-outline-bottom {
  position: absolute;
  bottom: -63px;
  left: 0;
  font-size: 110px;
  line-height: 150px;
  font-weight: 650;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 120, 0, 0.5);
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to top,
    rgb(128 128 128) 30%,
    rgb(67 67 67 / 0%) 60%
  );
  mask-image: linear-gradient(
    to top,
    rgb(128 128 128) 30%,
    rgb(67 67 67 / 0%) 60%
  );
}
/* DARK FADE OVER TEXT (BOTTOM SHADOW EFFECT) */
.careers-main-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
}

.careers-app-form,
.current-opportunities-section {
  position: relative;
}

.careers-app-form::after {
  content: "";
  position: absolute;
  right: 0%;
  left: auto;
  top: 15%;
  width: 100%;
  height: 50%;
  background: url(../../assets/images/company/careers/contact-bg.png) no-repeat
    center;
  background-size: contain;
  background-position: 100% 100%;
  z-index: -9;
}

.current-opportunities-section::after {
  content: "";
  position: absolute;
  right: 0%;
  left: auto;
  bottom: 0%;
  width: 100%;
  height: 50%;
  background: url(../../assets/images/company/careers/current-opportunities-right-bg.png)
    no-repeat center;
  background-size: contain;
  background-position: 100% 100%;
  z-index: -9;
}

.careers-team-image img {
  border-radius: 20px;
}

/* ================= Learning Hub ================= */

.lh-gradient-big-text {
  height: 270px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: var(--secondary-font);
}

.lh-main-text {
  font-size: 110px;
  font-weight: 650;
  line-height: 140px;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  position: relative;
  z-index: 3;
  /* background: linear-gradient(90deg, #ff7a18, #ff3d00); */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* OUTLINE TEXT (TOP BACK) */
.lh-outline-top {
  position: absolute;
  top: -59px;
  left: 0;
  font-size: 110px;
  font-weight: 650;
  color: transparent;
  -webkit-text-stroke: 1px #f18721;
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgb(13 13 13 / 75%) 20%,
    rgba(0, 0, 0, 0) 60%
  );
  mask-image: linear-gradient(
    to bottom,
    rgb(13 13 13 / 75%) 20%,
    rgba(0, 0, 0, 0) 60%
  );
}
.lh-outline-bottom {
  position: absolute;
  bottom: -50px;
  left: 0;
  font-size: 110px;
  line-height: 150px;
  font-weight: 650;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 120, 0, 0.5);
  z-index: 1;
  -webkit-mask-image: linear-gradient(
    to top,
    rgb(128 128 128) 25%,
    rgb(67 67 67 / 0%) 50%
  );
  mask-image: linear-gradient(
    to top,
    rgb(128 128 128) 25%,
    rgb(67 67 67 / 0%) 50%
  );
}
/* DARK FADE OVER TEXT (BOTTOM SHADOW EFFECT) */
.lh-main-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  pointer-events: none;
}
.lottie-drum {
  position: relative;
  display: inline-block;
  width: 100%;
}

.lottie-drums {
  position: relative;
  display: inline-block;
  width: 100%;
}

.lottie-drum::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/images/learning-hub/rotating-drum.png");
  background-size: 109.6%;
  background-position: 50% 51.4%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.lottie-drums::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../assets/images/learning-hub/mobile/rotating-drum.png");
  background-size: 73%;
  background-position: 87% 42%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.lottie-drums::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, black 0%, transparent 45%);
  pointer-events: none;
  z-index: 2;
}

dotlottie-wc.dw-drum-styles {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.w-40 {
  width: 40%;
}
.mobile_view {
  position: relative;
  transform: scale(1.5);
  left: -18%;
  overflow-x: hidden;
}
.inner-content {
  position: relative;
}
.upski {
  font-size: 70px;
  font-weight: 650;
  color: transparent;
  text-stroke: 1px rgba(255, 120, 0, 0.5);
  -webkit-text-stroke: 1px rgba(255, 120, 0, 0.5);
  z-index: 1;
  margin-bottom: -10px;
}
.m-block-auto {
  margin-block-start: auto;
}

.what-we-focus-on-sec {
  position: relative;
}

.what-we-focus-on-sec::before {
  content: "";
  position: absolute;
  left: 0%;
  top: -18%;
  width: 100%;
  height: 50%;
  background: url(../../assets/images/learning-hub/what-we-focus-on-sec-left-bg.png)
    no-repeat center;
  background-size: contain;
  background-position: 0% 100%;
  z-index: -9;
}

.what-we-focus-on-sec::after {
  content: "";
  position: absolute;
  right: 0%;
  left: auto;
  top: -15%;
  width: 100%;
  height: 50%;
  background: url(../../assets/images/learning-hub/what-we-focus-on-sec-right-bg.png)
    no-repeat center;
  background-size: contain;
  background-position: 100% 100%;
  z-index: -9;
}