: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;
}

.text-orange {
  color: var(--primary-color);
}

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);
}
.fsw-5 {
  font-size: 5vw;
}

.fsw-8 {
  font-size: 8vw;
}

.fsw-1 {
  font-size: 16px;
}

.mb-n20 {
  margin-bottom: -20px;
}

.h-102 {
  height: 102px;
}

.ps-6 {
  padding-left: 6rem !important;
}

.fs-8 {
  font-size: 18vw;
  line-height: 1;
}

.fs-20 {
  font-size: 15vw !important;
  line-height: 1;
}

.fw-900 {
  font-weight: 900;
}

.bg-black {
  background-color: #000;
}

.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 {
  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;
}

.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%;
}

.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%;
  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;
}

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

.talk-btn {
  transition: all 0.4s ease;
}

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

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

.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-size: 200% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  -webkit-text-fill-color: #ffffff;
  background-clip: text;
  font-weight: 400;
}

.card_border:hover h4 {
  background-position: 100% center;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.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 (→) */

.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;
}

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

.people-culture-section-bg {
  background-image: url("../images/company/people-and-culture/slide1.png");
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  overflow: hidden;
}

.bg-slide {
  position: absolute;
  inset: 0;
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  animation: smoothFade 25s infinite;
  transition: opacity 0s;
}

.bg-slide:nth-child(1) {
  background-image: url("../images/company/people-and-culture/slide1.png");
  animation-delay: 0s;
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-slide:nth-child(2) {
  background-image: url("../images/company/people-and-culture/slide2.png");
  animation-delay: 5s;
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-slide:nth-child(3) {
  background-image: url("../images/company/people-and-culture/slide3.png");
  animation-delay: 10s;
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-slide:nth-child(4) {
  background-image: url("../images/company/people-and-culture/slide4.png");
  animation-delay: 15s;
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-slide:nth-child(5) {
  background-image: url("../images/company/people-and-culture/slide5.png");
  animation-delay: 20s;
  padding: 33% 0 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.dynamic-text li {
  height: 120px;
  line-height: 120px;
}
.showcase {
  display: flex;
  align-items: center;
  justify-content: center;
}

.text-container {
  position: relative;
  height: 120px;
  overflow: hidden;
}

.dynamic-text {
  list-style: none;
  padding: 0;
  margin: 0;
  animation: slide 12s ease-in-out infinite;
}
/* Corner crosshair container */
.corner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  margin-bottom: 0;
}

.crosshair {
  position: relative;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.crosshair::before,
.crosshair::after {
  content: "";
  position: absolute;
  background: #fff;
}

.crosshair::before {
  width: 1%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.crosshair::after {
  height: 1%;
  width: 100%;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.people-culture-section-bg .container {
  position: relative;
  z-index: 5;
}

.people-culture-section-bg h1,
.people-culture-section-bg h2,
.people-culture-section-bg h6,
.people-culture-section-bg p {
  color: #fff;
}

.font-outline {
  text-align: end;
  font-weight: 650;
  color: transparent;
  text-stroke: 1px rgba(255, 120, 0, 0.5);
  -webkit-text-stroke: 1px rgba(255, 120, 0, 0.5);
}

/* keep overlays behind content */
.people-culture-section-bg::before {
  content: "";
  position: absolute;
  left: -10%;
  bottom: -60px;
  width: 120%;
  height: 260px;
  background: #070b08;
  filter: blur(90px);
  opacity: 0.95;
  z-index: 1;
}

.people-culture-section-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(7, 11, 8, 0) 25%,
    rgba(7, 11, 8, 0.15) 38%,
    rgba(7, 11, 8, 0.45) 52%,
    rgba(7, 11, 8, 0.75) 68%,
    rgba(7, 11, 8, 0.92) 82%,
    #070b08 100%
  );
  z-index: 1;
}

.h-text::before,
.h-text::after {
  background: linear-gradient(to right, transparent, #ffffff) !important;
}

.h-text::after {
  background: linear-gradient(to left, transparent, #ffffff) !important;
}

.heading-texts {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.5px;
  margin: 0 10px;
  white-space: nowrap;
}

/* Quote block */
.quote-block {
  padding: 32px 0;
}

.breakout-wrap {
  position: relative;
}

.breakout-img {
  width: calc(100% + 112px);
  max-width: none;
  /* overrides img-fluid max-width */
  height: 100%;
}

.side-img {
  height: 178px;
  object-fit: scale-down;
}

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

.people_out_img::before {
  content: "";
  position: absolute;
  background: url(../assets/images/cq-dots-bg.png) no-repeat;
  height: 100%;
  width: 100%;
  top: -44%;
  left: 50%;
  transform: translateX(-50%);
  background-position: center;
  background-size: contain;
  opacity: 0.7;
}

.aside_img::after {
  content: "";
  position: absolute;
  width: 44%;
  height: 38%;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  opacity: 0.6;
  filter: blur(232.7px);
  z-index: -1;
  right: -64%;
  top: 31%;
  transform: translateX(-50%);
}

@keyframes smoothFade {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  25% {
    opacity: 1;
  }

  33% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}
@keyframes slide {
  0% {
    transform: translateY(0);
  }

  15% {
    transform: translateY(0);
  }

  20% {
    transform: translateY(-120px);
  }

  35% {
    transform: translateY(-120px);
  }

  40% {
    transform: translateY(-240px);
  }

  55% {
    transform: translateY(-240px);
  }

  60% {
    transform: translateY(-360px);
  }

  75% {
    transform: translateY(-360px);
  }

  80% {
    transform: translateY(-480px);
  }

  95% {
    transform: translateY(-480px);
  }

  100% {
    transform: translateY(0);
  }
}

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

/* ================= Blogs ================= */

.breadcrumb-item + .breadcrumb-item::before {
  color: white !important;
}

.blogs-hero-sec-bg {
  background-image: url(../../assets/images/blogs/blogs-hero-sec-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 100% 100%;
  margin: 15px;
  margin-top: 115px;
}

.blogs-hero-sec-content {
  padding: 18% 0% 13% 0%;
}

.blogs-grad-box {
  border: 1px solid transparent;
  border-image: linear-gradient(170deg, #f18721 0.05%, #d82029 99.95%);
  border-image-slice: 1;
  padding: 50px 40px;
  position: relative;
}

/* Common SVG Plus */
.blogs-grad-box::before,
.blogs-grad-box::after,
.blogs-grad-cor-wrapper::before,
.blogs-grad-cor-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 */
.blogs-grad-box::before {
  top: -8px;
  left: -8px;
}

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

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

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

.blogs-grad-cor-wrapper {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#pills-tab .blogs-tabs {
  position: relative;
}

/* #pills-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#pills-tab .nav-item.blogs-tabs {
  position: relative;
}

#pills-tab .nav-item.blogs-tabs:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 1);
}

.nav-link.b-nav-link {
  font-size: 20px;
  font-weight: 400;
  font-family: var(--primary-font);
  padding: 8px 18px;
}

.nav-link.b-nav-link.active {
  background: #fff;
  color: var(--body-bg) !important;
  border-radius: 0px;
} */

#pills-tab {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#pills-tab .nav-item.blogs-tabs {
  position: relative;
}

/* Apply separator ONLY to items except last */
#pills-tab .nav-item.blogs-tabs:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -50%;
  top: 50%;
  transform: translate(50%, -50%);
  width: 1px;
  height: 18px;
  background: #fff;
}

.nav-link.b-nav-link {
  font-size: 20px;
  font-weight: 400;
  font-family: var(--primary-font);
  padding: 8px 18px;
}

.nav-link.b-nav-link.active {
  background: #fff;
  color: var(--body-bg) !important;
  border-radius: 0px;
}

.nav-link.b-nav-link:hover,
.nav-link.b-nav-link:focus {
  background: radial-gradient(656.3% 218% at 50% 50%, #ffffff 0%, #f18721 100%);
  color: var(--body-bg) !important;
  font-size: 20px;
  font-weight: 400;
  font-family: var(--primary-font);
  padding: 8px 18px;
  border-radius: 0px;
}

.blogs-grad-box .service-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;
  justify-content: center;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* .blogs-grad-box .service-list li {
  position: relative;
  width: 23%;
  text-align: center;
  color: #fff;
  padding: 10px 0;
  font-size: 18px;
} */

.blogs-grad-box .service-list li {
  position: relative;
  text-align: center;
  position: relative;
  padding: 10px 60px;
  color: #fff;
  white-space: nowrap;
}

/* Separator line */
.blogs-grad-box .service-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(50%, -50%); /* perfect center between items */
  width: 1px;
  height: 18px;
  background: rgba(255, 255, 255, 1);
}

/* Remove separator for last item in each row */
.blogs-grad-box .service-list li:nth-child(4n)::after {
  content: "";
  width: 0px;
}

/* Optional: remove separator for last item */
.blogs-grad-box .service-list li:last-child::after {
  content: "";
}

.blogs-cad-design-bg {
  background-image: url(../../assets/images/blogs/blogs-cad-design-bg.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 0% -8rem;
}

/* Card */
.blog-services-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
/* Top Tag */

.blog-services-cad-title-tag {
  color: var(--body-bg);
  font-weight: 600;
  background: rgb(255, 255, 255);
  padding: 6px 14px;
  display: flex;
  justify-content: start;
  contain: content;
  display: flex;
  align-items: center;
  font-size: 14px;
  width: fit-content;
}

.blog-services-title-tag {
  position: absolute;
  top: 0px;
  right: 15px;
  background: #fff;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--body-bg);
  font-weight: 600;
}

/* Bottom Content */
.blog-services-card-content {
  /* position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px; */
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.blog-services-card-content h5 {
  font-size: 22px;
  line-height: 1.4;
  margin-bottom: 15px;
}

/* Arrow */
.blog-services-card-content .arrow {
  transition: 0.4s ease;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end; /* if needed */
}
.blog-services-card-content .arrow img {
  width: 20px;
  height: 20px;
}
.blog-services-card:hover .arrow {
  transform: rotate(-45deg);
}

/* Optional gradient overlay (for better text visibility) */
.blog-services-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(7, 11, 8, 0) 0%, #070b08 83.17%);
}

/* Keep content above overlay */
.blog-services-card-content,
.blog-services-title-tag {
  z-index: 2;
}

/* Blogs Inner Pages */

.blogs-inner-page-hero-section {
  margin: 115px 15px 30px 15px;
  position: relative;
  aspect-ratio: 15 / 6;
  background-image: url(../../assets/images/blogs/cad-designs/ai-in-cad-engineers-thinking-more/ai-in-cad-engineers-thinking-more-banner.png);
  border-radius: 12px;
  overflow: hidden;
  background-size: 100%;
  background-repeat: no-repeat;
}
.blogs-inner-page-hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 8, 0) 0%, #070b08 83.17%);
  height: 75%;
  top: 25%;
}

.blogs-inner-page-hero-section-content {
  position: absolute;
  top: 60%;
  bottom: 40px;
  left: 0px;
  right: 0px;
  color: #fff;
  z-index: 2;
}

.engineering-insight-bg {
  background-image: url("../../assets/images/blogs/cad-designs/ai-in-cad-engineers-thinking-more/engineering-insight-bg.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 250px;
  display: flex;
  align-items: flex-end;
}

.eng-insight-content {
  z-index: 2;
  min-height: 250px;
  display: inline;
}

.insight-tag {
  position: absolute;
  top: 8%;
  background: #ffffff;
  /* color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  width: max-content;  */
  z-index: 3;
}

.dwe-right-bg {
  position: relative;
}

.dwe-right-bg::after {
  content: "";
  position: absolute;
  top: -45%;
  right: 0%;
  width: 100%;
  height: 100%;
  background: url(../../assets/images/blogs/cad-designs/ai-in-cad-engineers-thinking-more/dollar-shade-right.png)
    no-repeat;
  background-size: contain;
  z-index: -1;
  background-position: 100% 100%;
}

.skills-engrs {
  position: relative;
}

.skills-engrs::before {
  content: "";
  position: absolute;
  top: -25%;
  left: 0%;
  width: 20%;
  height: 100%;
  background: url(../../assets/images/blogs/cad-designs/ai-in-cad-engineers-thinking-more/dollar-shade-left.png)
    no-repeat;
  background-size: contain;
  z-index: -1;
}

/* AFTER image */
.skills-engrs::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0px;
  width: 10%;
  height: 100%;
  background: url(../../assets/images/blogs/cad-designs/ai-in-cad-engineers-thinking-more/saffron-shade.png)
    no-repeat;
  background-size: contain;
  background-position: 100% 100%;
  z-index: -1;
}

.eng_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);
}

.card_bg {
  background:
    linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(134.94deg, #f18721 0.05%, #f18721 38.95%, #d82029 99.95%);
}

.vr-line {
  border-left: 2px solid #ffffff;
  padding-left: 12px;
}

.lat-text {
  font-size: 110px;
  line-height: 120px !important;
  font-weight: 650;
  background: linear-gradient(134.94deg, #f18721 0.05%, #d82029 99.95%);
  position: relative;
  z-index: 3;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lets-talk-bg {
  background-image: url(../../assets/images/blogs/lets-talk-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: 100% 100%;
}

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

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

/* FPS Sub Service */