:root {
  --primary-font: "DM Sans", sans-serif;
  --secondary-font: "Poppins", sans-serif;
  --font-accent: "Jersey 10", sans-serif;
  --primary-color: #ff4d2e;
  --primary-glow: rgba(255, 77, 46, 0.6);
  --body-bg: rgba(7, 11, 8, 1);
  --text-light: #cccccc;
  --text-white: #ffffff;
}

html,
body {
  height: 100%;
  height: -webkit-fill-available;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  font-family: var(--primary-font);
  background-color: var(--body-bg);
  color: var(--text-white);
  font-weight: 300;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* overflow-x: hidden; */
}

h1,
h2,
h3,
h4,
h5 {
  font-family: var(--secondary-font);
  font-weight: 600;
}

h1 {
  font-size: 48px;
  font-weight: 700;
}

h2 {
  font-size: 38px;
  font-weight: 600;
}

h3 {
  font-size: 28px;
  font-weight: 500;
}

h4 {
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
}

h5 {
  font-size: 20px;
  font-weight: 500;
}

h6 {
  font-size: 16px;
  font-weight: 600;
}

p {
  line-height: 22px;
  color: var(--text-white);
}

.w-90 {
  width: 90%;
}

.align-items-ac-center {
  align-items: anchor-center;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.dropdown-toggle::after {
  display: none;
}

.down-arrow {
  position: relative;
  top: 2px;
  font-size: 14px;
}

/* ================= HEADER ================= */

.logo-box {
  overflow: hidden;
  cursor: pointer;
  transition: height 0.4s ease;
}

/* BOTH IMAGES */
.logo-full {
  width: 100%;
  display: block;
  transition:
    transform 0.4s ease,
    opacity 0.4s ease;
}

/* second logo hidden initially */
.logo-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  object-fit: contain;
}

/* container needs positioning */
.logo-box {
  position: relative;
}

.logo-box:hover .logo-full {
  /*transform: scale(0.9);*/
  opacity: 0;
}

.logo-box:hover .logo-hover {
  opacity: 1;
}

.header {
  padding: 20px 0;
  z-index: 999;
}

.header-wrapper {
  background: rgba(0, 0, 0, 0.004);
  border-width: 0.8px 0px;
  border-style: solid;
  border-color: #ffffff;
  background: rgba(0, 0, 0, 0.004);
  border-radius: 60px;
  padding: 15px 30px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

a.nav-link.active,
a.nav-link i.active {
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.navbar-expand-lg .navbar-nav .dropdown-menu.site-dropdown {
  margin-top: 20px;
  background: var(--body-bg);
  border-radius: 20px;
  border-width: 0px 0.8px;
  border-color: rgb(255 255 255 / 70%);
}

.nav-item.dropdown:active .down-arrow,
.nav-link.active .down-arrow {
  color: red;
}

/* .nav-link .down-arrow {
  display: inline-block;
  color: #fff;
  transition: transform 0.3s ease;
}

.nav-item.dropdown:hover .down-arrow {
  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;
  transform: rotate(180deg);
} */

.site-dropdown li a.dropdown-item {
  color: #fff !important;
  padding: 8px 24px;
}

.site-dropdown li a.dropdown-item:hover,
.site-dropdown li a.dropdown-item:focus,
.site-dropdown li a.dropdown-item:active {
  background-color: transparent;
}
a.nav-link:hover {
  color: #fff;
}

.site-btn,
.site-btn-outline {
  display: flex;
  align-items: center;
  height: 40px;
  border-radius: 6px;
  font-size: 14px;
  width: fit-content;
  gap: 20px;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 1);
  color: var(--body-bg);
  text-decoration: none;
  transition: 0.3s ease;
  font-weight: 600;
  background: #fff;
  font-family: var(--secondary-font);
  transition: transform 0.3s ease;
}

.site-btn img {
  display: inline-block;
  transition: transform 0.3s ease;
}

.site-btn:hover img {
  transform: rotate(-45deg) translateX(3px);
}

.site-btn:hover {
  background: radial-gradient(656.3% 218% at 50% 50%, #ffffff 0%, #f18721 100%);
}

.site-btn-outline {
  border: 1px solid rgba(255, 255, 255, 1);
  color: #fff;
  background: transparent;
  padding: 8px 24px;
}

.site-btn-outline:hover {
  background: radial-gradient(656.3% 218% at 50% 50%, #070b08 0%, #f18721 100%);
}

/* ================= NAVBAR ================= */

.main-header {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 15px 0;
  transition: 0.3s ease;
}

.logo img {
  height: 43px;
  object-fit: contain;
}

.nav-link {
  color: var(--text-white) !important;
  margin: 0 25px;
  position: relative;
  font-size: 15px;
  font-family: var(--secondary-font);
  font-weight: 500;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ul.dropdown-menu.show {
  background: rgb(0 0 0 / 1);
  border-radius: 20px;
} */

.iso-img {
  position: absolute;
  top: -118px;
  right: -0.2%;
}

.iso-img img {
  width: 85%;
}

/* ================= Heading Text ================= */

.heading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 40px;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--secondary-font);
}

.heading::before,
.heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #f18721);
  max-width: 60px;
}

.heading::after {
  background: linear-gradient(to left, transparent, #d82029);
}

.heading-text {
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  margin: 0 10px;
  white-space: nowrap;
  font-family: var(--secondary-font);
}

/* ================= Heading with left divider ================= */

.heading-with-left-divider {
  display: flex;
  align-items: center;
  justify-content: left;
  /* padding: 18px 40px; */
  width: 100%;
  box-sizing: border-box;
}

.heading-with-left-divider::before {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, #f18721);
  max-width: 60px;
  margin-left: 3%;
}

.heading-with-left-divider-text {
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  margin: 0 10px;
  white-space: nowrap;
  font-family: var(--secondary-font);
}

/* ================= White heading divider ================= */

.white-heading-divider {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

.white-heading-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0.15)
  );
  position: relative;
}

.white-heading-line.left {
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.5)
  );
}

.white-heading-line.right {
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.2) 50%,
    transparent
  );
}

.white-heading-dot {
  width: 4px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  flex-shrink: 0;
  transform: rotate(45deg);
}

.white-heading-text {
  padding: 0 28px;
  white-space: nowrap;
  flex-shrink: 0;
}

.white-heading-text span {
  color: rgba(255, 255, 255, 1);
  font-size: 16px;
  font-weight: 400;
}

.site-gradient-text-color {
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

/* ================= HERO ================= */

.gradient-text-border {
  display: inline-block;
  padding: 8px 24px;
  border-radius: 30px;
  font-size: 12px;
  color: #fff;
  position: relative;
  background: #0f1513;
}

.gradient-text-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  padding: 0.5px 1px;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-mask:
    linear-gradient(var(--body-bg) 0 0) content-box,
    linear-gradient(var(--body-bg) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.site-gradient-text {
  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;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

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

/* ---- Ellipse 39: top-left glow — ANIMATED pulse ---- */

.hero-bg,
.vec1,
.vec2,
.vec3,
.vec4 {
  will-change: transform, opacity;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 36% 63% at -4% 25%,
    rgba(241, 135, 33, 0.3) 0%,
    rgba(224, 65, 38, 0.3) 68%,
    rgba(56, 0, 3, 0.3) 100%
  );
  filter: blur(51px);
  animation: ellipsePulse 8s ease-in-out infinite alternate;
}

@-webkit-keyframes ellipsePulse {
  0% {
    opacity: 0.7;
    -webkit-transform: scale(1) translateX(0px);
    transform: scale(1) translateX(0px);
  }
  40% {
    opacity: 1;
    -webkit-transform: scale(1.08) translateX(10px);
    transform: scale(1.08) translateX(10px);
  }
  100% {
    opacity: 0.8;
    -webkit-transform: scale(0.96) translateX(-5px);
    transform: scale(0.96) translateX(-5px);
  }
}

@keyframes ellipsePulse {
  0% {
    opacity: 0.7;
    transform: scale(1) translateX(0px);
  }
  40% {
    opacity: 1;
    transform: scale(1.08) translateX(10px);
  }
  100% {
    opacity: 0.8;
    transform: scale(0.96) translateX(-5px);
  }
}

/* ---- Vector 1: red band — bottom-left — ANIMATED ---- */
.hero-section .vec1 {
  position: absolute;
  width: 54.2%;
  height: 31%;
  left: 0.9%;
  bottom: -13%;
  background: #d82029;
  opacity: 0.5;
  filter: blur(166px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: vec1Anim 10s ease-in-out infinite alternate;
}

@keyframes vec1Anim {
  0% {
    opacity: 0.35;
    transform: translateX(0px) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateX(30px) scale(1.1);
  }
  100% {
    opacity: 0.45;
    transform: translateX(-15px) scale(0.95);
  }
}

/* ---- Vector 3: orange band — bottom-center — ANIMATED ---- */
.hero-section .vec3 {
  position: absolute;
  width: 54.2%;
  height: 31%;
  left: 22.9%;
  bottom: -25%;
  background: #f18721;
  opacity: 0.5;
  filter: blur(166px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: vec3Anim 12s ease-in-out infinite alternate;
}

@keyframes vec3Anim {
  0% {
    opacity: 0.4;
    transform: translateY(0px) scaleX(1);
  }
  45% {
    opacity: 0.65;
    transform: translateY(-20px) scaleX(1.12);
  }
  100% {
    opacity: 0.45;
    transform: translateY(10px) scaleX(0.92);
  }
}

/* ---- Vector 2: orange band — bottom-right — ANIMATED ---- */
.hero-section .vec2 {
  position: absolute;
  width: 47.6%;
  height: 18.8%;
  left: 50.8%;
  bottom: -12%;
  background: #f18721;
  opacity: 0.5;
  filter: blur(166px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: vec2Anim 9s ease-in-out infinite alternate;
}

@keyframes vec2Anim {
  0% {
    opacity: 0.35;
    transform: scaleX(-1) translateX(0px);
  }
  50% {
    opacity: 0.58;
    transform: scaleX(-1) translateX(-25px);
  }
  100% {
    opacity: 0.42;
    transform: scaleX(-1) translateX(12px);
  }
}

/* ---- Vector 4: red band — far-right — ANIMATED ---- */
.hero-section .vec4 {
  position: absolute;
  width: 47.6%;
  height: 18.8%;
  left: 79.5%;
  bottom: -5%;
  background: #d82029;
  opacity: 0.5;
  filter: blur(166px);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  transform: scaleX(-1);
  animation: vec4Anim 11s ease-in-out infinite alternate;
}

@keyframes vec4Anim {
  0% {
    opacity: 0.38;
    transform: scaleX(-1) translateX(0px);
  }
  50% {
    opacity: 0.55;
    transform: scaleX(-1) translateX(20px);
  }
  100% {
    opacity: 0.42;
    transform: scaleX(-1) translateX(-10px);
  }
}

/* ---- Keep content above all bg layers ---- */
.hero-section .container {
  position: relative;
  z-index: 2;
}

/* ---- ::before used for left-edge warm strip (subtle, matches Figma left bleed) ---- */
.hero-section::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 60%;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(241, 135, 33, 0.15) 0%,
    transparent 100%
  );
  filter: blur(30px);
  pointer-events: none;
}

/* ---- ::after = bottom border glow line ---- */
.hero-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /* height: 4px; */
  z-index: 3;
  background: linear-gradient(
    90deg,
    #d82029 0%,
    #f18721 40%,
    #f18721 60%,
    #d82029 100%
  );
  filter: blur(3px);
  opacity: 0.8;
  pointer-events: none;
  animation: borderGlow 6s ease-in-out infinite alternate;
}

@keyframes borderGlow {
  0% {
    opacity: 0.5;
    filter: blur(3px);
  }
  50% {
    opacity: 1;
    filter: blur(6px);
  }
  100% {
    opacity: 0.65;
    filter: blur(4px);
  }
}

.hero-section h1 {
  font-size: 50px;
  font-family: var(--secondary-font);
}

.hero-section h1 span {
  color: var(--primary-color);
  font-family: var(--secondary-font);
}

.hero-section p {
  font-family: var(--primary-font);
  font-weight: 400;
  text-align: center;
}

.title {
  font-size: 40px;
  font-weight: 500;
  margin-bottom: 0px;
}

.hero-buttons {
  display: flex;
  justify-content: center;
}

.cta-box {
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 30px 40px;
  position: relative;
}

/* Common SVG Plus */
.cta-box::before,
.cta-box::after,
.corner-wrapper::before,
.corner-wrapper::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background-image: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
    <path d='M10 2 V18 M2 10 H18' stroke='white' stroke-width='1' stroke-linecap='round'/>\
    </svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Top Left */
.cta-box::before {
  top: -8px;
  left: -8px;
}

/* Top Right */
.cta-box::after {
  top: -8px;
  right: -8px;
}

/* Bottom Left */
.corner-wrapper::before {
  bottom: -8px;
  left: -8px;
}

/* Bottom Right */
.corner-wrapper::after {
  bottom: -8px;
  right: -8px;
}

.corner-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.home-about-section {
  font-size: 14px;
  justify-content: center;
  align-items: center;
  font-family: var(--secondary-font);
}

.home-about-section .years-count,
.home-about-section .projects-count {
  font-weight: 600;
}

.home-about-sec-profile-group {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;
}

.home-about-sec-stars {
  padding-top: 4px;
}

.clients-sat-rating {
  font-size: 16px;
  font-weight: 500;
}

.home-about-sec-profile-group img {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -12px;
}

.home-about-sec-profile-group img:first-child {
  margin-left: 0;
}

.home-about-sec-stars img {
  width: 17px;
  height: 17px;
}

.who-we-are-bg-img {
  background: url("../../assets/images/home/who-we-are-bg-img.png") no-repeat
    center;
  background-size: cover;
  overflow-x: hidden;
}

.thred-cad-design-img-bg-shade {
  position: relative;
}

.thred-cad-design-img-bg-shade::after {
  /* content: "";
  position: absolute;
  right: -39%;
  bottom: -10%;
  width: 100%;
  height: 100%;
  background: url("../../assets/images/home/3d-cad-design-bg-shade.png")
    no-repeat center;
  background-size: cover;
  z-index: 999; */
  content: "";
  position: absolute;
  width: 100%;
  height: 69%;
  right: -50%;
  bottom: -20%;
  background: #f18721;
  opacity: 0.2;
  border: 1px solid var(--body-bg);
  filter: blur(120px);
  z-index: -9;
}

/* ================= STATS ================= */

.stats-section {
  overflow-x: hidden;
}

.stat-number {
  font-family: var(--secondary-font);
  position: relative;
  font-size: 8vw;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* text-shadow: 0 8px 20px rgba(255, 102, 0, 0.3); */
}
.stat-number::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 60px;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 8, 0) 0%,
    rgb(7 11 8 / 100%) 80%
  );
}
.stat-label {
  font-size: 15px;
}

/* ================ what we do ================= */

#explore-services,
#application-form {
  scroll-margin-top: 100px;
}

.wwd-card-grid-img {
  position: relative;
  background-image: url("../../assets/images/home/what-we-do-watermark-img.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  background-position: 10% 250%;
}

/* Bottom dark shade */
.wwd-card-grid-img::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -9;
  background: linear-gradient(
    to top,
    rgb(7 11 8 / 68%) 0%,
    /* bottom dark */ rgb(7 11 8 / 68%) 40%,
    /* medium */ rgb(7 11 8 / 68%) 80% /* transparent top */
  );
  /* background: linear-gradient(
    to top,
    rgb(0 0 0 / 35%) 0%,
     rgba(0, 0, 0, 0.3) 40%,
     rgba(0, 0, 0, 0) 80%
  ); */
}

/* keep content above overlay */
.wwd-card-grid-img > * {
  position: relative;
  z-index: 2;
}

.opt-2 {
  position: relative;
  opacity: 0.06;
  pointer-events: none;
  overflow: hidden;
  background: #070b08;
}

/* dark shade for opt-2 */
.opt-2::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;

  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0) 80%
  );
}

/* keep inner content above */
.opt-2 > * {
  position: relative;
  z-index: 2;
}

.what-we-do-corner-bg-img {
  position: relative;
}

.what-we-do-corner-bg-img::before {
  content: "";
  position: absolute;
  left: -5%;
  top: -3%;
  width: 41%;
  height: 24%;
  background: url(../../assets/images/home/what-we-do-corner-bg-img.png)
    no-repeat;
  background-size: 70%;
  z-index: -1;
}

.what-we-do-sec-bg-img {
  background:
    url(../../assets/images/home/what-we-do-sec-bg-img.png) no-repeat,
    center;
  background-size: cover;
  background-position: -40% 10%;
}

.card.card_border {
  background-color: #010101;
  border-radius: 0%;
  text-align: left;
  position: relative;
  height: auto;
  font-size: 14px;
}

.card_border {
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card_border:hover {
  border: 1px solid transparent;
  -webkit-border-image: linear-gradient(
      134.94deg,
      rgba(241, 135, 33, 0.9) 0.05%,
      rgba(216, 32, 41, 0.9) 99.95%
    )
    1;

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

.step_card_border {
  border: 1px solid transparent;
  -webkit-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: 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-color: var(--body-bg);
}

.img_container img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  /* transition:
    filter 0.4s ease,
    transform 0.4s ease; */
}

.card_border:hover .img_container img {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.card_border .arrow_icon,
.wwd-card .arrow_icon {
  width: 20px;
  opacity: 0.5;
  -webkit-transition:
    transform 0.4s ease,
    filter 0.4s ease,
    opacity 0.3s ease;
  transition:
    transform 0.4s ease,
    filter 0.4s ease,
    opacity 0.3s ease;
  position: absolute;
  bottom: 15px;
  right: 15px;
}

.card_border:hover .arrow_icon,
.wwd-card:hover .arrow_icon,
.card_border:focus .arrow_icon,
.wwd-card:focus .arrow_icon {
  -webkit-filter: brightness(0) invert(1);
  filter: brightness(0) invert(1);

  -webkit-transform: rotate(-35deg) translateY(-4px);
  transform: rotate(-35deg) translateY(-4px);
  opacity: 1;
}

.card_border h4 {
  background: linear-gradient(90deg, #ffffff 40.97%, #d82029 125.35%);
  /* background:
    linear-gradient(0deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
    linear-gradient(90deg, #ffffff -7.03%, #d82029 107.35%); */
  background-size: 200% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  background-clip: text;
  font-weight: 400;
  /* transition:
    background-position 0.6s ease,
    -webkit-text-fill-color 0.3s ease; */
}

.card_border:hover h4 {
  background-position: 100% center;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* transition-delay: 0.15s; */
}

.card.card_border .description {
  padding-top: 15px;
  padding-bottom: 40px;
}

/* ================ core Engineering Services ================= */

.ces-text {
  color: #ffffff;
  opacity: 0.25;
  font-family: var(--secondary-font);
  font-weight: 700;
  font-size: clamp(32px, 8vw, 6.7vw);
  line-height: 1.1;
  white-space: nowrap;
  text-align: center;
  position: relative;
  text-transform: uppercase;
}

.ces-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 57px;
  background: linear-gradient(180deg, rgba(7, 11, 8, 0) 1%, #070b08 60%);
}

/* ================ How we work ================= */

.how-we-work-section-bg {
  position: relative;
  overflow: hidden;
}

.how-we-work-section-bg::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 20%;
  width: 60%;
  height: 85%;
  background: url(../../assets/images/home/how-we-work-bg-img.png) no-repeat
    center;
  background-size: cover;
  z-index: -1;
}

.how-we-work-section .badge {
  font-size: 14px;
  font-family: var(--secondary-font);
  font-weight: 500;
  color: var(--body-bg);
  background-color: #fff;
  border-radius: 0px;
  margin: 20px 20px 0px 20px;
  padding: 8px 13px;
}

/* ================ Qe Section ================= */

.qe-section {
  position: relative;
  overflow: hidden;
}

/* BEFORE image */
.qe-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 6%;
  width: 40%;
  height: 100%;
  background: url("../../assets/images/home/qe-section-shade-img1.png")
    no-repeat;
  background-size: contain;
  z-index: -1;
}

/* AFTER image */
.qe-section::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 6%;
  width: 40%;
  height: 100%;
  background: url("../../assets/images/home/qe-section-shade-img2.png")
    no-repeat;
  background-size: contain;
  z-index: -1;
}

.striped-text {
  font-size: 105px;
  line-height: 120px;
  font-weight: 900;
  letter-spacing: -3px;
  background:
    repeating-linear-gradient(
      4deg,
      rgba(0, 0, 0, 0.85) 4px,
      rgba(0, 0, 0, 0.85) 8px,
      transparent 4px,
      transparent 20px
    ),
    linear-gradient(90deg, #ff7a00, #ff3d00);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: transparent;
  text-rendering: optimizeLegibility;
}

/* ================= Marquee Carousel ================= */

.marquee-section {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.marquee-section .row1,
.marquee-section .row2 {
  padding: 15px 0px;
}

/* LEFT fade overlay */
.marquee-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 100%;
  background: linear-gradient(to right, #0a0a0a 80%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* RIGHT fade overlay */
.marquee-section::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 100%;
  background: linear-gradient(to left, #0a0a0a 80%, transparent 100%);
  z-index: 10;
  pointer-events: none;
}

/* ── SCROLLING TRACK ── */
.marquee-track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;

  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  gap: 40px;
  align-items: center;
}

/* Row 1: scroll left (→) */

/* .marquee-track {
  animation: scrollLeft 15s linear infinite;
} */

.row1 .marquee-track {
  animation: scrollLeft 40s linear infinite;
}

/* Row 2: scroll right (←) */
.row2 .marquee-track {
  animation: scrollRight 40s linear infinite;
}

.marquee-section .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 7px 22px;
  white-space: nowrap;
  font-family: var(--font-accent);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: transparent;
  flex-shrink: 0;
  user-select: none;
  font-size: 30px;
}

.marquee-section .row1 .tag {
  font-size: 30px;
  width: 150px;
}

.marquee-section .row2 .tag {
  font-size: 30px;
  width: 200px;
}

/* 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;
  /* max-width: 1600px; */
  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;
  /* background-color: var(--body-bg); */
}

/* ---- ::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;
  /* bottom: 15px; */
}
.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;
  /* inset: auto; */
  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;

  /* MAIN BACKGROUND */
  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;
} */

/* ================= Services Page  ================= */

.cad-what-we-do-sec-bg {
  background-image: url(../../assets/images/services/cad-services/cad-what-we-do-sec-bg.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: left 130% top 60%;
}

.wwd-card-block {
  position: relative;
  top: 30%;
}

.wwd-card {
  background-color: #000;
  border-radius: 0%;
  text-align: left;
  font-size: 14px;
  border: 0.5px solid rgba(255, 255, 255, 0.15);
  transition: all 0.5s ease;
  overflow: hidden;
  /* transition:
    border-image 0.3s ease,
    border-color 0.3s ease; */
}

.wwd-card img {
  filter: blur(1px);
}

.wwd-card:hover img {
  filter: blur(0px);
}

.wwd-card:hover {
  border: 1px solid transparent;
  border-image: linear-gradient(
    134.94deg,
    rgb(241 135 33 / 50%) 0.05%,
    rgb(216 32 41 / 50%) 99.95%
  );
  border-image-slice: 1;
  /* transition-delay: 0.5s; */
}

.wwd-card h4 {
  background: linear-gradient(90deg, #ffffff -7.03%, #d82029 107.35%);
  background-size: 200% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  background-clip: text;
  /* transition:
    background-position 0.6s ease,
    -webkit-text-fill-color 0.3s ease; */
}

.wwd-card:hover h4 {
  background: linear-gradient(90deg, #ffffff -7.03%, #d82029 107.35%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  background-position: 100% center;
  transition-delay: 0.15s;
}

.services-hero-section {
  margin-left: 1.1%;
  margin-right: 1.1%;
  position: relative;
  margin-top: 0;
  padding: 15% 0 0%;
  border-radius: 0px 0px 25px 25px;
  overflow: hidden;
  background: #000000;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* ---- Keep content above all bg layers ---- */
.services-hero-section .container {
  position: relative;
  z-index: 2;
}

/* ---- ::before used for left-edge warm strip (subtle, matches Figma left bleed) ---- */
.services-hero-section::before {
  content: "";
  position: absolute;
  left: 0px;
  top: 3%;
  width: 60%;
  height: 60%;
  background-image: url(../../assets/images/services/hero-sec-left-corner-image.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100% 100%;
}

/* ---- ::after = bottom border glow line ---- */
.services-hero-section::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 0%;
  width: 70%;
  height: 75%;
  background-image: url(../../assets/images/services/hero-sec-right-corner-image.png);
  background-repeat: no-repeat;
  background-position: left;
  background-size: 100% 100%;
}

.services-hero-section h1 {
  font-family: var(--secondary-font);
}

.services-hero-section h1 span {
  color: var(--primary-color);
  font-family: var(--secondary-font);
}

.services-hero-section p {
  font-family: var(--primary-font);
  font-weight: 400;
  text-align: center;
}

.circle-gradient-bg {
  background-image: url("../../assets/images/services/circle-gradient-bg.png"); /* change path if needed */
  background-size: contain;
  background-position: left 10% top -10%;
  background-repeat: no-repeat;
}

.cad-text-wrapper {
  position: relative;
  height: 100%;
}

/* CAD text */
.cad-text {
  font-size: 110px;
  color: var(--body-bg);
  text-transform: capitalize;
  background: linear-gradient(360deg, #f18721 12.14%, #d82029 99.95%);
  /* background-size: 200% 200%; */
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px transparent;
  writing-mode: vertical-rl; /* fallback */
  writing-mode: sideways-lr;
  position: absolute;
  bottom: 1%;
  margin: auto 5%;
}

/* Our Approach Section */

.banner-svg {
  width: 100%;
  display: block;
}

/* Text inside foreignObject */
.svg-text {
  font-size: 16px;
  font-weight: 400;
  color: white;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: 0.01em;
}

/* ── Mobile fallback ── */
.mobile-layout {
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 20px;
}

.mobile-icon {
  width: 64px;
  height: 64px;
}

.mobile-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  width: 100%;
  max-width: 560px;
}

.mobile-text-item {
  font-family: "DM Sans", sans-serif;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.45;
  text-align: center;
}

@media (max-width: 600px) {
  .banner-svg {
    display: none;
  }

  .mobile-layout {
    display: flex;
  }
}

/* Full-width container — SVG fills it and scales naturally */
.industries-root {
  width: 100%;
  max-width: 1920px;
  padding: 0;
}

#industries-svg {
  width: 100%;
  height: auto;
  max-height: 100vh;
  display: block;
  overflow: visible;
}

/* foreignObject inner node layout */
.node-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.node-icon {
  width: 39px;
  height: 39px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 10px;
}

.node-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.node-icon.sm {
  width: 34px;
  height: 34px;
  margin-bottom: 15px;
}

.node-label {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  color: #ffffff;
  font-variation-settings: "opsz" 14;
  white-space: nowrap;
}

#text_ind {
  font-size: clamp(60px, 17vw, 182px);
  opacity: 0.15;
  user-select: none;
}

.our-approch-block-style {
  /* margin-top: -4%; */
}

.our-approach_main img {
  border: 1px solid green;
}
.ref-1 {
  position: absolute;
  left: -6px;
  bottom: -6px;
  z-index: -1;
}
.ref-2 {
  position: absolute;
  left: -6px;
  bottom: -6px;
  z-index: -1;
}
.ref-3 {
  position: absolute;
  left: 10px;
  bottom: -6px;
  z-index: -1;
  width: 92% !important;
}
.ref-4 {
  position: absolute;
  left: 6px;
  bottom: -6px;
  z-index: -1;
}
.ref-5 {
  position: absolute;
  left: 6px;
  bottom: -6px;
  z-index: -1;
}

.our-approach-btn {
  display: flex;
  justify-content: center;
  margin-top: -2%;
  pointer-events: auto;
  z-index: 1;
}

.our-approach_main {
  position: relative;
  z-index: 1;
}

/* Left image shadow */
.our-approach_main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(270deg, rgba(7, 11, 8, 0) 0%, #070b08 100%);
  background-size: contain;
  z-index: 9999;
}

/* Right image shadow */
.our-approach_main::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0px;
  width: 40%;
  height: 100%;
  background: linear-gradient(270deg, rgba(7, 11, 8, 0) 0%, #070b08 100%);
  transform: matrix(-1, 0, 0, 1, 0, 0);
  background-size: contain;
  z-index: 9999;
}

.services-stat-number {
  font-family: var(--secondary-font);
  position: relative;
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* text-shadow: 0 8px 20px rgba(255, 102, 0, 0.3); */
}
.services-stat-number::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 60px;
  background: linear-gradient(
    180deg,
    rgba(7, 11, 8, 0) 38%,
    rgb(7 11 8 / 74%) 100%
  );
}

/* Common Question */

.cq-section {
  padding: 80px 0;
  color: #fff;
}

/* Triangle Section */

.experience-card {
  position: relative;
  padding: 45px 40px;
}

/* Gradient Number */
.exp-number {
  font-size: 52px;
  font-weight: 700;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Subtitle */
.exp-badge-wrapper {
  padding: 1.4px;
  border-radius: 14px;
  background: linear-gradient(
    136deg,
    rgba(180, 180, 180, 0.55) 15%,
    rgba(100, 100, 100, 0.15) 33%,
    rgba(50, 50, -7, 0.08) 75%,
    rgba(130, 130, 130, 0.55) 97%
  );
  background-color: transparent;
  width: fit-content;
  position: absolute;
  left: 5.5%;
}

.exp-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 25px 8px;
  border-radius: 12px;
  background: var(--body-bg);
  gap: 1px;
  position: relative;
  overflow: hidden;
}

.exp-badge .years {
  font-family: var(--secondary-font);
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-size: 24px;
  font-weight: 500;
}

.exp-badge .label {
  color: #fff;
}

.triangle-wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.canvas-scaler {
  width: 100%;
  max-width: 1650px;
  overflow: hidden;
}

.canvas {
  position: relative;
  width: 1650px;
  height: 620px;
  transform-origin: top left;
}

/* All children are absolutely positioned matching the original px values */
.canvas > * {
  position: absolute;
}

/* ── Masked background glow blobs ── */
.masked-blob {
  position: absolute;
  pointer-events: none;
}

/* ── Big outer triangle (gradient stroke) ── */
.big-triangle {
  left: 519px;
  top: 0;
  width: 612px;
  height: 526px;
}

/* ── Connector lines ── */
.line-top-right {
  left: 901.5px;
  top: 53px;
  width: 321.5px;
  height: 93.5px;
}
.line-mid-right {
  left: 1055px;
  top: 372px;
  width: 227.5px;
  height: 41.5px;
}
.line-left {
  left: 420px;
  top: 207.5px;
  width: 173.5px;
  height: 205.5px;
}

/* ── Small inner triangles ── */
.tri-top {
  left: 678px;
  top: 12px;
  width: 293px;
  height: 254px;
}
.tri-bottom-left {
  left: 532px;
  top: 265px;
  width: 293px;
  height: 254px;
}
.tri-bottom-right {
  left: 824px;
  top: 265px;
  width: 293px;
  height: 254px;
}

#tri-top,
#tri-bl,
#tri-br {
  stroke: rgba(220, 220, 220, 0.75);
  stroke-width: 0.5;
}

#tri-top:hover,
#tri-bl:hover,
#tri-br:hover {
  stroke: rgba(220, 220, 220, 0.75);
  stroke-width: 0.7;
  fill: rgba(200, 200, 200, 0.1);
}

/* ── Text labels inside triangles ── */
.tri-label {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  line-height: normal;
  transform: translateX(-50%);
  pointer-events: none;
}
.label-top {
  left: calc(50% + 0px);
  top: 200px;
}
.label-bl {
  left: 677.86px;
  top: 444px;
}
.label-br {
  left: 971.36px;
  top: 444px;
}

/* ── Centre logo ── */
.triangle-sec-logo {
  top: 46.17%;
  right: 44.74%;
  bottom: 37.68%;
  left: 48.12%;
  transform: translateX(-28px);
}

/* ── Description texts ── */

.desc {
  font-weight: 400;
  font-size: 18px;
  color: #fff;
  line-height: normal;
}
.desc-top-right {
  left: calc(50% + 445px);
  top: 12px;
  width: 353px;
}
.desc-left {
  left: calc(50% - 445px);
  top: 173px;
  width: 353px;
  text-align: right;
  transform: translateX(-100%);
}
.desc-bottom-right {
  left: calc(50% + 494px);
  top: 337px;
  width: 353px;
}

/* ── Responsive scaling ── */
/* We scale the 1650px canvas down to fit the viewport */
@media (max-width: 1650px) {
  .canvas-scaler {
    overflow: visible;
  }
}

/* ── Hover image: hidden by default, shown on active ── */
.hover-img {
  width: 100%; /* fill the full desc panel width */
  max-width: 100%;
  display: block;
  margin-top: 10px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition:
    opacity 0.35s ease,
    max-height 0.35s ease,
    margin-top 0.35s ease;
  border-radius: 4px;
}

.desc.active .hover-img {
  opacity: 1;
  max-height: 400px; /* large enough to show full image naturally */
  margin-top: 10px;
}

.desc.active .hover-img {
  display: block;
  opacity: 1;
}

/* Accordion box */
.custom-accordion .accordion-item {
  background: transparent;
  border: 0.1px solid rgb(255 255 255 / 0.2);
  margin-bottom: 20px;
  border-radius: 0px;
}

/* Question */
.custom-accordion .accordion-button {
  background: transparent;
  color: rgb(255 255 255 / 60%);
  font-size: 16px;
  font-weight: 500;
  padding: 15px 25px;
  box-shadow: none;
}

.accordion-item:first-of-type .accordion-button {
  border: 0.1px solid rgb(255 255 255 / 0.05%);
  border-radius: 0px;
}

button.accordion-button.collapsed {
  border: 0.1px solid rgb(255 255 255 / 0.1%);
}

.accordion-header .accordion-button {
  border: 0.1px solid rgba(0, 0, 0, 0.1);
}

.custom-accordion .accordion-item:hover {
  border: 0.1px solid rgba(255, 255, 255, 0.4);
}

.custom-accordion .accordion-item:hover .accordion-button {
  color: #fff;
}

.custom-accordion .accordion-item:has(.accordion-collapse.show) {
  border: 0.1px solid rgb(255 255 255 / 60%);
}

/* Open question */
.custom-accordion .accordion-button:not(.collapsed) {
  color: #ffffff;
}

/* Answer */
.custom-accordion .accordion-body {
  color: #fff;
  font-size: 16px;
  padding: 15px 25px;
  border-top: 0.3px solid rgb(255 255 255 / 50%);
}

/* Remove bootstrap blue */
.accordion-button:focus {
  box-shadow: none;
  border: none;
}

.custom-accordion .accordion-button:not(.collapsed)::after {
  border-image-source: linear-gradient(
    134.94deg,
    #d82029 0.05%,
    #f18721 99.95%
  );
}

/* Arrow icon style */
.accordion-button::after {
  margin-left: auto;
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid;
  border-right: 2px solid;
  border-image-source: rgb(255 255 255 / 50%);
  border-image-slice: 1;
  transform: rotate(135deg);
}

/* Rotate arrow when open */
.custom-accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(315deg);
}

/* Fall Protecttion System */

.horizontal-ser-brand-name-text {
  font-size: 110px;
  line-height: 85px;
  color: var(--body-bg);
  text-transform: uppercase;
  background: linear-gradient(90deg, #f18721 12.14%, #d82029 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px transparent;
  margin-bottom: -10px !important;
}

/* ================= Talk to our Experts ================= */

.corners-plus-icon {
  position: relative;
}

/* plus icon base */
.corner-plus {
  position: absolute;
  width: 15px;
  height: 15px;
}

/* SVG background */
.corner-plus::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: url("data:image/svg+xml;utf8,\
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'>\
    <path d='M10 2 V18 M2 10 H18' stroke='white' stroke-width='1' stroke-linecap='round'/>\
    </svg>");
  background-size: contain;
  background-repeat: no-repeat;
}

/* positions */
.plus-top-left {
  top: -10%;
  left: -2%;
}

.plus-top-right {
  top: -10%;
  right: -2%;
}

.plus-bottom-left {
  bottom: -10%;
  left: -2%;
}

.plus-bottom-right {
  bottom: -10%;
  right: -2%;
}

.talk-to-our-experts-bg {
  background:
    linear-gradient(90deg, #070b08 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(134.94deg, #f18721 0.05%, #f18721 38.95%, #d82029 99.95%);
  padding: 30px 40px 30px 40px;
}

/* ================= Contact ================= */

.get-in-touch-bg {
  position: relative;
}
.get-in-touch-bg::before {
  content: "";
  position: absolute;
  top: -20%;
  width: 100%;
  height: 60%;
  background: url(../../assets/images/contact/get-in-touch-bg.png) no-repeat;
  background-size: contain;
}
.get-in-touch-bg::after {
  content: "";
  position: absolute;
  top: 42%;
  right: -60%;
  width: 100%;
  height: 75%;
  background: url(../../assets/images/contact/get-in-touch-dots-bg.png)
    no-repeat;
  background-size: contain;
  z-index: -9;
}
.get-in-touch-block {
  position: sticky;
  top: 20%;
}
.lets-connect-block {
  background:
    url("../../assets/images/contact/prefer-email-left-bg.png") left center
      no-repeat,
    url("../../assets/images/contact/prefer-email-right-bg.png") right center
      no-repeat;
  background-size: 26%, 26%;
}
.prefer-email-bg {
  background-color: #070b08;
  border: 0.5px solid;
  border-image-source: linear-gradient(
    134.94deg,
    rgb(241 135 33 / 50%) 0.05%,
    rgb(216 32 41 / 50%) 99.95%
  );
  border-image-slice: 1;
  padding: 50px 45px;
}
.prefer-email-text {
  font-size: 16px;
}

.lets-connect-text {
  transform: translate(-50%, -50%) !important;
  left: 50% !important;
  position: absolute !important;
  top: 17%;
}

.lets-connect-text h1 {
  white-space: nowrap;
  font-size: clamp(28px, 8vw, 120px);
  position: relative;
  line-height: 120px;
  background: linear-gradient(90deg, #f18721 12.14%, #f18721 99.95%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-stroke: 2px transparent;
  margin-bottom: -8px !important;
  text-transform: capitalize;
  color: var(--body-bg);
  text-align: center;
}

.lets-connect-text h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 110px;
  background: linear-gradient(180deg, rgba(7, 11, 8, 0) 0%, #070b08 95%);
}
.contact-hero-section {
  position: relative;
  background: #070b08;
  margin-top: 0;
  padding: 15% 0 3%;
  border-radius: 0px 0px 25px 25px;
  overflow: hidden;
}

.contact-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../../assets/images/contact/hero-bg.png"); /* change path if needed */
  background-size: cover;
}

.contact-hero-container {
  position: relative;
  background-image: url("../../assets/images/contact/heading-bg.png");
  background-repeat: no-repeat;
  background-position: 50% -3rem;
  background-size: cover;
}

.contact-form-block {
  position: relative;
  border-radius: 25px;
  background: linear-gradient(
    144.15deg,
    #101010 0.48%,
    rgba(16, 16, 16, 0) 48.81%
  );
  z-index: 1;
  padding: 55px 65px 35px;
}

.contact-form-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 25px;
  padding: 0.5px; /* 🔥 reduce thickness here */
  background: linear-gradient(
    294.23deg,
    rgb(255 255 255 / 60%) 0.82%,
    rgba(255, 255, 255, 0) 82.22%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(rgb(255 255 255 / 100%) 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;

  z-index: -1;
}

.contact-form-block .form-control {
  background-color: transparent;
  border-radius: 0px;
  padding: 8px 24px;
  color: #fff !important;
  border: 0.5px solid rgb(255 255 255 / 50%) !important;
  font-weight: 300;
  background-color: var(--body-bg);
}

.contact-form-block .form-control:focus {
  border-color: #fff;
  outline: 0;
  box-shadow: none;
}

.contact-form-block input::-webkit-input-placeholder {
  color: #fff;
  opacity: 0.4;
  font-size: 16px;
}
.contact-form-block input:-ms-input-placeholder {
  color: #fff;
  opacity: 0.4;
  font-size: 16px;
}
.contact-form-block input::placeholder {
  color: #fff;
  opacity: 0.4;
  font-size: 16px;
}

.contact-form-block textarea::-webkit-input-placeholder {
  color: #fff;
  opacity: 0.4;
  font-size: 16px;
}
.contact-form-block textarea:-ms-input-placeholder {
  color: #fff;
  opacity: 0.4;
  font-size: 16px;
}
.contact-form-block textarea::placeholder {
  color: #fff;
  opacity: 0.4;
  font-size: 16px;
}
.file-upload-box {
  color: #fff !important;
  border: 0.5px solid rgb(255 255 255 / 50%) !important;
  padding: 25px 20px;
  background-color: rgba(255, 255, 255, 0.02);
  transition: 0.3s ease;
  cursor: pointer;
  font-size: 14px;
  background-color: var(--body-bg);
}
.file-upload-box:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.05);
}

.upload-label {
  cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
}

.upload-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.5);
}

.contact-form-block .form-label {
  margin-bottom: 12px;
}

/* Wrapper */
.custom-select-wrapper {
  position: relative;
}

/* Select Styling */
.custom-select {
  background-color: #0b0f0d;
  color: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  padding: 12px 40px 12px 16px;
  appearance: none; /* remove default arrow */
}

/* Focus */
.custom-select:focus {
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: none;
  color: #fff;
}

/* Dropdown options (limited styling) */
.custom-select option {
  color: var(--text-white); /* browser default dropdown */
}

.file-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #111;
  border: 1px solid #444;
  padding: 6px 10px;
  border-radius: 20px;
  color: #fff;
  font-size: 13px;
  max-width: 100%;
}

.file-chip span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 150px;
}

.file-remove {
  cursor: pointer;
  color: #ff4d4d;
  font-weight: bold;
}

.get-in-touch-bg {
  overflow-x: clip;
}

/* mobile proto */
.flex-lg-row {
  flex-direction: row;
}

.office-adress {
  font-size: 16px;
}

.cq-dots-bg {
  position: relative;
}

.cq-dots-bg::before {
  content: "";
  position: absolute;
  left: 0%;
  top: -14%;
  transform: translateY(-50%);
  width: 100%;
  height: 100%;
  background: url(../../assets/images/cq-dots-bg.png);
  background-repeat: no-repeat;
  opacity: 1;
  z-index: -1;
}

/* ================= 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;
}

/* ================= FOOTER ================= */

.footer {
  background: var(--body-bg);
  font-size: 14px;
  position: relative;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 40px;
  font-size: 14px;
  font-family: var(--secondary-font);
}

.footer-nav a {
  color: #fff;
  text-decoration: none;
}

.footer-nav span {
  opacity: 1;
  font-size: 4px;
}

.footer-brand-text {
  font-size: 280px;
  font-weight: 800;
  letter-spacing: 10px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
  line-height: 1;
  z-index: -1;
  font-family: var(--secondary-font);
  text-align: center;
  line-height: 280px;
  margin-top: 30px;
}

.footer-contact {
  position: absolute;
  bottom: 10%;
}

.footer-contact p {
  margin: 5px 0;
}

/* SOCIAL */
.footer-social {
  position: absolute;
  bottom: 10%;
}

.footer-social a,
.footer-contact p a {
  color: #fff;
  opacity: 0.5;
}

.footer-social a:hover,
.footer-contact p a:hover {
  color: #fff;
  opacity: 1;
}

.footer-social p {
  color: #fff;
  opacity: 0.5;
  margin-bottom: 15px;
}

.footer-social i {
  font-size: 20px;
  cursor: pointer;
}

/* COPYRIGHT */

.footer-copy {
  text-align: center;
  font-size: 12px;
  color: #fff;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* TAS Branding Animation */

/* Only the sharp accent line animates */
@keyframes beam-sweep {
  0% {
    transform: translateX(-1100px) translateZ(0);
  }
  100% {
    transform: translateX(1100px) translateZ(0);
  }
}

#b5 {
  will-change: transform;
  animation: beam-sweep 20s linear infinite;
}

/* Keyframes */

@-webkit-keyframes scrollLeft {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

@-webkit-keyframes scrollRight {
  0% {
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

.opacity-40 {
  opacity: 0.4 !important;
}
.opacity-60 {
  opacity: 0.6 !important;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 992px) {
  .hero-section h1 {
    font-size: 40px;
  }
  .highlight-section h1 {
    font-size: 50px;
  }
  .stat-number {
    font-size: 70px !important;
  }
  .services-stat-number {
    font-size: 70px !important;
  }
  .footer-brand-text {
    font-size: 100px;
  }
}

.talk-to-our-experts-bg::before {
  background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
}