* {
  box-sizing: border-box;
  /* background-color: #4048D1; */
  /* font color */
  color: rgba(255, 255, 255, 1);
  font-family: "Afacad", sans-serif;
  font-size: 1.1vw;

  /* width: 100%; */
  /* border for dev */
  --b1: solid red 10px;
  --b2: orange solid 5px;
  --b3: yellow solid 5px;
  --b4: #262138;
  --pc1: #8df9c3;
  --pc2: #F9AC8D;
  --pc3: #8df9c3;
  --pc4: #4A4363;
  /* scale: 0.9; */
}

/* Remove blue focus outline from all interactive elements */
*:focus {
  outline: none !important;
  box-shadow: none !important;
}

a:focus,
button:focus,
.nav-link:focus,
.nav-item:focus,
.btn:focus,
.dropdown-toggle:focus,
.navbar-toggler:focus,
[role="button"]:focus,
[tabindex]:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Keep focus visible for keyboard accessibility (optional) */
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.auto-type {
  font-size: clamp(4rem, 10vw, 12rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  line-height: 1 !important;
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  position: relative;
}

.auto-type span {
  display: inline-block;
  font-size: inherit !important;
  line-height: inherit !important;
  transform-origin: bottom center;
  animation: wave 1.3s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes wave {

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

  50% {
    transform: translateY(-0.4em);
  }
}

/* Optional style for the added "your" */
.highlight {
  color: #fff;
  font-weight: 200;
  font-size: 8vw;
  text-transform: lowercase;
}

.bgc {
  background-color: #4048D1;
}

.bgcsl1 {
  background-color: #262138;
}

.bgs {
  width: 100%;
  padding: 4vw;
  background-color: var(--pc4);
}

.title {
  font-family: "Unbounded", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-size: 9vw;
}

a {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
  font-family: "Afacad", sans-serif;
  font-size: 2vh;
  font-weight: 400;
  opacity: 1;
  /* text-align: left; */
}

a:hover {
  color: #fff;
  font-weight: 900;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  /* text-align: center; */
}

html {
  scrollbar-width: thin;
  scrollbar-color: var(--thumbBG) var(--scrollbarBG);
  --scrollbarBG: #1e1e1f;
  --thumbBG: #0b0b86;
}

body::-webkit-scrollbar {
  width: 11px;
}

body::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}

body::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  border-radius: 6px;
  border: 3px solid var(--scrollbarBG);
}

/* Classes */
body {
  width: 100%;
  overflow-x: hidden;
  font-size: 1vw;
  background-color: #4048D1;
  opacity: 1;
  top: 0px;
  left: 0px;
  vertical-align: middle;

}


.nobg {
  background-color: transparent;
}

div {
  display: block;
  unicode-bidi: isolate;
}

.bg {
  width: 99vw;
  z-index: -1;
  position: absolute;
  height: 100vh;
  opacity: 1;
  top: 0px;
  left: 0px;
  overflow: hidden;
}

#header {
  left: 0;
  align-items: center;
  position: fixed;
  z-index: 10;
  width: 100%;
  padding: 10vw;
  padding-top: 2vw;
  padding-bottom: 2vw;
  background-color: #4048D1;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 10vw;
}

#header .mobile-logo,
#header .mobile-menu-toggle {
  display: none;
}

.mobile-menu,
.mobile-menu-overlay {
  display: none !important;
}

.lbox {
  width: fit-content;
  text-align: center;
}

.slogo {
  width: 4vw;
}

.navbar {
  padding: 0;
  align-items: center;
  text-align: center;
  font-weight: 100;
  font-size: 1vw;
  background-color: transparent;
}

.navbar-toggler-icon {
  height: 8vw;
  width: 8vw;
}

.nav-item {
  font-size: 1vw;
  /* border: white 1px solid; */
}

.nav-item a {
  color: rgba(255, 255, 255, 1);
  font-size: 1.2vw;
}

.nav-links {
  /* border: var(--b3); */
  padding: 1vw;

}

.ulc {
  /* border: var(--b4); */
  margin-left: 3vw;

}

.nav-links li {
  border: var(--b4);

  list-style-type: none;
  width: 89px;
  font-weight: Regular;
  font-size: 1vw;
  opacity: 1;
  text-align: left;
}

.nav-links a {
  color: rgba(255, 255, 255, 1);
  text-decoration: none;
}

.nav-links a:hover {
  color: grey;
}

.mlogo {
  opacity: 0;
}

.hero-logo {
  align-items: center;
  align-self: center;
  align-content: center;
  z-index: 15;
  position: fixed;
  text-align: center;
  top: 20vh;
  transform: translateX(0);
  transform: translateY(0);
  width: 35vw;
  height: auto;
  opacity: 1;
  transition: all 0.3s linear;
}

.actionbox {
  width: 28vw;
  height: 3.1vw;
  text-align: end;
  background-color: transparent;
}


.ico {
  margin: 0.5vw;
}

.ico2 {
  background-color: transparent;
  background-repeat: no-repeat;
  background-image: url('../img/ico2.svg');
  max-width: 6vw;
  min-width: 4vw;
  margin: 0.25vw;
}

.pill-CS {
  z-index: 1;
  font-weight: 300;
  font-size: clamp(12px, 1.1vw, 18px);
  border: #ffffff solid;
  padding: 0.5vw 1vw;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2vw;
  border-width: 0.1vw;
  color: black;
  display: inline-block;
}

.pill-CSS {
  z-index: 1;
  font-weight: 300;
  font-size: 1.2vw;
  border: #ffffff solid;
  padding: 0.5vw 1vw;
  text-decoration: none;
  cursor: pointer;
  border-radius: 2vw;
  border-width: 0.1vw;
  color: black;
  background-color: #4A4363;
}



.pill-CS:hover,
.pill-CS:active,
.pill-CS:focus {
  border: rgba(0, 180, 189, 1) solid !important;
  background-color: rgba(0, 180, 189, 1) !important;
  color: #ffffff !important;
}

.pill-CS a {
  color: #ffffff;
  background-color: #00B4BD;
  border: #00B4BD solid;
}

.pill {
  z-index: 1;
  font-weight: 300;
  font-size: clamp(12px, 1.1vw, 18px);
  border: #ffffff solid;
  padding: 0.5vw 1vw;
  text-decoration: none;
  margin: 6px 5px;
  cursor: pointer;
  border-radius: 2vw;
  border-width: 0.1vw;
  color: #ffffff;
}

.pill a {
  color: #ffffff;
  background-color: #00B4BD;
  border: #00B4BD solid;
}

.pill:hover {
  border: #00B4BD solid;
  background-color: #00B4BD;
}

/* User requested specific hover for Get Started CTA */
.cta-btn:hover {
  background-color: #ffffff !important;
  color: #000000 !important;
  border-color: #ffffff !important;
}

@media (min-width: 768px) {
  .lbox {
    width: fit-content;
  }

  .actionbox {
    scale: 1;
  }
}

.hero-section {
  width: 100%;
  min-height: 100%;
  justify-content: center;
  text-align: center;
  align-items: center;
  align-content: center;
  align-self: center;
  margin: 0;
}

.header-nav a:hover {
  color: #00B4BD !important;
  font-size: 20px !important;
  font-weight: 400 !important;
}

.hero-section-CSD {
  width: 100%;
  min-height: 100%;
  justify-content: center;
  text-align: left;
  align-items: center;
  align-content: center;
  align-self: center;
  margin: 0;

}

.hero-bg {
  width: 100%;
  height: 75%;
}

.hero-section2 {
  width: 100%;
  min-height: 100%;
  justify-content: center;
  text-align: center;
  align-items: center;
  align-content: center;
  align-self: center;
  margin: 0;

}

.typed-cursor1 {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background-color: currentColor;
  vertical-align: middle;
  margin-left: 5px;
  animation: blink 0.8s infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Container for the 3D scene. This height is CRITICAL for preventing clipping. */
.pageheader__scene {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  text-align: center;
  vertical-align: middle;
  height: 40vh;
  width: 100%;
  overflow: hidden;
}

/* The 3D Cube/Rolodex Container itself */
.pageheader__cube {
  width: 300px;
  height: 40vh;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(calc(-1.5em / 2));
  transition: transform 1s ease-in-out;
}

.cube__face {
  position: absolute;
  overflow: hidden;
  width: 100%;
  height: 1.5em;
  padding: 0 0.25em;
  box-sizing: border-box;
  background-color: #4048D1;
  font-size: 1.2em;
  line-height: 1.5em;
  color: #fff;
  text-align: center;
  border-radius: 0.55rem;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%;
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
  transform: rotateX(180deg) translateZ(2000px);
  opacity: 0;
}

@media only screen and (min-width: 700px) {
  .pageheader--home .pageheader__scene .pageheader__cube .cube__face {
    border-radius: 0.8rem;
  }
}

.cube__face--next {
  transform: rotateX(90deg) translateZ(calc(1.5em / 2));
}

.cube__face--active {
  transform: rotateX(0deg) translateZ(calc(1.5em / 2));
}

.cube__face--previous {
  transform: rotateX(-90deg) translateZ(calc(1.5em / 2));
}

.cube__face--hidden {
  transform: rotateX(180deg) translateZ(2000px);
}

.hero-3d {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  overflow: hidden;
  perspective: 1000px;
}

svg {
  width: 100%;
}

path {
  stroke: #0E00BF;
  stroke-width: 20;
  fill: none;
  stroke-linecap: round;
}

.path1 {
  stroke: #FFB088;
  stroke-width: 22;
  fill: none;
  stroke-linecap: round;
}

.path2 {
  stroke: #0E00BF;

}

/* Common Concerns Wave Container */
.common-concerns-wave-container {
  position: relative;
  min-height: 400px;
  overflow: visible;
  width: 100%;
}

.common-concerns-wave {
  position: absolute;
  width: 122%;
  height: 400px;
  /* top: 50%; */
  left: 26%;
  transform: translate(-42%, -67%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .common-concerns-wave-container {
    min-height: auto;
  }

  .common-concerns-wave {
    display: none;
    /* Hide wave on mobile for cleaner layout */
  }
}

.tagline {
  text-align: start;
  font-size: 5vw;
  /* padding-left: 3vw; */
}

.tagline .highlight-desktop {
  font-size: 7px !important;
}

.hero-title {
  /* text-align: start; */
  font-size: 14vh;
  font-family: "Unbounded", sans-serif;
}

.stamp {
  position: relative;
  border-radius: 5px;
  width: 100px;
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-delay: 2.5s;
  -webkit-animation-delay: 2.5s;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  opacity: 1;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.keywords {
  background-color: transparent;
  width: 10%;
  position: relative;
  top: -45vh;
  left: 8vw;
  text-align: start;
  flex-wrap: wrap;
}

.badge {
  background-color: transparent;
  border: #F9AC8D solid 1px;
  color: #F9AC8D;
  font-size: 2.5vw;
  font-weight: 300;
  font-size: 1rem;
  padding: 5px 15px;
  font-family: "Afacad", sans-serif;
  text-decoration: none;
  display: inline-block;
  margin: 4px 10px;
  cursor: pointer;
  border-radius: 2vw;
  border-width: 1.5px;
  scale: 1.5;
}

.bd1 {
  margin-top: 1vw;
  margin-bottom: 0.1vw;
  margin-left: 30%;
  width: 150px;
  height: 35px;

}

.bd2 {
  margin-top: 1.06vw;
  margin-bottom: 0.10vw;
  margin-left: 80%;
  transform: rotate(1deg);
  width: 150px;
  height: 35px;
}

.bd3 {
  margin-top: 1.1vw;
  margin-left: 1vw;
  transform: rotate(10deg);
  width: 150px;
  height: 35px;
}

.hero-desc-desktop {
  font-size: 4rem !important;
  font-weight: 300;
  font-family: "Afacad", sans-serif;
  padding-top: -5vw;
  margin-top: -10vw;
  color: #fff;
  display: block;
  text-align: center;
  line-height: 1.6;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.hero-desc-mobile {
  display: none;
}

.hero-desc {
  font-size: 2rem !important;
  font-weight: 300;
  font-family: "Afacad", sans-serif;
  color: #fff;
  text-align: center;
  line-height: 1.6;
}

.discover-btn {
  display: block;
  font-size: 2vw;
  padding-top: -300px;
  margin-top: -15rem;
}

.discover-btn:hover {
  color: #00B4BD;
}

.solutions-section {
  width: 100%;
  min-height: 5%;
  justify-content: center;
  text-align: center;
  align-items: center;
  align-content: center;
  align-self: center;
  margin-top: -10vw !important;
  padding-top: -5vw !important;
}

.content-pad-service {
  padding: 0px 10%;
  padding-top: 10vw;
}

@media (min-width: 1950px) {
  .content-pad-service {
    padding: 0px 15%;
  }
}

.content-pad-Brandservice {
  padding: 0px 10%;
}


@media (min-width: 1950px) {
  .content-pad-Brandservice {
    padding: 0px 12%;
  }
}


@media (min-width: 1950px) {
  .content-pad {
    padding: 0px 12%;
  }
}

.solutions-home {
  color: #F9AC8D;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 8vw;
  margin-top: -80px;
  font-weight: bold;

}

.solutions-tag {
  color: #F9AC8D;
  font-weight: 600 !important;
  font-family: Poppins, sans-serif !important;
  font-size: 20px !important;
  text-align: start;
  text-align: start;
  margin-bottom: 8vw;
  padding-top: -10vw;
  margin-top: -18vw;
  letter-spacing: 4px;
}

.ctpg-banner .solutions-tag {
  padding-top: 0px !important;
}

.ctpg-content {
  font-size: 20px;
  font-family: Poppins, sans-serif;
  font-weight: 400;
}

.cta-consult-btn {
  font-size: 27px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  border: 1px solid #F9AC8D !important;
  color: #F9AC8D !important;
  padding: 12px 28px !important;
  border-radius: 40px !important;
  text-decoration: none !important;
  transition: 0.3s ease !important;
}

.ctpg-btn .cta-consult-btn:hover {
  font-size: 27px !important;
  font-family: Poppins, sans-serif !important;
  font-weight: 400 !important;
  border: 1px solid #F9AC8D !important;
  color: #F9AC8D !important;
}

.solutions-tag-solution {

  color: #F9AC8D;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 2vw;
  margin-top: 55px;
  font-weight: bold;
}

.solutions-tag-brand {
  color: #F9AC8D;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 5vw;
  margin-top: -95px;
  font-weight: bold;
}

.solutions-tag-Technology {
  color: #F9AC8D;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 5vw;
  margin-top: -95px;
  font-weight: bold;
}

.solutions-tag-Tech {
  color: #F9AC8D;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 8vw;
  margin-top: -5px;
  font-weight: bold;
}

.solutions-tag-Brand {
  color: #F9AC8D;
  font-size: 2vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 5vw;
  margin-top: 10px;
  font-weight: bold;
}

.solutions-tag-detail2 {
  color: #F9AC8D;
  font-size: 2vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 2vw;
  text-align: start;
  margin-bottom: 5vw;
  margin-top: 10px;
  font-weight: 400;
}

.solutions-tag-commen {
  color: #F9AC8D;
  font-size: 2vw;
  text-align: start;
  margin-bottom: 5vw;
  font-size: 2vw;
  text-align: start;
  margin-bottom: 6vw;
  margin-top: -80px;
  font-weight: 500 !important;
}

.solution-para {
  font-size: 1.5vw;
  text-align: start;
  margin-top: -6vw;
  margin-bottom: 1vw;
}

.Solution-Para {
  font-size: smaller;
  text-align: start;
  margin-top: -3vw;
  /* margin-bottom: 5vw; */
}

.Soln-Detail {
  font-size: 1.80vw;
  text-align: start;
  margin-top: -3vw;
}

.solutions-tag-Our {
  color: #F9AC8D;
  font-size: 40px;
  text-align: start;
  margin-bottom: 0.2vw;
  text-align: start;
  margin-bottom: 8vw;
  margin-top: 85px;
  font-weight: 500;
  max-width: 50%;
}

.solutions-tag-Is {
  color: #F9AC8D;
  font-size: 2.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  text-align: start;
  margin-bottom: 3vw;
  margin-top: 40px;
  font-weight: bold;
}

.section-title {
  font-family: "Unbounded", sans-serif;
  color: #ffffff;
  font-size: 2.5vw;
  text-align: start;
  margin-top: 20px;
}

.section-Title {
  font-family: "Unbounded", sans-serif;
  color: #d9ddf3;
  font-size: 2.5vw;
  text-align: start;
  margin-bottom: 2vw;
  margin-top: 10px;
  padding-top: 1vw;
}

.section-title-solution {
  font-family: "Unbounded", sans-serif;
  color: #d9ddf3;
  font-size: 2.5vw;
  text-align: start;
  margin-bottom: 2vw;
  margin-top: -5px;
}

/* CUSTOMER JOURNEY */

.solutions-tags {
  color: #F9AC8D;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 0.2vw;
  font-size: 1.5vw;
  text-align: start;
  margin-bottom: 10vw;
  margin-top: -50px;
  font-weight: bold;
}

.section-titles {
  font-family: "Unbounded", sans-serif;
  /* color: #0ef221; */
  color: #ffffff;
  font-size: 2.5vw;
  text-align: start;
  margin-bottom: 5vw;
  margin-top: -80px;
}

@media (max-width: 1950px) {
  .solution-cards {
    font-size: 1vw;
    width: 18vw;
    height: 14vw;
  }
}

.solution-cards {
  padding-top: 5rem;
  display: block;
  justify-content: center;
  justify-self: center;
  width: 20vw;
  height: 18vw;
  padding: 2vw 3vw;
  padding-bottom: 10px;
  margin: 5vw;
  margin-top: 9.5vw;
  border-radius: 1.5vw;
  background-color: #00B4BD;
  font-size: 2vw;

}

.Scard {
  line-height: 1.1 !important;
  font-size: 2.3vw !important;
  font-weight: 600;
  padding: 0 !important;
  margin-bottom: 100vw !important;
  background-color: transparent;
}

/* Override inline styles for solution cards content */
.solution-cards .row.h-75 {
  height: 70% !important;
  display: flex;
  align-items: flex-start;
  padding-top: 0;
}

.solution-cards .row.h-25 {
  height: 3% !important;
  display: flex;
  align-items: flex-end;
}

.solution-cards p {
  font-size: 1.1vw !important;
  font-weight: 500;
}

.solution-cards .ico {
  width: 2.5vw !important;
  height: 2.5vw !important;
  min-width: 2.5vw !important;
}

.Scard img {
  width: 23vw;
}

.brand-card {
  border-radius: 2vw;
}

.journey-section {
  background-color: #262138;
  padding: 18vw 0px;
  position: relative;
  top: -16vw;
  width: 100%;
  height: 65vw;
}

.jcard-home {
  width: 10vw;
  height: 10vw;
  border: solid 1px #F9AC8D;
  border-radius: 2vw;
  text-align: left !important;
  padding: 2vw;
  margin: auto;
}


.abtpg-jcard,
.jcard-home,
.jcard {
  text-align: left !important;
  align-items: left !important;
}

.abtpg-jcard .jimg,
.jcard-home .jimg,
.jcard .jimg {
  align-self: left !important;
  margin-bottom: 50px;
}

.abtpg-jcard .jcard-title,
.jcard-home-title,
.jcard-title {
  text-align: left !important;
}

.abtpg-jcard .jcard-text,
.jcard-home-text,
.jcard-text {
  text-align: left !important;
}

/* Hide ONLY Stage text on hover */
.jcard-home:hover .stageno-home {
  display: none !important;
}

.jcard-home:hover .jimg {
  margin-bottom: 20px !important;
}


@media (max-width: 1950px) {
  .jcard-home {
    width: 15.9vw;
    height: 16vw;
  }

  .jcrow {
    width: 80vw;
  }
}

.jcard {
  width: 10vw;
  height: 10vw;
  border: solid 1px #F9AC8D;
  border-radius: 2vw;
  text-align: left;
  padding: 2vw;
  margin: auto;
}

@media (max-width: 1950px) {
  .jcard {
    width: 15.9vw;
    height: 16vw;
  }

  .jcrow {
    width: 80vw;
  }
}

.jimg {
  width: 3vw;
  height: 3vw;
  margin-bottom: 1vw;
}

.stageno-home {
  padding-top: -1vw;
  color: #C5C5C5;
  font-size: 1.1vw;
}

.stage-number {
  padding-top: 1vw;
  color: #C5C5C5;
  font-size: 1.2vw;
}

.jcard-home-text {
  margin: 0px;
  padding: 0px;
  ;
  font-size: 1.1vw;
  opacity: 0;

}

.jcard-text {
  margin: 0px;
  padding: 0px;
  ;
  font-size: 1.2vw;
  opacity: 0;

}

@media (min-width: 1949px) {

  .jcard-home-text {
    font-size: 1.3vw;
    line-height: 1.4vw;
  }

  .stage-number {
    font-size: 75%;
  }

  .jcard {
    width: 15vw;
    height: 15vw;
  }

  .jcard-home-title {
    font-size: 5vh;
  }

}

.jcard-home-title {
  font-size: 1.8vw;
  font-family: "Unbounded", sans-serif;
}

.jcard-home:hover .stage-number,
.jcard-home:hover .jcard-home-title {
  opacity: 0;
  /* Hide these on hover */
  display: none;

}

.jcard-home:hover {
  background-color: #4048D1 !important;
}

.jcard-home:hover .jcard-home-text {
  opacity: 1;
  /* Show the text on hover */

}

/************************************************************************JOURNEY PAGE CSS */
@media (min-width: 1949px) {

  .jcard-text {
    font-size: 1.3vw;
    line-height: 1.4vw;
  }

  .stage-number {
    font-size: 75%;
  }

  .jcard {
    width: 15vw;
    height: 15vw;
  }

  .jcard-title {
    font-size: 5vh;
  }
}

.jcard-title {
  font-size: 1.8vw;
  font-family: "Unbounded", sans-serif;
}

.jcard:hover .stage-number,
.jcard:hover .jcard-title {
  opacity: 0;
  /* Hide these on hover */
  display: none;

}

.jcard:hover {
  background-color: #4048D1 !important;
}

.jcard:hover .jcard-text {
  opacity: 1;
}

.about-section {
  background-color: #262138;
  width: 100%;
  position: relative;
  top: 0;
  margin-top: -16vw;
  padding-top: 5vw;
}

.metrics-sub {
  margin: 60px 0 100px 0;
}

/* ============================================
   WHY SOLVSTRAT? ABOUT US - PIXEL PERFECT
   ============================================ */

/* CSS Custom Properties */
:root {
  --about-label-color: #22D1DB;
  --about-text-color: #ffffff;
  --about-stats-number-color: #F6A085;
  --about-stats-label-color: #22D1DB;
  --about-bg-color: #26243A;
}

/* ============================================
   MOBILE LAYOUT (max-width: 767px)
   Figma Pixel-Perfect Design
   ============================================ */
@media (max-width: 767px) {
  .about-wrapper {
    width: 100%;
    padding: 32px 20px;
    box-sizing: border-box;
  }

  /* Label: "ABOUT US" */
  .about-label {
    display: block;
    font-family: "Afacad", sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #22D1DB;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: left;
    padding-left: 11px;
    margin-top: 0;
    margin-bottom: 8px;
  }

  /* Heading: "Why Solvstrat?" */
  .about-heading {
    font-family: "Unbounded", sans-serif;
    font-size: 25px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.2;
    text-align: left;
    padding-left: 11px;
    margin: 0 0 16px 0;
  }

  /* Description Paragraph */
  .about-description {
    font-family: "Afacad", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.6;
    text-align: left;
    padding-left: 7px;
    margin: 0 0 24px 0;
  }

  /* Image Wrapper */
  .about-image-wrapper {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 32px auto;
    display: block;
  }

  .about-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    object-fit: cover;
  }

  /* Stats Grid - CSS GRID ONLY (2 columns, 2 rows) */
  .about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 20px;
    width: 100%;
    position: relative;
  }

  /* Vertical divider between columns - FULL HEIGHT */
  .about-stats-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
    z-index: 1;
  }

  /* Individual stat item - centered */
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    z-index: 2;
  }

  /* Stat Number (e.g., "100+", "50+") */
  .stat-number {
    font-family: "Unbounded", sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: #F6A085;
    line-height: 1;
    margin-bottom: 6px;
  }

  .stat-number .counter,
  .stat-number .stat-symbol {
    color: #F6A085;
    font-size: 29px;
    font-weight: 800;
    font-family: Unbounded, sans-serif;
  }

  /* Stat Label (e.g., "Business", "Happy Clients") */
  .stat-label {
    font-family: "Poppins", sans-serif;
    font-size: 11.5px;
    font-weight: 300;
    color: #22D1DB;
    line-height: 1.3;
    text-align: center;
  }
}

/* ============================================
   TABLET LAYOUT (768px - 1024px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  .about-wrapper {
    padding: 48px 32px;
  }

  .about-label {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .about-heading {
    font-size: 3px;
    margin-bottom: 20px;
  }

  .about-description {
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 90%;
  }

  .about-image-wrapper {
    max-width: 480px;
    margin-bottom: 40px;
  }

  .about-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    column-gap: 24px;
    row-gap: 28px;
    max-width: 700px;
    margin: 0 auto;
    position: relative;
  }

  .about-stats-grid::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateX(-50%);
  }

  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .stat-number,
  .stat-number .counter,
  .stat-number .stat-symbol {
    font-size: 36px;
  }

  .stat-label {
    font-size: 16px;
  }
}

/* ============================================
   DESKTOP LAYOUT (1025px+)
   Figma Pixel-Perfect Match - Two Column Layout
   ============================================ */
@media (min-width: 1025px) {
  .about-wrapper {
    padding: 30px 80px 80px 80px;
    max-width: 1600px;
    margin: 0 auto;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr;
    column-gap: 100px;
    row-gap: 0;
    align-items: center;
  }

  /* Label - "ABOUT US" in first column */
  .about-label {
    grid-column: 1;
    grid-row: 1;
    font-size: 22px;
    font-weight: 600;
    color: #22D1DB;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    text-align: left;
    margin: -30px;
    margin-left: 5px;
    align-self: start;
  }

  /* Heading - "Why Solvstrat?" - LARGE and BOLD */
  .about-heading {
    grid-column: 1;
    grid-row: 2;
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    text-align: left;
    margin: -80px 0 36px 0;
    align-self: start;
  }

  /* Description Paragraph */
  .about-description {
    grid-column: 1;
    grid-row: 3;
    font-size: 22px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.7;
    text-align: left;
    margin-top: -100px;
    padding-right: 40px;
    align-self: start;
  }

  /* Image - right column with highly rounded corners, spans all text rows */
  .about-image-wrapper {
    grid-column: 2;
    grid-row: 1 / 4;
    margin: 0;
    border-radius: 40px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    align-self: center;
    width: 90%;
    height: 105%;
  }

  .about-image {
    width: 100%;
    height: 100%;
    border-radius: 40px;
    display: block;
    object-fit: cover;
  }

  /* Stats Grid - spans both columns, below everything */
  .about-stats-grid {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 1fr;
    column-gap: 0;
    row-gap: 0;
    width: 100%;
    padding-top: 60px;
    margin-top: 60px;
    border-top: none;
    position: relative;
    justify-items: start;
    padding-left: 0;
    margin-left: -52px;
  }

  /* Hide mobile vertical divider on desktop */
  .about-stats-grid::before {
    display: none;
  }

  /* Desktop stat items - centered with dividers */
  .stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-align: left;
    padding: 0 90px;
    position: relative;
  }

  /* Vertical dividers between stats */
  .stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 80px;
    width: 1px;
    background-color: rgba(34, 209, 219, 0.3);
  }

  /* Large stat numbers */
  .stat-number,
  .stat-number .counter,
  .stat-number .stat-symbol {
    font-size: 80px;
    font-weight: 700;
    color: #F6A085 !important;
    line-height: 1;
    margin-bottom: 12px;
    opacity: 1;
    visibility: visible;
    display: inline-block;
  }

  .counter {
    color: #F6A085 !important;
    font-size: 80px;
    font-weight: 700;
  }

  /* Stat labels */
  .stat-label {
    font-size: 18px;
    font-weight: 400;
    color: #22D1DB;
    text-align: center;
  }
}

/* ============================================
   EXTRA LARGE DESKTOP (1440px+)
   ============================================ */
@media (min-width: 1440px) {
  .about-wrapper {
    max-width: 1800px;
    padding: 120px 100px 80px 100px;
    column-gap: 120px;
  }

  .about-heading {
    font-size: 80px;
    margin-bottom: 40px;
  }

  .about-description {
    font-size: 22px;
    line-height: 1.75;
  }

  .about-image-wrapper {
    border-radius: 48px;
  }

  .about-image {
    border-radius: 48px;
  }

  .stat-number,
  .stat-number .counter,
  .stat-number .stat-symbol {
    font-size: 68px;
    color: #F6A085 !important;
    opacity: 1;
    visibility: visible;
  }

  .counter {
    font-size: 68px;
    color: #F6A085 !important;
    font-weight: 700;
  }

  .stat-label {
    font-size: 18px;
  }
}


.case-study {
  width: 100%;
  background-color: #262138;
  position: relative;
  top: 0;
  margin-top: -2vw;
  /* padding-top: calc(5vw + 16vw); */
}


.tile {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 1vw;
}


.photo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transition: transform .5s ease-out;
}

.ftext {
  font-size: 2vw;
  line-height: 1.8vw;
  vertical-align: middle;
  text-align: left;
  font-weight: 400;
}

.ftitle {
  color: #00B4BD;
  font-size: 1.5vw;
}

.highlight-case {
  padding-top: 1vw;
  color: white;
  font-size: 40px;
  font-weight: 500;
  font-family: "Unbounded", sans-serif;
}

@media (max-width: 2650px) {
  .ctpg-bg2 .highlight-case {
    font-size: 42px !important;
  }

  .ctpg-bg2 a {
    font-size: 27px !important;
  }

  .ctpg-bg2 .ico {
    width: 3vw !important;
    height: 3vw !important;
  }
}

@media (max-width: 1024px) {
  .ctpg-bg2 .highlight-case {
    font-size: 27px !important;
    padding: 0 !important;
  }

  .ctpg-bg2 a {
    font-size: 20px !important;
  }

  .header-nav a {
    font-size: 18px !important;
    margin-bottom: 40px !important;
  }

  .btn-get-started {
    font-size: 16px !important;
    /* padding: 8px 20px !important; */
    margin-bottom: 20px !important;
  }

  .header-logo-center {
    margin-bottom: 20px !important;
  }

  .header-actions {
    align-items: start !important;
  }
}

@media (max-width: 768px) {
  .ctpg-banner .hero-bg .ctpg-title {
    margin-top: 5rem !important;
    margin-bottom: 0px !important;
  }

  .ctpg-banner {
    padding-top: 380px !important;
    /* height: 0 !important; */
    height: 73vh !important;
  }

  .ctpg-banner .solutions-tag {
    font-size: 20px !important;
    font-weight: 600 !important;
  }

  .ctpg-banner .ctpg-title {
    font-size: 32px !important;
    line-height: 42px !important;
  }

  .ctpg-banner .ctpg-content {
    font-size: 18px;
    margin-bottom: 30px !important;
  }

  .ctpg-banner .cta-consult-btn {
    font-size: 20px !important;
    font-weight: 400 !important;
  }

  .ctpg-btn {
    display: flex;
    flex-direction: column;
    /* stack buttons */
    gap: 24px;
    /* space between buttons */
    align-items: center;
  }

  .ctpg-btn a {
    width: 100%;
    /* optional: full-width buttons */
    text-align: center;
  }

  .ctpg-banner #wavePath {
    fill: none !important;
    stroke-width: 55 !important;
    stroke: #0E00BF !important;
  }

  .ctpg-banner .ctwaveimg1 {
    bottom: 65% !important;
  }

  .ctpg-sec {
    display: block !important;
  }

  .form-section img {
    width: 65% !important;
  }

  .ctpg-Fitem {
    font-size: 20px !important;
    font-family: Poppins, sans-serif !important;
  }

  .ctpg-formblock {
    padding: 30px !important;
    width: 100% !important;
  }

  .text-start.form-btn {
    text-align: left !important;
  }

  .text-start button {
    padding: 5px !important;
    /* padding: 10px 10px !important; */
    border-radius: 35px !important;
    width: 85px;
    margin: 30px 0 !important;
  }

  .form-section {
    padding-bottom: 0px !important;
  }

  .ctpg-bg2 .highlight-case {
    text-align: center !important;
    padding: 50px 0 !important;
    font-size: 32px !important;
    line-height: 44px !important;
  }

  .ctpg-bg2 a {
    font-size: 16px !important;
    padding: 5px 10px !important;
    margin-bottom: 40px !important;

  }

  .ctpg-bg2 img {
    margin-bottom: 40px !important;
  }

  .footer ul li {
    text-align: left !important;
    margin-top: 30px !important;
  }

  .footer a {
    font-family: Poppins, sans-serif !important;
  }

  .list-unstyled li {
    font-family: Poppins, 'sans-serif' !important;
  }

  .cpw a {
    font-size: 20px !important;
    font-family: Poppins, 'sans-serif' !important;
  }
}

.case-cards {
  margin-top: 3vw;
  padding-bottom: 45px;
}

.fcase {
  border: white solid 1px;
  padding: 1vw;
  padding-left: 1vw;
  align-items: center;
  align-content: center;
  text-align: center;
  align-self: center;
  border-radius: 1vw;
}

.fimg {
  height: 10vw;
}

.view-all-btn {
  padding: 0.5vw 1vw;
  z-index: 1;
  position: relative;
}

img.img-fluid.mb-2.footer-logo {
  margin-left: 95px !important;
  margin-top: 10px !important;
}

/* ============================================
   FEATURED CASE STUDY - RESPONSIVE
   ============================================ */

/* CSS Custom Properties for Featured Case Study */
:root {
  --featured-label-color: #00CED1;
  --featured-bg-color: #2B2D42;
  --featured-text-color: #ffffff;
  --featured-border-radius: 12px;
  --featured-button-border: 2px solid #ffffff;
}

/* Mobile First - Featured Case Study (320px+) */
.featured-case-study {
  width: 100%;
  padding: 2rem 0;
  margin-bottom: 3rem;
}

.featured-case-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
  max-width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
}

.featured-case-image-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.featured-case-image-wrapper {
  width: 100%;
  overflow: hidden;
  border-radius: var(--featured-border-radius);
  aspect-ratio: 18 / 9;
  position: relative;
}

.featured-case-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--featured-border-radius);
}

.featured-case-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
  width: 100%;
}

/* Label positioning - Mobile shows label with image, Desktop shows at top */
.featured-case-label-desktop {
  display: none;
}

.featured-case-label-mobile {
  font-family: "Afacad", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--featured-label-color);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: block;
  /* text-align: left; */
  padding-right: 50px;
}

.featured-case-title {
  font-family: "Unbounded", sans-serif;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 580;
  color: var(--featured-text-color);
  line-height: 1.5;
  margin: 0;
}

.featured-case-btn {
  background: transparent;
  color: var(--featured-text-color);
  border: var(--featured-button-border);
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  width: fit-content;
  white-space: nowrap;
}

.featured-case-btn:hover {
  background: var(--featured-text-color);
  color: var(--featured-bg-color);
  transform: scale(1.05);
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) {
  .featured-case-study {
    padding: 3rem 0;
    margin-bottom: 4rem;
  }

  .featured-case-content {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
  }

  .featured-case-image-section {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .featured-case-image-wrapper {
    width: 100%;
    aspect-ratio: 16 / 10;
  }

  .featured-case-text {
    flex: 0 0 45%;
    max-width: 45%;
    gap: 1.5rem;
  }

  .featured-case-label-mobile {
    font-size: 0.9rem;
  }

  .featured-case-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }

  .featured-case-btn {
    padding: 0.875rem 2.5rem;
  }
}

/* Desktop: 1025px+ - Label moves to top-left of entire section */
@media (min-width: 1025px) {
  .featured-case-study {
    padding: 4rem 0;
    margin-bottom: 5rem;
  }

  /* Show desktop label at top, hide mobile label */
  .featured-case-label-desktop {
    display: none;
  }

  .featured-case-label-mobile {
    display: none;
    /* Hide mobile label on desktop */
  }

  .featured-case-content {
    gap: 3rem;
    padding: 4rem 6rem 0 6rem;
    flex-direction: row;
    align-items: flex-start;
  }

  .featured-case-image-section {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .featured-case-image-section .featured-case-label-mobile {
    display: none;
  }

  .featured-case-image-wrapper {
    width: 100%;
  }

  .featured-case-text {
    flex: 0 0 48%;
    max-width: 48%;
    gap: 2rem;
    display: flex;
    flex-direction: column;
  }

  .featured-case-text::before {
    content: 'FEATURED CASE STUDY';
    font-family: "Afacad", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--featured-label-color);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1rem;
  }

  .featured-case-title {
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    line-height: 1.2;
    padding-top: 1rem;
  }

  .featured-case-btn {
    padding: 0.75rem 2rem;
    font-size: 0.95rem;
  }
}

/* Extra Large: 1440px+ - Wider layout with centered container */
@media (min-width: 1440px) {
  .featured-case-label-desktop {
    max-width: 1600px;
    margin: 4rem auto 2rem auto;
    padding-left: 42.7rem;
    font-size: 1.6rem;
  }

  .featured-case-content {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 6rem;
    gap: 4rem;
  }

  .featured-case-image-section {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .featured-case-image-wrapper {
    width: 100%;
  }

  .featured-case-text {
    flex: 0 0 48%;
    max-width: 48%;
  }

  .featured-case-title {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
  }
}

/* ============================================
   RESPONSIVE CASE STUDY CARDS - MOBILE FIRST
   ============================================ */

/* CSS Custom Properties for consistent theming */
:root {
  --card-bg-color: #2B2D42;
  --card-border-color: #ffffff;
  --card-text-color: #ffffff;
  --card-border-radius: 20px;
  --card-padding-mobile: 24px 16px;
  --card-padding-tablet: 28px 20px;
  --card-padding-desktop: 32px 24px;
  --image-border-radius: 16px;
  --button-bg: transparent;
  --button-border: 2px solid #ffffff;
  --button-text: #ffffff;
}

/* Base styles - Mobile First (320px+) */
.case-cards-container {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.case-cards-container::-webkit-scrollbar {
  display: none;
}

.case-study-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg-color);
  border: 2px solid var(--card-border-color);
  border-radius: var(--card-border-radius);
  padding: var(--card-padding-mobile);
  min-width: calc(100% - 2rem);
  max-width: calc(100% - 2rem);
  flex-shrink: 0;
  box-sizing: border-box;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.case-study-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.case-study-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
}

.case-study-title {
  font-family: "Afacad", sans-serif;
  font-size: clamp(1.25rem, 4vw, 1.5rem);
  font-weight: 600;
  color: var(--card-text-color);
  text-align: center;
  line-height: 1.4;
  margin: 0;
  width: 100%;
}

.case-study-image-wrapper {
  width: 100%;
  max-width: 320px;
  overflow: hidden;
  border-radius: var(--image-border-radius);
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.case-study-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--image-border-radius);
  display: block;
}

.case-study-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

.view-all-btn {
  background: var(--button-bg);
  color: var(--button-text);
  border: var(--button-border);
  border-radius: 25px;
  padding: 0.75rem 2rem;
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  font-weight: 400;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-block;
  white-space: nowrap;
}

.view-all-btn:hover {
  background: #00B4BD;
  color: #ffffff;
  transform: scale(1.05);
}

/* Scroll Indicators (Dots) for Mobile */
.case-cards-wrapper {
  position: relative;
  width: 100%;
}

.case-cards-indicators {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.5rem 0;
}

.indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.indicator.active {
  width: 24px;
  border-radius: 4px;
  background: var(--card-border-color);
}

.indicator:hover {
  background: rgba(255, 255, 255, 0.6);
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) {
  .case-cards-container {
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    gap: 1.5rem;
    padding: 0 2rem;
    overflow-x: visible;
    scroll-snap-type: none;
    flex-wrap: wrap;
  }

  .case-study-card {
    padding: var(--card-padding-tablet);
    max-width: 48%;
    min-width: 45%;
    flex: 1;
    scroll-snap-align: none;
    display: flex;
    flex-direction: row;
  }

  .case-study-content {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    width: 100%;
  }

  .case-study-title {
    text-align: left;
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    flex: 0 0 45%;
    max-width: 45%;
    line-height: 1.3;
  }

  .case-study-image-wrapper {
    flex: 0 0 50%;
    max-width: 50%;
    aspect-ratio: 16 / 10;
  }

  .case-study-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .case-study-btn-wrap {
    margin-top: 2.5rem;
    padding: 0 2rem;
  }

  .view-all-btn {
    padding: 0.875rem 2.5rem;
    font-size: 1rem;
  }

  .case-cards-indicators {
    display: none;
  }
}

/* Desktop: 1024px+ - Enhanced to match Figma design */
@media (min-width: 1024px) {

  #case-studies {
    max-width: 1800px;
    margin: 0 auto;
    padding: 0 3rem;
  }

  .case-cards-container {
    display: flex;
    flex-direction: row;
    gap: 48px;
    padding: 0 3rem;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    overflow: visible;
    scroll-snap-type: none;
    max-width: 100%;
  }

  .case-study-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 3rem 2.5rem;
    max-width: 50%;
    min-width: 50%;
    flex: 1;
    min-height: 280px;
    scroll-snap-align: unset;
  }

  .case-study-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
    justify-content: space-between;
    width: 90%;
  }

  .case-study-title {
    font-size: clamp(1.8rem, 2.2vw, 2.5rem);
    flex: 0 0 38%;
    max-width: 30%;
    line-height: 2;
    text-align: left;
    font-weight: 600;
  }

  .case-study-image-wrapper {
    flex: 0 0 48%;
    max-width: 48%;
    aspect-ratio: 16 / 10;
    border-radius: var(--image-border-radius);
  }

  .case-study-image {
    border-radius: var(--image-border-radius);
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

}

@media (min-width: 1440px) {
  #case-studies {
    max-width: 2000px;
    padding: 0 4rem;
  }

  .case-cards-container {
    max-width: 100%;
    margin: 0 auto;
    gap: 2rem;
    padding: 0 4rem;
  }

  .case-study-card {
    max-width: 48%;
    min-width: 48%;
    padding: 2rem 2.5rem;
    min-height: 180px;
    height: 200px;
  }

  .case-study-content {
    gap: 2rem;
  }

  .case-study-title {
    font-size: clamp(1.5rem, 1.8vw, 2rem);
    flex: 0 0 40%;
    max-width: 55%;
    line-height: 1.3;
    padding-left: 10px;
    text-align: left;
  }

  .case-study-image-wrapper {
    flex: 0 0 55%;
    max-width: 55%;
  }

  .case-study-btn-wrap {
    margin-top: 5rem;
    padding: 0 4rem;
  }

  .view-all-btn {
    padding: 0.65rem 1.8rem;
    font-size: 1rem;
    font-weight: 300;
    border-radius: 50px;
  }
}

.cta-section {
  width: 100%;
  background-color: #262138;
  padding: 197px 0 71px;
  position: relative;
  top: 0;
  margin-top: -10vw;
}

.cta-mod {
  background-color: #00B4BD;
  padding: 3.1vw 0vw;
  margin-top: 5vw;
  border-radius: 2vw;
  margin-bottom: 5rem;
}

.cta-left {
  font-family: "Unbounded", sans-serif;
  font-size: 40px;
  font-weight: 400;
  color: #262138;
  line-height: 1.2;
  text-align: start;
}

.cta-right {
  align-self: center;
  padding: 0;
  margin: 0;
  font-size: 1.5vw;
  font-weight: 100;
}

.cta-btn {
  color: #4A4363;
  border: var(--b4) 1px solid;
  font-size: clamp(12px, 1.1vw, 18px);
  align-self: center;
}

.cta-btn:hover {
  border: #262138 1px solid;
  color: #4A4363;
  font-size: 1.1rem;
  font-weight: 400;
}

#footer {
  margin-top: 0;
  position: relative;
}

.footer {
  margin-top: 0;
  padding-bottom: 3vw;
  width: 100%;
}


.footer-fx {
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  text-decoration: none;
  font-size: 2vh;
  padding-top: 0px;
}

.footer-logo,
.footer-links,
.contact-info {
  width: 100%;
  box-sizing: border-box;
  padding: 1vw;
  text-align: center;
  align-self: center;
  align-content: center;
  align-items: center;
  font-size: 2vw;
}

.footer-logo img {
  width: 40%;
  padding: 1vw;
}

.footer p {
  font-size: 57px !important;
  font-weight: 500 !important;
  font-family: "Unbounded", sans-serif !important;
  line-height: 100% !important;
}

.footer a {
  font-size: 20px !important;
  font-family: Poppins, sans-serif !important;
}

.footer ul li {
  font-size: 20px !important;
  font-family: Poppins, sans-serif !important;

}

@media (max-width: 768px) {
  .contact-info {
    padding-top: 4vw;
  }
}

/* Apply 50% width for tablets and up */
@media (min-width: 768px) {
  .footer-logo {
    width: 60%;
  }

  .footer-links,
  .contact-info {
    width: 20%;
    font-weight: 100;
  }

  .footer-links ul,
  .contact-info ul {
    text-align: left;
    font-size: 2vw;
    font-weight: 100;
  }

  .footer-logo img {
    width: 60%;
    padding: 1vw;
  }
}

.footer-links ul,
.contact-info ul,
.footer-links a {
  font-size: 1.5vw;
  font-weight: 100;

}

.cpw {
  display: block;
  width: 100%;
  background: rgba(14, 0, 191, 1);
  opacity: 1;
  font-weight: 100;
  overflow: hidden;
  text-align: center;
  font-size: 1vw;
  padding: 1vw;
}

.cpw a {
  text-decoration: none;
  background: transparent;
  font-size: 1vw;
}

.cpw a:hover {
  text-decoration: none;
  color: rgba(255, 255, 255, 1);
}

.ctlink {
  font-size: 1.5vw;
}

/* ************************************************************************************************ABOUT US PAGE */

.abt-branding1 {
  width: 100%;
  background-color: #262138;
  font-family: 'Montserrat', sans-serif;
  font-weight: 100;
  color: transparent;
}

.scroll-left {
  overflow: hidden;
  position: relative;
  font-family: "Unbounded", sans-serif;
  color: orange;
}

.scroll-left p {
  padding: 0;
  margin: 0;
  color: #262138;
  position: relative;
  font-family: "Unbounded", sans-serif;
  text-shadow:
    -2px -2px 0 #F9AC8D,
    2px -2px 0 #F9AC8D,
    -2px 2px 0 #F9AC8D,
    2px 2px 0 #F9AC8D,
    -3px 0px 0 #F9AC8D,
    3px 0px 0 #F9AC8D,
    0px -3px 0 #F9AC8D,
    0px 3px 0 #F9AC8D;
  font-size: 10vw;
  text-wrap: nowrap;
  width: 100%;
  height: 100%;
  margin: 0;
  transform: translateX(100%);
  animation: scroll-left 15s linear infinite;
}

/* Move it (define the animation) */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 768px) {
  #header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    background-color: #4845E4 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
  }

  #header .lbox,
  #header .mobile-logo {
    order: 1 !important;
    margin: 0 !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
  }

  #header .lbox img,
  #header .mobile-logo img,
  #header .slogo {
    height: 40px !important;
    width: auto !important;
    display: block !important;
    margin-left: 5px !important;
    margin-top: 20px !important;
    margin-right: auto !important;
  }

  /* Hamburger Menu - Right Corner (White, No Border) */
  #header .mobile-menu-toggle,
  #header .navbar-toggler {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 30px !important;
    height: 22px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    order: 3 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    margin-top: -25px !important;
    align-self: flex-start !important;
    z-index: 3000 !important;
    box-shadow: none !important;
    outline: none !important;
  }

  #header .hamburger-line,
  #header .navbar-toggler-icon {
    width: 100% !important;
    height: 3px !important;
    background-color: #ffffff !important;
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
    display: block !important;
  }

  /* Remove Bootstrap default hamburger icon background */
  #header .navbar-toggler-icon {
    background-image: none !important;
  }

  /* Hide Desktop Elements */
  #header .actionbox {
    display: none !important;
  }

  /* 2. "ABOUT US" Label Typography - Orange/Gold */
  .about-tag,
  .solutions-tag,
  .abtpg-title {
    font-family: "Unbounded", sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #FFAA00 !important;
    text-align: center !important;
    letter-spacing: 1px !important;
    margin-top: 3rem !important;
    margin-bottom: 1rem !important;
    text-transform: uppercase !important;
    display: block !important;
  }

  /* 3. Main Headline Text - "AT SOLVSTRAT, WE ENGINEER..." */
  .abtpg-tag,
  .ctpg-title,
  .section-title-solution {
    font-family: "Unbounded", sans-serif !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin: 0 auto !important;
    padding: 0 1.5rem !important;
    max-width: 90% !important;
    margin-top: 20px;
  }

  /* Alternative title classes that might be used */
  .hero-title {
    font-family: "Unbounded", sans-serif !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    text-align: center !important;
    margin: 1rem auto !important;
    padding: 0 1.5rem !important;
  }

  /* 2. Alignment & Structure */

  /* Hero Section Container */
  .hero-section,
  .hero-bg,
  .abtpg-section .hero-bg {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 2rem 1rem !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  /* Logo Centering */
  .lbox,
  .mobile-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: 100% !important;
    text-align: center !important;
  }

  .lbox,
  .mobile-logo {
    justify-content: start !important;
  }

  .lbox img,
  .mobile-logo img,
  .slogo {
    margin: 0 auto !important;
    display: block !important;
  }

  /* Content Padding and Spacing */
  .content-pad {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  /* Vertical Spacing Between Elements */
  .hero-bg .about-tag,
  .hero-bg .solutions-tag,
  .hero-bg .abtpg-title {
    margin-top: -60rem !important;
    margin-bottom: -2rem !important;
  }

  .hero-bg .ctpg-title,
  .hero-bg .section-title-solution,
  .hero-bg .abtpg-tag {
    /* margin-top: 10rem !important; */
    margin-bottom: -20rem !important;
  }

  /* Badge/Icon Container Spacing */
  .badge-container,
  .icon-container,
  .keywords-section {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* 4. Background Wave - Orange/Peach Color (CRUCIAL FIX) */

  /* About Page Section - Enable Wave Positioning */
  .abtpg-section {
    position: relative !important;
    overflow: visible !important;
    min-height: 0vh !important;
    margin-bottom: 0 !important;
    /* padding-bottom: 20vw !important; */
  }

  /* SVG Wave Container - Match Desktop Behavior */
  .abtpg-section svg,
  .abtpg-section>svg {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Wave Path - Orange/Peach Stroke (Like Desktop) */
  .abtpg-section svg path,
  .abtpg-section svg path#wavePath,
  .abtpg-section svg path.path1 {
    fill: none !important;
    stroke: #F9AC8D !important;
    stroke-width: 55 !important;
    stroke-linecap: round !important;
    opacity: 1 !important;
  }

  /* Content Above Wave */
  .abtpg-section .hero-bg,
  .abtpg-section .solutions-bg,
  .abtpg-section .content-pad {
    position: relative !important;
    z-index: 10 !important;
    top: 0 !important;
    margin-top: 10vw !important;
  }

  /* Alternative Wave Selectors */
  .wave,
  .separator,
  .waveimg1,
  .hero-wave,
  .abtwaveimg1 {
    fill: #FFAB76 !important;
  }

  /* .abtpg-section{
    min-height: 0px !important;
  } */

  /* .abtwaveimg1{
    height: 0vh !important;
  } */

  /* General SVG Path Styling */
  svg path.path1,
  svg path.path2,
  svg path#wavePath {
    fill: #FFAB76 !important;
    stroke: none !important;
  }

  /* Hero Section Wave */
  .hero-section svg {
    fill: #FFAB76 !important;
    opacity: 0.8 !important;
  }

  /* Wave Separator Gradients */
  .scroll-left::before,
  .scroll-left::after,
  .abt-branding1::before,
  .abt-branding1::after {
    background: linear-gradient(90deg, transparent, #FFAB76, transparent) !important;
  }

  /* 4. Additional Mobile-Specific Refinements */

  /* Remove any desktop-only padding/margins */
  .hero-section,
  .abtpg-section {
    padding-top: 80px !important;
  }

  /* Ensure rows stack properly on mobile */
  .hero-bg .row {
    flex-direction: column !important;
    width: 100% !important;
  }

  .hero-bg .col,
  .hero-bg .col-6,
  .hero-bg .col-12 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }

  /* Center all text elements */
  .tableft,
  .text-start {
    text-align: center !important;
  }

  /* Fix any absolute positioned elements */
  .hero-bg [style*="position: relative"] {
    position: static !important;
  }

  /* Ensure proper z-index layering */
  .hero-section svg,
  .abtpg-section svg {
    /* position: absolute !important; */
    /* top: 0 !important; */
    /* left: 0 !important; */
    /* width: 100% !important; */
    /* height: 100% !important; */
    /* z-index: 1 !important; */
  }

  .hero-bg,
  .content-pad {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Typography refinements for readability */
  .ctpg-title br,
  .abtpg-tag br {
    display: inline !important;
  }

  /* ============================================
       SCROLLER SECTION - TWO-LINE MOBILE DESIGN
       ============================================ */

  /* Hide desktop scroller on mobile */
  .scroll-container-desktop {
    display: none !important;
  }

  /* Show mobile two-line scroller */
  .scroll-container-mobile {
    display: block !important;
    width: 100% !important;
    overflow: hidden !important;
    background-color: transparent !important;
    padding: 5rem 0 !important;
  }

  /* Two distinct lines layout */
  .scroll-line-1,
  .scroll-line-2 {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    margin: 0.5rem 0 !important;
    background-color: transparent !important;
  }

  /* Typography & Outline Effect */
  .scroll-container-mobile .scroll-left p {
    font-family: "Unbounded", sans-serif !important;
    font-weight: 900 !important;
    font-size: 48px !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    color: transparent !important;
    -webkit-text-stroke: 2px #FFCca0 !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    position: relative !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
  }

  /* Line 1: "AUTOMATION." - Scroll Right to Left */
  .scroll-line-1 p {
    animation: mobile-scroll-rtl 15s linear infinite;
    will-change: transform;
  }

  /* Line 2: "CLOUD COMPUTING." - Scroll Left to Right (opposite) */
  .scroll-line-2 p {
    animation: mobile-scroll-ltr 18s linear infinite;
    will-change: transform;
  }

  /* Adjust font size for very small screens */
  @media (max-width: 480px) {

    .ctpg-title,
    .section-title-solution,
    .abtpg-tag {
      font-size: 32px !important;
    }

    .about-tag,
    .solutions-tag,
    .abtpg-title {
      font-size: 20px !important;
      font-weight: 600 !important;
      color: #F9AC8D !important;
    }

    #header .lbox img,
    #header .mobile-logo img {
      height: 20px !important;
    }

    /* Thinner stroke for smaller screens */
    .scroll-container-mobile .scroll-left p {
      font-size: 48px !important;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      -webkit-text-stroke: 1.5px #FFCca0 !important;
    }
  }

  /* Very small screens */
  @media (max-width: 375px) {
    .scroll-container-mobile .scroll-left p {
      /* font-size: 36px !important; */
      -webkit-text-stroke: 1.5px #FFCca0 !important;
    }

    .scroll-line-1 p {
      animation-duration: 12s;
    }

    .scroll-line-2 p {
      animation-duration: 14s;
    }
  }
}


@media (max-width: 1024px) and (min-width: 769px) {
  .highlight-case {
    font-size: 32px !important;
  }

  .cta-consult-btn {
    font-size: 20px !important;
  }

}

/* ============================================
   AUTOMATION/CLOUD SECTION - MOBILE VERTICAL STACK
   Final Implementation - Matching Figma Design
   ============================================ */

/* Mobile: Vertical Stack Layout */
@media (max-width: 768px) {

  /* 1. Flex Container - Mobile Column Layout */
  .abt-branding1.automation-section,
  .automation-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    background-color: #262138 !important;
    padding: 3rem 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Scroller at Top - Order 1 */
  .scroll-container-mobile {
    order: 1 !important;
    width: 100% !important;
    padding: 2rem 0 1.5rem !important;
    margin: 0 !important;
  }

  .scroll-container-mobile .scroll-left p {
    text-align: center !important;
    font-size: 48px !important;
    -webkit-text-stroke: 2px #FFCca0 !important;
  }

  /* Content Stack - Order 2 (Dog, Text, Buttons) */
  .automation-content-mobile {
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 1.5rem !important;
    gap: 2rem !important;
    ;
  }

  /* Dog Image */
  .automation-dog-wrapper-mobile {
    order: 1 !important;
    width: 100% !important;
    max-width: 350px !important;
    display: flex !important;
    justify-content: center !important;
    margin: 0 auto 1.5rem !important;
  }

  .automation-dog-image-mobile {
    width: 100% !important;
    height: auto !important;
    margin-top: 50px !important;
    filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(3026%) hue-rotate(224deg) brightness(97%) contrast(99%) !important;
  }

  /* Text Content */
  .automation-text-content-mobile {
    order: 2 !important;
    width: 100% !important;
    max-width: 90% !important;
    margin: 0 auto 2rem !important;
    text-align: center !important;
  }

  .automation-text-content-mobile p {
    font-family: "Afacad", sans-serif !important;
    font-size: 15px !important;
    color: #FFFFFF !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* Buttons */
  .automation-buttons-wrapper-mobile {
    order: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    margin-top: 1rem !important;
  }

  .automation-buttons-wrapper-mobile .automation-get-started-btn {
    padding: 11px 30px !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-size: 15px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .automation-buttons-wrapper-mobile .automation-arrow-icon {
    width: 44px !important;
    height: 44px !important;
    background-color: #4856DF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .automation-buttons-wrapper-mobile .automation-arrow-icon svg {
    transform: rotate(-45deg) !important;
  }

  /* Hide Desktop */
  .automation-content-desktop,
  .scroll-container-desktop {
    display: none !important;
  }

  @media (max-width: 480px) {
    .automation-dog-wrapper-mobile {
      max-width: 280px !important;
    }

    .automation-text-content-mobile p {
      font-size: 25px !important;
    }

    .scroll-container-mobile .scroll-left p {
      font-size: 48px !important;
      font-weight: 800 !important;
    }
  }

  @media (max-width: 375px) {
    .automation-dog-wrapper-mobile {
      max-width: 240px !important;
    }

    .automation-text-content-mobile p {
      font-size: 13px !important;
    }

    .scroll-container-mobile .scroll-left p {
      font-size: 38px !important;
    }
  }
}

/* Desktop: Show side-by-side layout, hide mobile stack */
@media (min-width: 769px) {

  .automation-content-mobile,
  .scroll-container-mobile {
    display: none !important;
  }

  .automation-content-desktop,
  .scroll-container-desktop {
    display: flex !important;
  }

  .abt-branding1.automation-section,
  .automation-section {
    /* background-color: #1F1B2E !important; */
    padding: 4rem 2rem !important;
  }

  .automation-content-desktop {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 3rem !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
  }

  .scroll-container-desktop {
    display: block !important;
  }

  .automation-dog-wrapper {
    max-width: 300px !important;
    flex-shrink: 0 !important;
  }

  .automation-dog-image {
    width: 100% !important;
    filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(3026%) hue-rotate(224deg) brightness(97%) contrast(99%) !important;
  }

  .automation-text-content {
    flex: 1 !important;
  }

  .automation-text-content p {
    font-family: "Afacad", sans-serif !important;
    font-size: 16px !important;
    color: #E5E5E5 !important;
    line-height: 1.6 !important;
    margin-bottom: 2rem !important;
  }

  .automation-buttons-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
  }

  .automation-buttons-wrapper .automation-get-started-btn {
    padding: 10px 28px !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-family: "Afacad", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
  }

  .automation-buttons-wrapper .automation-arrow-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background-color: #4856DF !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }
}

/* Mobile: Vertical Stack Layout */
@media (max-width: 768px) {

  /* Hide desktop layout */
  .automation-content-desktop {
    display: none !important;
  }

  .scroll-container-desktop {
    display: none !important;
  }

  .scroll-container-mobile {
    display: block !important;
  }

  /* Section Background - Dark Purple/Black */
  .abt-branding1,
  .automation-section {
    background-color: #262138 !important;
    padding: 3rem 0 !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  /* Mobile Content Container - Vertical Stack */
  .automation-content-mobile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 2rem 1.5rem !important;
    gap: 0 !important;
  }

  /* Blue Dog Image - Positioned Above Text */
  .automation-dog-wrapper-mobile {
    width: 100% !important;
    max-width: 280px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 2rem !important;
    order: 1 !important;
  }

  .automation-dog-image-mobile {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(3026%) hue-rotate(224deg) brightness(97%) contrast(99%) !important;
  }

  .automation-dog-image-mobile path,
  .automation-dog-image-mobile svg {
    fill: #4856DF !important;
    stroke: #4856DF !important;
  }

  /* Text Content - Below Dog Image */
  .automation-text-content-mobile {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-bottom: 2rem !important;
    order: 2 !important;
  }

  .automation-text-content-mobile p {
    font-family: "Afacad", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  /* Buttons - At Bottom of Stack */
  .automation-buttons-wrapper-mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
    order: 3 !important;
  }

  .automation-buttons-wrapper-mobile .automation-get-started-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 28px !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-family: "Afacad", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
  }

  .automation-buttons-wrapper-mobile .automation-get-started-btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  .automation-buttons-wrapper-mobile .automation-arrow-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    background-color: #4856DF !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
  }

  .automation-buttons-wrapper-mobile .automation-arrow-icon:hover {
    background-color: #3644BE !important;
    transform: scale(1.05) !important;
  }

  .automation-buttons-wrapper-mobile .automation-arrow-icon svg {
    width: 20px !important;
    height: 20px !important;
    transform: rotate(-45deg) !important;
  }

  /* Vertical Spacing and Element Order */
  .automation-section>* {
    margin-bottom: 0 !important;
  }

  .scroll-container-mobile {
    order: 1 !important;
  }

  .automation-content-mobile {
    order: 2 !important;
    display: none !important;
  }

  /* Hide Desktop Layout */
  .automation-content-desktop,
  .scroll-container-desktop {
    display: none !important;
  }

  /* Background Consistency */
  .abt-branding1::before,
  .abt-branding1::after {
    display: none !important;
  }

  /* Responsive Adjustments for Smaller Screens */
  @media (max-width: 480px) {
    .automation-dog-wrapper-mobile {
      max-width: 20px !important;
      margin-bottom: 1.5rem !important;
    }

    .automation-text-content-mobile p {
      font-size: 13px !important;
    }

    .automation-buttons-wrapper-mobile .automation-get-started-btn {
      padding: 8px 20px !important;
      font-size: 14px !important;
    }

    .automation-buttons-wrapper-mobile .automation-arrow-icon {
      width: 38px !important;
      height: 38px !important;
      min-width: 38px !important;
      min-height: 38px !important;
    }
  }

  @media (max-width: 375px) {
    .automation-content-mobile {
      padding: 1.5rem 1rem !important;
    }

    .automation-dog-wrapper-mobile {
      max-width: 200px !important;
    }

    .automation-text-content-mobile p {
      font-size: 20px !important;
      line-height: 1.5 !important;
    }
  }
}

/* Animation Keyframes for Mobile Scroller - OUTSIDE media query */
@keyframes mobile-scroll-rtl {
  0% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(-100%);
  }
}

@keyframes mobile-scroll-ltr {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

/* ============================================
   INTRO/VIDEO TEXT SECTION - MOBILE 8-LINE LAYOUT
   Matching Figma Design (Image 1)
   ============================================ */

@media (max-width: 768px) {

  /* 1. Section Container - Vertical Stack */
  .intro-text-section,
  .abtpg-block .automation-content-mobile,
  .video-intro-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 3rem 1.5rem !important;
    background-color: #262138 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 2. Blue Dog Image - Top (Order 1) */
  .intro-dog-image,
  .automation-dog-wrapper-mobile,
  .video-intro-dog {
    order: 1 !important;
    width: 200px !important;
    max-width: 5000px !important;
    margin-bottom: 2rem !important;
    height: auto !important;
    margin: 0 auto 5rem auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .intro-dog-image img,
  .automation-dog-image-mobile,
  .video-intro-dog img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    /* Apply blue color filter */
    filter: brightness(0) saturate(100%) invert(36%) sepia(95%) saturate(3026%) hue-rotate(224deg) brightness(97%) contrast(99%) !important;
  }

  /* Alternative: Direct SVG fill if using inline SVG */
  .intro-dog-image svg path,
  .automation-dog-image-mobile svg path,
  .video-intro-dog svg path {
    fill: #4856DF !important;
    stroke: #4856DF !important;
  }

  /* 3. Paragraph Text - Middle (Order 2) - 8 Lines Layout */
  .intro-text-content,
  .automation-text-content-mobile,
  .video-intro-text,
  .abtpg-blocktxt {
    order: 2 !important;
    font-family: "Afacad", sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    color: #FFFFFF !important;
    /* line-height: 1.8 !important; */
    text-align: left !important;
    width: 100% !important;
    max-width: 90% !important;
    padding: 0 20px !important;
    margin: 0 auto 2rem auto !important;
    box-sizing: border-box !important;
  }

  /* Remove any forced line breaks */
  .intro-text-content br,
  .automation-text-content-mobile br,
  .video-intro-text br,
  .abtpg-blocktxt br {
    display: none !important;
  }

  .abtpg-illustration {
    margin: 50px 0 !important;
    max-width: 100% !important;
  }

  /* Fine-tune text width for 8-line appearance */
  @media (max-width: 480px) {

    .intro-text-content,
    .automation-text-content-mobile,
    .video-intro-text,
    .abtpg-blocktxt {
      font-size: 16px !important;
      line-height: 1.75 !important;
      max-width: 92% !important;
      padding: 0 15px !important;
    }
  }

  @media (max-width: 375px) {

    .intro-text-content,
    .automation-text-content-mobile,
    .video-intro-text,
    .abtpg-blocktxt {
      font-size: 15px !important;
      line-height: 1.7 !important;
      max-width: 95% !important;
      padding: 0 12px !important;
    }
  }

  /* 4. Buttons - Bottom (Order 3) */
  .intro-buttons,
  .automation-buttons-wrapper-mobile,
  .video-intro-buttons {
    order: 3 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 25px !important;
    margin-bottom: 0 !important;
  }

  /* "Get Started" Button */
  .intro-buttons .get-started-btn,
  .automation-buttons-wrapper-mobile .automation-get-started-btn,
  .video-intro-buttons .pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 11px 30px !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    border-radius: 50px !important;
    color: #ffffff !important;
    font-family: "Afacad", sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
  }

  .intro-buttons .get-started-btn:hover,
  .automation-buttons-wrapper-mobile .automation-get-started-btn:hover,
  .video-intro-buttons .pill:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
  }

  /* Arrow Button - Blue Circle */
  .intro-buttons .arrow-btn,
  .automation-buttons-wrapper-mobile .automation-arrow-icon,
  .video-intro-buttons .ico {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background-color: #4856DF !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
  }

  .intro-buttons .arrow-btn:hover,
  .automation-buttons-wrapper-mobile .automation-arrow-icon:hover,
  .video-intro-buttons .ico:hover {
    background-color: #3644BE !important;
    transform: scale(1.05) !important;
  }

  .intro-buttons .arrow-btn img,
  .automation-buttons-wrapper-mobile .automation-arrow-icon img,
  .video-intro-buttons .ico img {
    width: 20px !important;
    height: 20px !important;
    filter: brightness(0) invert(1) !important;
  }

  .intro-buttons .arrow-btn svg,
  .automation-buttons-wrapper-mobile .automation-arrow-icon svg,
  .video-intro-buttons .ico svg {
    width: 20px !important;
    height: 20px !important;
  }

  .intro-buttons .arrow-btn svg path,
  .automation-buttons-wrapper-mobile .automation-arrow-icon svg path,
  .video-intro-buttons .ico svg path {
    stroke: #ffffff !important;
  }

  /* Responsive adjustments for smaller screens */
  @media (max-width: 480px) {

    .intro-buttons .get-started-btn,
    .automation-buttons-wrapper-mobile .automation-get-started-btn,
    .video-intro-buttons .pill {
      padding: 9px 24px !important;
      font-size: 14px !important;
    }

    .intro-buttons .arrow-btn,
    .automation-buttons-wrapper-mobile .automation-arrow-icon,
    .video-intro-buttons .ico {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      min-height: 40px !important;
    }
  }
}

/* Desktop View - Keep Original Layout */
@media (min-width: 769px) {

  .intro-text-section,
  .video-intro-section {
    display: block !important;
  }

  .intro-text-content,
  .video-intro-text,
  .abtpg-blocktxt {
    font-size: 1.5vw !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .intro-dog-image,
  .video-intro-dog {
    width: auto !important;
    max-width: none !important;
  }
}



/* ============================================
   HIDE ABTPG-BLOCK SECTION ON MOBILE
   ============================================ */

/* ============================================
   VIDEO/INTRO SECTION - MOBILE REDESIGN
   Matching Figma Design (Vertical Stack)
   ============================================ */

@media (max-width: 768px) {

  /* Hide dog/text/buttons section on mobile, show only video */
  .abtpg-block .content-pad.d-flex {
    display: none !important;
  }

  /* Show video section only */
  .abtpg-block {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #262138 !important;
    /* padding: 40px 20px !important;xxx */
    padding-bottom: 60px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .abtpg-block .content-pad.abtpg-video-section {
    width: 100% !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Video Container */
  .abtpg-block .image-overlay-container {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 300px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    display: block !important;
  }

  /* Video Thumbnail Image */
  .abtpg-block .image-overlay-container img:first-child,
  .abtpg-block .image-overlay-container .img-fluid {
    width: 100% !important;
    height: 100% !important;
    min-height: 400px !important;
    object-fit: cover !important;
    border-radius: 20px !important;
    display: block !important;
    padding: 0 !important;
  }

  /* Play Button Overlay - Centered */
  .abtpg-block .play-button-overlay {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: transform 0.3s ease !important;
    background-color: #00B4BD !important;
    border-radius: 50% !important;
    padding: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .abtpg-block .play-button-overlay:hover {
    transform: translate(-50%, -50%) scale(1.1) !important;
  }

  /* Responsive Adjustments */
  @media (max-width: 480px) {
    .abtpg-block {
      /* padding: 30px 15px 80px !important;xxx */
      padding-bottom: 60px !important;

    }

    .abtpg-block .image-overlay-container {
      min-height: 250px !important;
    }

    .abtpg-block .play-button-overlay {
      width: 60px !important;
      height: 60px !important;
      max-width: 60px !important;
      padding: 15px !important;
    }
  }

  @media (max-width: 375px) {
    .abtpg-block {
      /* padding: 25px 12px !important;xxx */
      padding-bottom: 60px !important;
    }

    .abtpg-block .image-overlay-container {
      min-height: 220px !important;
    }
  }
}

/* Desktop View - Keep Original Layout */
@media (min-width: 769px) {
  .abtpg-block {
    display: block !important;
    background-color: #262138 !important;
    padding-top: 8vw !important;
  }

  .abtpg-block .content-pad {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
  }

  .abtpg-block .col-6 {
    width: 50% !important;
    flex: 0 0 50% !important;
  }

  .abtpg-block .col-6:first-child img {
    width: 100% !important;
    max-width: none !important;
    filter: none !important;
  }

  .abtpg-block .abtpg-blocktxt {
    font-size: 18px !important;
    line-height: 26px !important;
    font-family: Poppins, sans-serif !important;
    font-weight: 400 !important;
    text-align: left !important;
  }

  .abtpg-block .image-overlay-container {
    border-radius: 0 !important;
  }
}

/* ============================================
   OUR EXPERTISE SECTION - MOBILE CAROUSEL REDESIGN
   Matching Figma Design
   ============================================ */

@media (max-width: 768px) {

  /* 1. Typography & Header - Left Aligned */
  .ctexp-section,
  .journey-section {
    padding: 40px 0 !important;
    background-color: #262138 !important;
    overflow: hidden !important;
  }

  .ctexp-section .text-start,
  .journey-section .text-start,
  .ctexp-section .tableft,
  .journey-section .tableft {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    margin-bottom: 2rem !important;

  }

  /* "OUR EXPERTISE" Tagline - Teal/Cyan, Left Aligned */
  .ctexp-section .about-tag,
  .journey-section .solutions-tag,
  .journey-section .about-tag {
    font-family: "Unbounded", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #00C2CB !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: left !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    padding-top: 70px !important;
    padding-left: 18px !important;
    padding-bottom: 30px !important;
  }

  /* "What Sets Us Apart?" Headline - White, Bold, Left Aligned */
  .ctexp-section .section-title,
  .journey-section .section-title,
  .ctexp-section .section-titles {
    font-family: "Unbounded", sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
  }

  /* 2. Card Slider Layout - Horizontal Carousel */
  .ctexp-section .row,
  .journey-section .row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 20px !important;
    padding: 0 0 1rem 0 !important;
    margin: 0 -1.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .ctexp-section .row::-webkit-scrollbar,
  .journey-section .row::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual Card Columns */
  .ctexp-section .col-3,
  .journey-section .col-3 {
    flex: 0 0 auto !important;
    width: 85% !important;
    min-width: 280px !important;
    max-width: 320px !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    padding: 0 !important;
  }

  /* Card Styling - Rounded Orange Border */
  .abtpg-jcard,
  .jcard-home,
  .jcard {
    width: 90% !important;
    height: 80% !important;
    min-height: 280px !important;
    padding: 2rem 1.5rem !important;
    border: 2px solid #F9AC8D !important;
    border-radius: 20px !important;
    background-color: #262138 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    /* justify-content: flex-start !important; */
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* 3. Card Content Alignment - All Left Aligned */
  .abtpg-jcard .jimg,
  .jcard-home .jimg,
  .jcard .jimg {
    width: 60px !important;
    height: 60px !important;
    margin: 0 0 1.5rem 0 !important;
    align-self: flex-start !important;
    /* text-align: left !important; */
    filter: brightness(0) saturate(100%) invert(72%) sepia(45%) saturate(1234%) hue-rotate(331deg) brightness(102%) contrast(97%) !important;
  }

  .abtpg-jcard .jcard-title,
  .jcard-home-title,
  .jcard-title {
    font-family: "Unbounded", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-align: left !important;
    line-height: 1.3 !important;
    margin: 0 0 1rem 0 !important;
    width: 100% !important;
  }

  .abtpg-jcard .jcard-title br,
  .jcard-home-title br,
  .jcard-title br {
    display: none !important;
  }

  .abtpg-jcard .jcard-text,
  .jcard-home-text,
  .jcard-text {
    font-family: "Afacad", sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    text-align: left !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    opacity: 1 !important;
    display: block !important;
  }

  .abtpg-jcard:hover,
  .jcard-home:hover,
  .jcard:hover {
    background-color: #262138 !important;
  }

  .abtpg-jcard:hover .jcard-title,
  .jcard-home:hover .jcard-home-title {
    opacity: 1 !important;
    display: block !important;
  }

  .abtpg-jcard:hover .jcard-text,
  .jcard-home:hover .jcard-home-text {
    opacity: 1 !important;
    display: block !important;
  }

  /* 4. Pagination Dots */
  .expertise-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    margin-top: 2rem !important;
    width: 100% !important;
  }

  .pagination-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
  }

  .pagination-dot.active {
    background-color: #00C2CB !important;
    border-color: #00C2CB !important;
    width: 12px !important;
    height: 12px !important;
  }

  @media (max-width: 480px) {

    .ctexp-section .section-title,
    .journey-section .section-title {
      font-size: 28px !important;
      padding-left: 18px !important;
      padding-bottom: 50px !important;
    }

    .ctexp-section .col-3,
    .journey-section .col-3 {
      width: 90% !important;
      min-width: 260px !important;
    }

    .abtpg-jcard,
    .jcard-home,
    .jcard {
      min-height: 260px !important;
      padding: 1.75rem 1.25rem !important;
    }

    .abtpg-jcard .jimg,
    .jcard-home .jimg,
    .jcard .jimg {
      width: 100px !important;
      height: 80px !important;
      padding-left: 20px !important;
      /* color: red; */
    }

    .abtpg-jcard .jcard-title,
    .jcard-home-title,
    .jcard-title {
      font-size: 18px !important;
    }

    .abtpg-jcard .jcard-text,
    .jcard-home-text,
    .jcard-text {
      font-size: 13px !important;
    }
  }

  @media (max-width: 375px) {

    .ctexp-section,
    .journey-section {
      padding: 2.5rem 1rem !important;
    }

    .ctexp-section .section-title,
    .journey-section .section-title {
      font-size: 26px !important;
    }

    .ctexp-section .col-3,
    .journey-section .col-3 {
      width: 92% !important;
      min-width: 240px !important;
    }
  }
}

/* Desktop View - Keep Grid Layout Unchanged */
@media (min-width: 769px) {
  .expertise-pagination {
    display: none !important;
  }

  .ctexp-section .row,
  .journey-section .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    overflow-x: visible !important;
  }

  .ctexp-section .col-3,
  .journey-section .col-3 {
    width: 23% !important;
    flex: 0 0 23% !important;
  }

  .abtpg-jcard,
  .jcard-home,
  .jcard {
    text-align: center;
    align-items: center;
  }

  .abtpg-jcard .jimg,
  .jcard-home .jimg,
  .jcard .jimg {
    align-self: center;
  }

  .abtpg-jcard .jcard-title,
  .jcard-home-title,
  .jcard-title {
    text-align: center;
  }

  .abtpg-jcard .jcard-text,
  .jcard-home-text,
  .jcard-text {
    text-align: center;
  }
}

.abtpg-expert {
  background-color: #262138;
  padding: 2vw 0;
}

.ctexp-section {
  background-color: #262138;
  padding-top: 2vw;
  padding-bottom: 10vw;
  position: relative;
  /* top: -16vw; */
  width: 100%;
  /* height:60vw; */
}

/* ============================================
   OUR CLIENTS SECTION - MOBILE REDESIGN
   Matching Figma Design (Image 1)
   ============================================ */

@media (max-width: 768px) {
  /* 1. Typography & Colors - Match Image 1 */

  /* Section Container - Flex Column Layout */
  .abtpg-clt-section {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    /* padding: 40px 20px !important; */
    background-color: #262138 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .abtpg-clt-section .content-pad {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    height: auto !important;
  }

  /* Tagline - "OUR CLIENTS" - Teal Color */
  .abtpg-clt-section .about-tag {
    order: -3 !important;
    font-family: "Afacad", sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #00C2CB !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    text-align: left !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
  }

  /* 2. Mobile Layout Order - Headers First */

  /* Header Container - Order 1 */
  .abtpg-clt-section .row.align-content-center:first-of-type {
    order: -2 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin: 0 0 2rem 0 !important;
  }

  .abtpg-clt-section .row.align-content-center .col-7,
  .abtpg-clt-section .row.align-content-center .col-5 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  /* Headline - "Trusted By Industry Leaders Worldwide" */
  .abtpg-clt-section .abtpg-clt-title {
    font-family: "Unbounded", sans-serif !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    /* Extra Bold */
    color: #ffffff !important;
    line-height: 1.2 !important;
    text-align: left !important;
    margin: 0 0 1.5rem 0 !important;
    padding: 0 !important;
  }

  /* Remove line breaks in headline for better mobile flow */
  .abtpg-clt-section .abtpg-clt-title br {
    display: none !important;
  }

  /* Right column text (if present) - hide or reorder */
  .abtpg-clt-section .row.align-content-center .col-5 {
    display: none !important;
    /* Hide right column text on mobile */
  }

  /* 2. Content Paragraphs - Order 2 (After Header, Before Map) */

  /* Paragraph Container - Order 2 */
  .abtpg-clt-section .row.align-content-center:last-child {
    order: -1 !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 2rem !important;
  }

  /* 3. Map Image - Order 3 (Bottom) */

  /* Map Container - Order 3 */
  .abtpg-clt-section .map-section {
    order: 10 !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .abtpg-clt-section .map-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: relative !important;
    padding: 0 !important;
  }

  /* Map Image Styling */
  .abtpg-clt-section .map-map {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* Map location icons - ensure they scale with map */
  .abtpg-clt-section .mapitem {
    position: absolute !important;
    /* Positions will be preserved from desktop CSS */
  }

  .abtpg-clt-section .location-icon {
    transform: scale(0.8) !important;
    /* Slightly smaller on mobile */
  }

  /* Text Content Styling */
  .abtpg-clt-section .abtpg-clt-txt {
    font-family: "Afacad", sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #E5E5E5 !important;
    /* Light gray/white */
    line-height: 1.6 !important;
    text-align: left !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* Remove line breaks in paragraphs for better mobile flow */
  .abtpg-clt-section .abtpg-clt-txt br {
    display: none !important;
  }

  /* Add spacing between paragraphs */
  .abtpg-clt-section .abtpg-clt-txt:last-child {
    margin-bottom: 0 !important;
  }

  /* 5. Responsive Adjustments for Smaller Screens */

  @media (max-width: 480px) {
    .abtpg-clt-section {
      padding: 30px 15px !important;
    }

    .abtpg-clt-section .about-tag {
      font-size: 20px !important;
      margin-top: 50px !important;
      /* padding-left: 20px !important; */
    }

    .abtpg-clt-section .abtpg-clt-title {
      font-size: 28px !important;
      margin: 20px 0 40px !important;
      /* padding-left: 20px !important; */
    }

    .abtpg-clt-section .abtpg-clt-txt {
      font-size: 18px !important;
    }

    .abtpg-clt-section .location-icon {
      transform: scale(0.6) !important;
    }
  }

  @media (max-width: 375px) {
    .abtpg-clt-section {
      padding: 25px 12px !important;
    }

    .abtpg-clt-section .abtpg-clt-title {
      font-size: 26px !important;
    }

    .abtpg-clt-section .abtpg-clt-txt {
      font-size: 18px !important;
      line-height: 1.5 !important;
      padding-left: 15px !important;
    }
  }
}

/* Desktop View - Keep Original Layout */
@media (min-width: 769px) {
  .abtpg-clt-section {
    display: block !important;
    background-color: #262138 !important;
  }

  .abtpg-clt-section .content-pad {
    display: block !important;
    padding: 0 10% !important;
  }

  .abtpg-clt-section .about-tag {
    color: #00B4BD !important;
    /* Teal on desktop */
    padding-bottom: 35px !important;

  }

  .abtpg-clt-section .row {
    display: flex !important;
    flex-direction: row !important;
  }

  .abtpg-clt-section .col-7 {
    width: 58.33% !important;
  }

  .abtpg-clt-section .col-5 {
    width: 41.67% !important;
    display: block !important;
  }

  .abtpg-clt-section .map-section {
    min-height: 70vh !important;
  }

  .abtpg-clt-section .abtpg-clt-title {
    font-size: 3vw !important;
    text-align: left !important;
  }

  .abtpg-clt-section .abtpg-clt-txt {
    font-size: 18px !important;
  }
}

.image-overlay-container {
  position: relative;
  /* This is crucial! It establishes a positioning context for its children */
  display: inline-block;
  /* Or block, depending on your layout. Inline-block ensures it only takes up the space of its content. */
}

.play-button-overlay {
  position: absolute;
  /* Takes the element out of the normal document flow */
  top: 50%;
  /* Positions the top edge of the element at the vertical midpoint of the parent */
  left: 50%;
  /* Positions the left edge of the element at the horizontal midpoint of the parent */
  transform: translate(-50%, -50%);
  /* Adjusts the element's own position by half its width and height to truly center it */
  /* Optional: Adjust size and add hover effects */
  width: 10%;
  /* Example: make the play button 10% of the container's width */
  max-width: 80px;
  /* Example: set a maximum size */
  cursor: pointer;
  /* Indicates it's clickable */
  transition: transform 0.3s ease-in-out;
  /* Smooth transition for hover */
}

.play-button-overlay:hover {
  transform: translate(-50%, -50%) scale(1.1);
  /* Slightly enlarge on hover */
}

/* Ensure the base image is responsive and respects container padding/margins */
.image-overlay-container .img-fluid {
  display: block;
  /* Ensures no extra space below the image */
  width: 100%;
  /* Make sure it fills its container */
  height: auto;
}

.abtpg-jcard {
  width: 15vw;
  height: 18vw;
  border: solid 1px #F9AC8D;
  border-radius: 2vw;
  background-color: #262138;
  text-align: left;
  padding: 2vw;
  margin: auto;
}

.abtpg-clt-section {
  background-color: #262138;
  width: 100%;
}

.abtpg-clt-title {
  font-size: 3vw;
  font-family: "Unbounded", sans-serif;
  margin-top: -2vw;

}

.abtpg-clt-txt {
  font-size: 1.6vw;
  margin-top: -2vw;
  margin-bottom: 70px;
}

.abtwaveimg1 {
  height: 80vh;
  width: 100%;
  /* background-image: url('../img/abtVector.png');
  background-size: 100%;
  background-repeat:no-repeat; */
  /* background-size:contain; */
  /* background-position:center; */
  /* padding-bottom: 5vw ;
  padding-top: 5vw ; */
}


/* logo scroller in abt pg */

.scroller {
  width: 100%;
  overflow: hidden;
  background-color: #262138;
  height: 14vh;
  display: flex;
  align-items: center;
  padding-top: 1vh;
  padding-bottom: 2vh;
  position: relative;
}

.scroller__inner {
  display: flex;
  gap: 3vw;
  animation: scroll-right 1s inear forwards;
}

/* Hide scroller in mobile view */
@media (max-width: 768px) {

  .scroller,
  .scroller__inner {
    display: none !important;
  }
}

.lsroller {
  height: 10vh;
  width: auto;
  object-fit: contain;
}

@keyframes scroll-right {
  0% {
    transform: translateX(-100%);
  }

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

.lsroller {
  padding: 1vw;
  /* This seems to apply padding to the parent, not directly related to scroller items */
}

.scroller__inner {
  display: flex;
  gap: 1rem;
  /* The gap between your items */
  height: 100%;
  white-space: nowrap;
  /* Keeps items on a single line */

  /* IMPORTANT: Let the content define the width here initially, do NOT set width: 200% */
  /* We want this element to be exactly as wide as all its items (original + duplicated) */
  /* Remove or comment out: width: 200%; */

  animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite;

  /* Add this to hint to the browser for smoother animations */
  will-change: transform;
}

.scroller__inner img {
  height: 100%;
  width: auto;
  /* Allows images to maintain aspect ratio. */
  /* If you want absolute precision, you could give images a fixed width (e.g., width: 150px;) */
  /* but 'auto' works if all images are roughly the same size or their relative sizes are consistent. */
}

.scroller__inner img:hover {
  transform: scale(1);
  z-index: 1;
  /* Ensures the hovered image is above others */
}

/* Direction controls */
.scroller[data-direction="right"] .scroller__inner {
  --_animation-direction: reverse;
}

.scroller[data-direction="left"] .scroller__inner {
  --_animation-direction: forwards;
}

/* Speed controls */
.scroller[data-speed="fast"] {
  --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
  --_animation-duration: 2.8s;
}

/* THE KEY TO SEAMLESS LOOPING */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    /* Calculate the exact negative width of ONE set of your content. */
    /* If you have 5 images and 4 gaps in your original set, this needs to be: */
    /* -(5 * image-width + 4 * gap-width) */
    /* Since we've duplicated the content, and `.scroller__inner` will be roughly twice the width */
    /* of one set of content, translating by exactly -50% of its *own* width will move exactly one set out of view. */

    /* This `-50%` works reliably when `.scroller__inner`'s width is determined by its (duplicated) content */
    /* and precisely double the width of one set of content + gaps. */
    transform: translateX(-50%);
  }
}

.abtmapOW {
  position: relative;
  /* To allow absolute positioning within */
  border: solid red 2px;
}

.abtmapimg-base {
  border: solid red 2px;
}

.location-icon {
  width: 2vh;
  /* transition: transform 0.2s, color 0.2s; */
  fill: #F9AC8D;
  /* initial color */
}

.location-icon:hover {
  transform: scale(1.4);
  fill: #00B4BD;
  /* hover color */
}

.lico1 {
  scale: 1.4
}

.lico2 {
  scale: 1.25
}

.lico3 {
  scale: 1.2
}

.lico4 {
  scale: 1.3
}

.lico5 {
  scale: 1.1
}

.map-section {
  min-height: 70dvh;
}

.map-map {
  height: 50dvh;
}

.map-container {
  position: relative;
  width: 1030px;
  height: 561px;
  align-self: first baseline;
}

/* ***************************************************************************contact page */
.ctpg-banner {
  height: 80vh;
}

.ctpg-banner .ctwaveimg1 {
  /* height: 100vh; */
  width: 100%;
  /* background-image: url('../img/ctVector.png');
  background-size: 100%;
  background-repeat:no-repeat; */
  /* background-size:contain; */
  /* background-position:center; */
  /* padding-bottom: 5vw ;
  padding-top: 5vw ; */
}

.ctpg-sec {
  /* width: 80vw; */
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 3vw 0; */
  height: 100%;
}

.ctpg-formblock {
  padding: 2vw 0;
  border-radius: 1vw;
  width: 50%;
}

.ctpg-Fitem {
  width: 100%;
  padding: 10px 0;
  border: none;
  border-bottom: 2px solid #C5C5C5;
  /* color: #7C75DB;  */
  color: #fff;
  font-size: 2vw;
  outline: none;
  background-color: transparent;
}

input::placeholder {
  color: #7C75DB;
}

textarea::placeholder {
  color: #7C75DB;
  padding: 0;
  margin: 0;
}

.ctpg-fdiv {
  margin: 2vw 0;
}

.ctpg-bg2 {
  width: 100%;
  background-color: #262138;
  padding: 4vw;
}



.form-section {
  padding-bottom: 80px;
  background-color: #4048D1;
}

/* .form-section .img-fluid {
  width: 100%;
  height: auto;
} */

.ctpg-c2a {}

.ogc {
  color: #F9AC8D;
  border-color: #F9AC8D;
  padding: 0.5vw 0.5;
  /* Note: '0.5' needs a unit, e.g., 0.5vw or 0.5px */
  font-size: 2vw;
  margin: 1vw;
  font-family: "Afacad", sans-serif;
}

.ogc:hover {
  /* <-- REMOVE THE SPACE HERE */
  /* border: #00B4BD solid; */
  color: #F9AC8D;
}

.ctpg-title {
  font-size: 40px !important;
  font-weight: 500 !important;
  font-family: "Unbounded", sans-serif;
  /* padding-top: 3vw; */
  color: #fff;
  line-height: 120% !important;
}

.accordion-item {
  font-size: 1.5vw;

  background-color: rgb(0, 0, 0, 0);
  border: solid 1px var(--pc2);
  margin: 2vw;
  padding: 1vw;
  border-radius: 1vw;
  /* display: flex; */

  /* padding: 0 1vw ; */
}

.accordion-content {
  background-color: rgb(0, 0, 0, 0);
}

.accordion-content p {
  font-size: 2.8rem;
}

.faq-topic {
  font-size: 500vw;
  font-family: 'Ethnocentric', sans-serif;
  font-weight: bolder;
}

.faqbtn {
  background-color: rgb(0, 0, 0, 0);
  border: none;
  /* padding-top: 1vw; */
  /* position: relative; */
  text-align: end;
  font-size: 3vw;
  font-weight: bold;
  /* position: relative; */
  align-self: flex-end;
}

#faq .accordion-item:first-of-type {
  border-top-left-radius: 1vw;
  /* or any desired value */
  border-top-right-radius: 1vw;

}

.accordion-item:not(:first-of-type) {
  border-top: 1px solid var(--pc2);
  /* Add border to all items except the first */
}

#faq .accordion-item:last-of-type {
  border-bottom-right-radius: 1vw;
  border-bottom-left-radius: 1vw;
}


/* services page */

.services-tile {
  /* width: 100%; */
  /* display: inline-block; */
  font-size: 1.5vh;
  text-align: center;
  height: 9vh;
  padding: 1vh;
  /* margin: 0.5vh; */
  font-family: "Unbounded", sans-serif;
  /* position: relative; */
  background-color: rgba(0, 0, 0, 0);
  /* Semi-transparent background */
  border-radius: 8px;
  /* Slightly rounded corners */
  padding: 0.5vw 1vw;
  /* Adjust padding as needed */
  /* margin: 0vw 1vw; */
  /* display: inline-flex; To wrap content tightly */
  align-content: center;
  color: #ffffff;
  /* White text */
  font-weight: 100;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); Subtle shadow for depth */
  border: var(--pc2) solid 1px;
  text-align: start;
  padding-top: 5.5px;
}

.services-tile:hover {
  background-color: #4a3aff;
  /* overflow: hidden;  */
}

.grid-container {
  /* display: flex; */
  /* Adjust based on desired number of columns */
  /* gap: 15px; Space between tiles */
}

.service-span {
  margin: 0;
  padding: 0;
  position: relative;
  top: -100%;
  line-height: 1;
  height: 100%;
  width: 100%;
  align-content: center;
}

/* **********************************************************************************************solutions LANDING page */
.sol-tile {
  border: solid 1px var(--pc2);
  border-radius: 2vh;
  text-align: start;
}

.solarrow {
  opacity: 0;
  top: -2vh;
  right: -2vh;
  position: relative;
  transition: opacity 0.3s ease;
  /* Smooth transition */
}

.servicearrow {
  opacity: 0;
  transition: opacity 0.3s ease;
  position: relative;
  left: 70%;
  top: -55%;
}

/* **********************************************************************************************solutions DETAIL page */

.sol-tile:hover {
  background-color: #4a3aff;
  /* overflow: hidden;  */
}

.SD-topic {
  color: #00B4BD;
  font-size: 4vh;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600;
}

.sd-dot {
  width: 15px;
  height: 15px;
  background: #2A5CFF;
  /* adjust this to match the exact blue */
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}

.sd-titletxt {
  font-family: 'unbounded', sans-serif;
  font-size: 2.9vh;
  line-height: 1;
  margin-top: 20px;
}

.sd-title-p {
  font-size: 1.7vh;
  line-height: 1.4;
  font-family: 'unbounded', sans-serif;
  font-weight: 100;
  color: #cecece;
}

.sd-tile {
  justify-content: center;
  text-align: start;
  border: var(--pc2) solid 1px;
  border-radius: 2vh;
  padding: 2vh;
}

.sd-tile-Detail {
  justify-content: center;
  text-align: start;
  border: var(--pc2) solid 1px;
  border-radius: 2vh;
  padding: 2vh;
  height: 380px;
}

.sd-wavetile {
  justify-content: center;
  text-align: start;
  border: var(--pc2) solid 1px;
  border-radius: 2vh;
  padding: 2vh;
  background-color: #262138;
  height: 250px;
  width: 235px;
}

.sd-AQtxt {
  font-size: 2.5vh !important;
}

.service-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.service-popup-content {
  background: #fff;
  width: 80%;
  max-width: 900px;
  padding: 40px;
  border-radius: 12px;
  overflow-y: auto;
  max-height: 90vh;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
}

.close-popup {
  float: right;
  font-size: 22px;
  cursor: pointer;
}


/* NEW POP */

/* Popup Overlay */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(8px);
}

.popup-content {
  background: white;
  padding: 70px;
  /* border-radius: 20px; */
  max-width: 700px;
  text-align: center;
  position: relative;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: fadeIn 0.3s ease;

}

.popup-content p {
  color: black;
  font-size: large;
}

.popup-content .cta-btn .cta-TEXT {
  background-color: #fff !important;
}

.popup-content .CTA-text {
  color: #000 !important;
  font-family: Poppins, sans-serif;
  transition: all 0.3s ease;
}

.popup-content .pill-CS {
  transition: all 0.3s ease;
  border: 1px solid #000;
  background-color: #fff;
}

.popup-content .pill-CS:hover {
  background-color: rgba(0, 180, 189, 1) !important;
  border-color: rgba(0, 180, 189, 1) !important;
}

.popup-content .pill-CS:hover .CTA-text {
  color: #fff !important;
  background-color: transparent !important;
}


@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background-color: #4048d1;
  color: white;
  border: none;
  border-radius: 100%;
  width: 40px;
  height: 40px;
  font-size: 22px;
  cursor: pointer;
}

.CTA-button {
  margin-top: 20px;
  padding: 12px 24px;
  background-color: #4048d1;
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
}


/* **********************************************************************************************Case studies page */
/* Show .solarrow when .sol-tile is hovered */
.sol-tile:hover .solarrow {
  opacity: 1;
}

.services-tile:hover .servicearrow {
  opacity: 1;
}



.CSLcard {
  border: 1px solid #fff;
  border-radius: 20px;
  padding: 0;
  text-align: start;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  /* Slight background logic */
}

.CSLcard-title {
  text-align: start;
  font-size: 25px;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500;
}

.CSLcard-body {
  padding: 0 2rem 1rem;
}

.CSLcard-img-top {
  border-radius: 0;
  width: 100%;
  /* aspect-ratio: 16/10; */
  /* Enforce ratio */
  object-fit: none !important;
}

.csltile-txt {
  opacity: 1;
}

/* cslDetail */

.case-study-detail {
  background-color: #262138;
  overflow: hidden;
  width: 100%;
  min-width: 1512px;
  height: 3957px;
  position: relative;
}

.solutions-tag-CS {
  color: #F9AC8D;
  font-size: 16px;
  font-weight: 700;
  text-align: start;
  margin-bottom: 20px;
  margin-top: 0;
  letter-spacing: 2px;
  font-family: 'Poppins', sans-serif;
}

.case-study-detail .image {
  position: absolute;
  top: 2364px;
  left: calc(50.00% - 756px);
  width: 1512px;
  height: 508px;
  background-color: #494362;
}

.case-study-detail .div {
  position: absolute;
  top: 0;
  left: 0;
  width: 1512px;
  height: 604px;
  background-color: #4048d1;
}

.case-study-detail .dropdown-text {
  position: absolute;
  top: 58px;
  left: 145px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .text-wrapper {
  left: 263px;
  position: absolute;
  top: 58px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .dropdown-text-2 {
  left: 376px;
  position: absolute;
  top: 58px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .dropdown-text-3 {
  left: 486px;
  position: absolute;
  top: 58px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .layer {
  position: absolute;
  top: 55px;
  left: calc(50.00% - 69px);
  width: 95px;
  height: 49px;
}

.case-study-detail .group {
  position: absolute;
  top: 3391px;
  left: 0;
  width: 1512px;
  height: 566px;
}

.case-study-detail .footer {
  position: absolute;
  top: 0;
  left: calc(50.00% - 756px);
  width: 1512px;
  height: 566px;
  background-color: #4048d1;
}

.case-study-detail .hero-background {
  position: absolute;
  top: 486px;
  left: calc(50.00% - 756px);
  width: 1512px;
  height: 80px;
  background-color: #0e00bf;
}

.case-study-detail .block {
  display: flex;
  flex-direction: column;
  width: 625px;
  height: 422px;
  align-items: flex-start;
  justify-content: space-around;
  gap: 264px;
  position: absolute;
  top: 32px;
  left: 887px;
}

.case-study-detail .block-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  gap: 167px;
  position: relative;
  align-self: stretch;
  width: 100%;
  flex: 0 0 auto;
}

.case-study-detail .block-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
  position: relative;
  flex: 0 0 auto;
}

.case-study-detail .block-3 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  flex: 0 0 auto;
}

.case-study-detail .text-wrapper-2 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: -0.20px;
  line-height: 22px;
  white-space: nowrap;
}

.case-study-detail .list {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 0 0 auto;
}

.case-study-detail .contact-info {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32px;
  white-space: nowrap;
}

.case-study-detail .contact-info-2 {
  position: relative;
  width: fit-content;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32px;
  white-space: nowrap;
}

.case-study-detail .location-info {
  position: relative;
  width: fit-content;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 32px;
}

.case-study-detail .list-2 {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 45px;
  position: absolute;
  top: 130px;
  left: 842px;
}

.case-study-detail .nav-item {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.case-study-detail .nav-item-2 {
  position: relative;
  width: fit-content;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: 28px;
  white-space: nowrap;
}

.case-study-detail .group-2 {
  position: absolute;
  top: 148px;
  left: 137px;
  width: 411px;
  height: 183px;
}

.case-study-detail .text-wrapper-3 {
  position: absolute;
  width: 99.51%;
  height: 32.61%;
  top: 67.39%;
  left: 0;
  font-family: "Unbounded", Helvetica;
  font-weight: 500;
  color: #d9e7f3;
  font-size: 56px;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

.case-study-detail .img {
  position: absolute;
  width: 56.22%;
  height: 56.40%;
  top: 0;
  left: 23.30%;
}

.case-study-detail .CTA-container {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 60px;
  left: calc(50.00% + 458px);
}

.case-study-detail .CTA-button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 30px;
  border: 1px solid;
  border-color: #ffffff;
}

.case-study-detail .CTA-text {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.CTA-texts {
  color: black;
}

.CTA-Texts {
  color: white;
}

.case-study-detail .icon-container {
  position: relative;
  width: 41px;
  height: 41px;
}

.case-study-detail .vector {
  position: absolute;
  width: 169.56%;
  height: 21.88%;
  top: -3.43%;
  left: -42.46%;
}

.case-study-detail .section-description {
  position: absolute;
  top: 351px;
  left: calc(50.00% - 502px);
  width: 1005px;
  font-family: "Unbounded", Helvetica;
  font-weight: 500;
  color: #d9e7f3;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0;
  line-height: 48.0px;
}

.case-study-detail .life-made-easy-text {
  position: absolute;
  top: 297px;
  left: calc(50.00% - 70px);
  font-family: "Poppins", Helvetica;
  font-weight: 600;
  color: #f9ac8d;
  font-size: 20px;
  text-align: center;
  letter-spacing: 2.00px;
  line-height: normal;
}

.case-study-detail .p {
  top: 732px;
  position: absolute;
  left: 668px;
  width: 711px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .span {
  font-weight: bold;
  padding-right: 250px;
  font-size: larger;

}

.case-study-detail .text-wrapper-4 {
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
}

.case-study-detail .hero-title {
  position: absolute;
  top: 730px;
  left: calc(50.00% - 616px);
  width: 391px;
  font-family: "Unbounded", Helvetica;
  font-weight: 500;
  color: #f9ac8d;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 48.0px;
}

.case-study-detail .section-description-2 {
  top: 1600px;
  position: absolute;
  left: 668px;
  width: 711px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .hero-title-2 {
  top: 1376px;
  left: calc(50.00% - 616px);
  width: 391px;
  position: absolute;
  font-family: "Unbounded", Helvetica;
  font-weight: 500;
  color: #f9ac8d;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 48.0px;
}

.case-study-detail .hero-title-3 {
  top: 2220px;
  left: calc(50.00% - 616px);
  width: 391px;
  position: absolute;
  font-family: "Unbounded", Helvetica;
  font-weight: 500;
  color: #f9ac8d;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 48.0px;
}

.case-study-detail .group-wrapper {
  position: absolute;
  top: 2974px;
  left: calc(50.00% - 610px);
  width: 1220px;
  height: 235px;
  display: flex;
}

.case-study-detail .div-wrapper {
  width: 1220px;
  display: flex;
  justify-content: center;
}

.case-study-detail .group-3 {
  width: 1224px;
  height: 235px;
  margin-left: 4px;
  position: relative;
}

.case-study-detail .service-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 1220px;
  height: 235px;
  background-color: #00b4bd;
  border-radius: 20px;
}

.case-study-detail .button {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: 143px;
  left: calc(50.00% + 59px);
}

.case-study-detail .CTA-text-wrapper {
  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 30px;
  border: 1px solid;
  border-color: #262138;
}

.case-study-detail .CTA-text-2 {
  position: relative;
  width: fit-content;
  margin-top: -1.00px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #494362;
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .heading {
  position: absolute;
  top: 68px;
  left: 66px;
  width: 507px;
  font-family: "Unbounded", Helvetica;
  font-weight: 400;
  color: #262138;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 48.0px;
}

.case-study-detail .subheading {
  position: absolute;
  top: 64px;
  left: 638px;
  width: 563px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 20px;
  letter-spacing: 0;
  line-height: normal;
}

.case-study-detail .group-4 {
  position: absolute;
  top: 2235px;
  left: 668px;
  width: 626px;
  height: 60px;
}

.case-study-detail .service-title {
  position: absolute;
  top: 2579px;
  left: 180px;
  width: 247px;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 27.8px;
  letter-spacing: 0;
  line-height: 30px;
}

.case-study-detail .service-background-2 {
  left: 143px;
  position: absolute;
  top: 2525px;
  width: 600px;
  height: 199px;
  border-radius: 23.16px;
  border: 1.16px solid;
  border-color: #ffffff;
}

.case-study-detail .image-2 {
  position: absolute;
  top: 2542px;
  left: 419px;
  width: 303px;
  height: 164px;
  border-radius: 20px;
  object-fit: cover;
}

.case-study-detail .service-title-2 {
  position: absolute;
  top: 2579px;
  left: 801px;
  width: 247px;
  font-family: "Poppins", Helvetica;
  font-weight: 500;
  color: #ffffff;
  font-size: 27.8px;
  letter-spacing: 0;
  line-height: 30px;
}

.case-study-detail .service-background-3 {
  left: 766px;
  position: absolute;
  top: 2525px;
  width: 600px;
  height: 199px;
  border-radius: 23.16px;
  border: 1.16px solid;
  border-color: #ffffff;
}

.case-study-detail .image-3 {
  position: absolute;
  top: 2542px;
  left: 1041px;
  width: 303px;
  height: 164px;
  border-radius: 20px;
  object-fit: cover;
}

.case-study-detail .hero-title-4 {
  top: 2430px;
  left: calc(50.00% - 411px);
  width: 790px;
  text-align: center;
  position: absolute;
  font-family: "Unbounded", Helvetica;
  font-weight: 500;
  color: #f9ac8d;
  font-size: 40px;
  letter-spacing: 0;
  line-height: 48.0px;
}

.case-study-detail .metric-subcontainer {
  display: inline-flex;
  height: 41px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 15px;
  position: absolute;
  top: 2771px;
  left: calc(50.00% - 103px);
  border-radius: 24px;
  border: 1px solid;
  border-color: #ffffff;
}

.case-study-detail .button-text {
  position: relative;
  width: fit-content;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0;
  line-height: normal;
}




/* ############################################################################################################################# MOBILE VIEW */
@media only screen and (min-width: 200px) and (max-width: 600px) {

  /* * {font-size: 2vh;} */
  .map-container {
    position: relative;
    width: 100%;
    height: 100%;
    scale: 1;
    padding: 10%;
  }

  .location-icon {
    width: 1dvh;
  }

  .map-map {
    height: 100%;
  }

  .map-section {
    min-height: 80%
  }

  .mapitem {
    margin-top: 4%;
  }


}

/* END OF MEDIA SCREEN SIZE - 200 to 600 */

/* ############################################################################################################################# MEDIUM 600 to 980 */
@media only screen and (min-width: 600px) and (max-width: 950px) {
  * {
    font-size: 2vh;
  }

  .map-container {
    position: relative;
    width: 1030px;
    height: 100%;
    scale: 1;
    padding: 10%;
  }

  .location-icon {
    width: 1.4vh;
  }

  .map-map {}

  .map-section {
    min-height: 300px;
  }

  .mapitem {
    margin-top: 6%;
  }

}

/* END OF MEDIA SCREEN SIZE - 200 to 600 */

/* ############################################################################################################################# MEDIUM 600 to 980 */
@media only screen and (min-width: 1920px) {
  .map-container {
    scale: 1.4;
  }

}

.mapitem {
  position: relative;
  width: 4vh;
  height: 4vh;
}

.mapitem::before,
.mapitem::after,
.mapitem .inner {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: pulse 3s infinite;
}

.mapitem .inner {
  width: 2vh;
  height: 2vh;
  background-color: rgb(189, 0, 117);
  /* Center circle: full opacity */
  top: 0;
  left: 0;
  animation: none;
  /* static */
  z-index: 3;
}

@media only screen and (min-width: 200px) and (max-width: 600px) {}

.mapitem::before {
  width: 3vh;
  height: 3vh;
  background-color: rgba(0, 180, 189, 0.8);
  /* Middle ring */
  top: -0.5vh;
  left: -0.5vh;
  z-index: 2;
}

.mapitem::after {
  width: 6vh;
  height: 6vh;
  background-color: rgba(0, 180, 189, 0.6);
  /* Outer ring */
  top: -2vh;
  left: -2vh;
  z-index: 1;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(0.5);
    opacity: 1;
  }

  50% {
    transform: scale(1.05);
    opacity: 0.6;
  }
}

@media only screen and (max-width: 600px) {
  .mapitem {
    width: 2vh;
    height: 2vh;
  }

  .mapitem::before {
    width: 1.5vh;
    height: 1.5vh;
    top: -0.25vh;
    left: -0.25vh;
  }

  .mapitem::after {
    width: 3vh;
    height: 3vh;
    top: -1vh;
    left: -1vh;
  }

  .mapitem .inner {
    width: 1vh;
    height: 1vh;
  }
}

/* POP UP */

.pop-up {
  background-color: #ffffff;
  width: 100px;
  height: 100px;
  min-width: 1000px;
  min-height: 57px;
  position: relative;
  margin-left: 280px;
  margin-top: 150px;

}

.pop-up .service-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 400px;
  background-color: #ffffff;
  border-radius: 11.82px;

}

.pop-up .section-description {
  position: absolute;
  top: 150px;
  left: 130px;
  width: 700px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  color: #262138;
  font-size: 24px;
  text-align: center;
  letter-spacing: 1;
  line-height: normal;

}

/* Get Start Button */

.pop-up .CTA-button {

  all: unset;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  position: relative;
  flex: 0 0 auto;
  border-radius: 30px;
  border: 1px solid;
  border-color: #ffffff;

}

.pop-up .CTA-text {
  position: relative;
  width: fit-content;
  margin-top: .00px;
  font-family: "Poppins", Helvetica;
  font-weight: 400;
  /* color: #494362; */
  font-size: 16px;
  letter-spacing: 0;
  line-height: normal;

}

/* closebutton */

.pop-up .group {
  position: absolute;
  top: 31px;
  left: 898px;
  width: 76px;
  height: 76px;
  display: flex;
  /* border-radius: 37.94px; */
}

/* head */

.pop-up .service-description {
  position: absolute;
  top: 120px;
  left: 273px;
  width: 442px;
  font-family: "Unbounded", Helvetica;
  font-weight: 400;
  color: #4048d1;
  font-size: 26px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  padding-bottom: 400px;
}



/* index.html HOME ANIMATION */

.auto-type {
  display: inline-block;
  perspective: 1000px;
  transition: opacity 0.3s ease;
}

.auto-type span {
  display: inline-block;
  opacity: 0;
  /* CHANGE 1: Set origin to the top for a flip-down effect */
  transform-origin: center top;
  /* CHANGE 2: Start from a -90 degree rotation (flipped down) */
  transform: rotateX(-90deg);
  /* Changed animation name */
  animation: flipDown 0.6s ease forwards;
}

/* CHANGE 3: Update keyframes for a flip-down animation */
@keyframes flipDown {
  0% {
    transform: rotateX(-110deg);
    /* Start further down */
    opacity: -10;
  }

  /* CHANGE 4: Add a slight bounce up before settling */
  60% {
    transform: rotateX(10deg);
    opacity: 1;
  }

  100% {
    transform: rotateX(-5deg);
    /* End at normal position */
    opacity: 1;
  }
}

.highlight {
  font-weight: bold;
}


/* ✅ Navbar font responsive */

#header ul li a,
.navbar-nav .nav-link,
nav ul li a {
  font-size: clamp(13px, 1.2vw, 18px);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* For small mobile screens */

@media (max-width: 480px) {

  #header ul li a,
  .navbar-nav .nav-link {
    font-size: clamp(14px, 3vw, 17px);
  }

  .ctpg-bg2 img {
    /* margin-bottom: 40px !important; */
    width: 99%;
  }
}


/* ✅ Footer font responsive */
.footer ul li,
.footer a,
.footer p,
.contact-info li {
  font-size: clamp(13px, 1.2vw, 17px);
  line-height: 1.5;
}

/* Small mobile view */
@media (max-width: 480px) {

  .footer ul li,
  .footer a,
  .footer p {
    font-size: clamp(13px, 2.8vw, 16px);
  }
}


/* ======================================================================
   Responsive overrides for Home page (mobile & tablet)
   - Only targets <= 950px and <= 600px breakpoints
   - Keeps desktop appearance unchanged
   ======================================================================
*/

/* Tablet: 601px - 950px */
@media only screen and (min-width: 601px) and (max-width: 950px) {

  /* Header spacing scaled for tablets; ensure content isn't hidden under fixed header */
  #header {
    padding: 1.2rem 1rem !important;
    position: fixed;
    width: 100vw;
  }

  /* give body some top offset so fixed header doesn't cover content */
  body {
    padding-top: 5.2rem !important;
  }

  /* Hero logo slightly reduced and moved relative so it doesn't overlap nav */
  .hero-logo {
    position: relative !important;
    top: 1.2rem !important;
    width: 48vw !important;
    transform: none !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Hero title / auto-type scale down a bit on tablets and center it */
  .auto-type {
    font-size: clamp(2.6rem, 8.5vw, 7.5rem) !important;
    display: block;
    text-align: center;
    margin: 0 auto;
  }

  .hero-title {
    font-size: 9.5vh !important;
  }

  /* Wave stroke lighter on smaller screens to avoid visual heaviness */
  path {
    stroke-width: 10 !important;
  }

  /* Solution cards become 2-column friendly; force Bootstrap cols to stack correctly */
  .solutions-bg .row {
    display: flex;
    flex-wrap: wrap;
  }

  .solutions-bg .col-4 {
    width: 48% !important;
    max-width: 48% !important;
  }

  .solution-cards {
    width: 100% !important;
    margin: 0.8rem 0.5rem !important;
    height: auto !important;
    padding: 1.2rem !important;
  }

  /* Journey cards use percent sizing for tablet */
  .jcard-home,
  .jcard {
    width: 48% !important;
    height: auto !important;
    padding: 1rem !important;
    box-sizing: border-box;
  }

  /* Reduce excessive negative top offsets used for desktop layering */
  .journey-section,
  .about-section,
  .case-study,
  .cta-section {
    position: relative !important;
    top: 0 !important;
    padding-top: 2.5rem !important;
  }

  /* Footer layout stacks and centers on tablet */
  .footer-fx {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .footer-logo {
    width: 60% !important;
    text-align: center;
  }

  .footer-links,
  .contact-info {
    width: 40% !important;
  }
}

/* Mobile: up to 600px */
@media only screen and (max-width: 600px) {

  /* Body & general font smoothing for mobile */
  html,
  body {
    -webkit-text-size-adjust: 100%;
  }

  /* Compact header so it doesn't consume too much vertical space */
  #header {
    padding: 0.45rem 0.6rem !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 50;
  }

  body {
    padding-top: 4.4rem !important;
  }

  /* ============================================
     MOBILE HERO SECTION - COMPLETE REDESIGN
     Matches Figma: Catalysts theme, centered layout
     ============================================ */

  /* Mobile Header - Logo left, Hamburger right */
  #header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 1rem 1.5rem !important;
    background-color: #4845E4 !important;
  }

  /* Mobile Logo - Left Side */
  #header .mobile-logo {
    display: block !important;
    order: 1;
    z-index: 1001;
  }

  #header .mobile-logo img {
    width: 60px !important;
    height: auto;
  }

  /* Hide Desktop Elements on Mobile */
  #header .desktop-nav,
  #header .lbox,
  #header .actionbox {
    display: none !important;
  }

  /* Mobile Hamburger Menu - Right Side */
  #header .mobile-menu-toggle {
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    order: 3;
    z-index: 3000 !important;
    pointer-events: auto !important;
  }

  #header .mobile-menu-toggle .hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #ffffff;
    border-radius: 2px;
    transition: all 0.3s ease;
  }

  /* Mobile Off-Canvas Menu Overlay */
  .mobile-menu-overlay {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 1998;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile Off-Canvas Menu */
  .mobile-menu {
    display: block !important;
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 70%;
    background-color: #3d3b52;
    z-index: 1999;
    transition: right 0.3s ease;
    overflow-y: auto;
    padding: 2.5rem 2rem;
  }

  .mobile-menu.active {
    right: 0;
  }

  /* Mobile Menu Header */
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
    padding-bottom: 0;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
  }

  .mobile-menu-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .mobile-menu-title {
    font-family: "Unbounded", sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
  }

  .mobile-menu-close {
    background: none;
    border: none;
    color: #ffffff;
    font-size: 5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.5rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -0.5rem -0.5rem 0 0;
  }

  /* Mobile Menu Links */
  .mobile-menu-links {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 1.5rem;
    text-align: start;
    font-size: large;
  }

  .mobile-menu-links li {
    margin-bottom: 1.5rem;
  }

  .mobile-menu-links li a {
    display: block;
    padding: 0.5rem 0;
    color: #ffffff;
    font-family: "Afacad", sans-serif;
    font-size: 1.125rem;
    font-weight: 400;
    text-decoration: none;
    transition: color 0.3s ease, padding-left 0.3s ease;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.05); */
  }

  .mobile-menu-links li a:hover {
    color: #00B4BD;
    padding-left: 0.5rem;
  }

  /* Hero Section - Dog Logo */
  .hero-logo {
    position: relative !important;
    top: 50px !important;
    left: 0 !important;
    margin: 2rem auto 0 auto !important;
    width: 60vw !important;
    max-width: 180px !important;
    height: auto !important;
    transform: none !important;
    z-index: 6 !important;
    display: block !important;
  }

  /* Tagline and Main Heading - "We are your CATALYSTS" */
  .tagline {
    font-size: 9rem !important;
    font-weight: 400 !important;
    text-align: center !important;
    margin: -15rem auto 0 auto !important;
    padding: 0 !important;
    color: #ffffff !important;
  }

  .auto-type,
  .hero-title {
    font-size: rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-align: center !important;
    margin: 0 auto 0 auto !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    color: #ffffff !important;
    display: block !important;
  }

  /* Override any left-aligned styles */
  h1.hero-title,
  .text-start.ms-5 {
    text-align: center !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  /* Three Solution Badges - Vertical stacked layout matching Figma */
  .keywords-section {
    margin: 0 auto 1.5rem auto !important;
    padding: 0 1rem !important;
    display: block !important;
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
    text-align: center !important;
  }

  .keywords {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    flex-wrap: nowrap !important;
    position: relative !important;
    left: 0 !important;
  }

  .badge {
    background-color: transparent !important;
    /* border: 2px solid #AAAFFF !important; */
    color: #ffffff !important;
    font-size: 5rem !important;
    font-weight: 400 !important;
    padding: 0.875rem 2rem !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: block !important;
    margin: 0 !important;
    cursor: pointer !important;
    transform: none !important;
    width: 85% !important;
    max-width: 320px !important;
    height: auto !important;
    text-align: center !important;
    scale: 1 !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
  }

  /* Remove individual positioning for stacked layout */
  .bd1 {
    width: 100px !important;
    height: 100px !important;
    max-width: 900px !important;
    margin: 5.5rem auto 0.5rem 0 !important;
    margin-left: 25% !important;
    transform: rotate(-0.5deg) !important;
    -webkit-transform: rotate(-0.5deg) !important;
    -moz-transform: rotate(-0.5deg) !important;
    /* border: 2px solid #F9AC8D !important; */
    border-color: #F9AC8D !important;
    color: #F9AC8D !important;
    background-color: transparent !important;
    height: auto !important;
    padding: 1rem 3rem !important;
    font-size: 5rem !important;
    display: block !important;
  }

  .bd2 {
    width: 100px !important;
    max-width: 900px !important;
    margin: -1.5rem auto 0.1rem 0 !important;
    margin-left: 37% !important;
    transform: rotate(0.5deg) !important;
    -webkit-transform: rotate(0.5deg) !important;
    -moz-transform: rotate(0.5deg) !important;
    /* border: 2px solid #AAAFFF !important; */
    border-color: #F9AC8D !important;
    color: #F9AC8D !important;
    background-color: transparent !important;
    height: auto !important;
    padding: 1rem 3rem !important;
    font-size: 5rem !important;
    display: block !important;
  }

  .bd3 {
    width: 100px !important;
    max-width: 900px !important;
    margin: -1rem 0 0.5rem auto !important;
    margin-right: 35% !important;
    transform: rotate(8deg) !important;
    -webkit-transform: rotate(8deg) !important;
    -moz-transform: rotate(8deg) !important;
    /* border: 2px solid #AAAFFF !important; */
    border-color: #F9AC8D !important;
    color: #F9AC8D !important;
    background-color: transparent !important;
    height: auto !important;
    padding: 1rem 3.5rem !important;
    font-size: 8rem !important;
    display: block !important;
  }

  /* Show Discover button on mobile - positioned near badges */
  .discover-btn {
    display: block !important;
    margin-top: -22rem !important;
    /* margin: -10rem auto 2rem auto !important; */
    padding-top: 0 !important;
    font-size: 1.5rem !important;
    padding: 1.5rem 3rem !important;
  }

  /* Hero description text */
  .hero-desc-desktop {
    display: none !important;
  }

  .hero-desc-mobile {
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    line-height: 1.6 !important;
    text-align: center !important;
    color: #ffffff !important;
    padding: 0 2rem !important;
    margin: 0 auto 3rem auto !important;
    max-width: 100% !important;
    display: block !important;
  }

  .hero-desc-mobile br {
    display: inline !important;
  }

  /* Learn More button and icon group */
  .hero-section2 .d-flex {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1rem !important;
    margin: 0 auto 3rem auto !important;
    padding: 0 1rem !important;
  }

  .hero-section2 .pill {
    font-size: 1rem !important;
    padding: 0.75rem 2rem !important;
    border: 1px solid #ffffff !important;
    border-radius: 30px !important;
    color: #ffffff !important;
    background-color: transparent !important;
    text-decoration: none !important;
  }

  .hero-section2 .ico {
    width: 42px !important;
    height: 42px !important;
    background-color: #0E00BF !important;
    border-radius: 50% !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hero sections general */
  .hero-section,
  .hero-section2 {
    min-height: auto !important;
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
    position: relative !important;
    overflow: visible !important;
  }

  /* Content padding adjustment */
  .content-pad {
    padding: 0 1rem !important;
  }

  .hero-desc-mobile {
    margin-top: 12rem !important;
    padding: 1rem !important;
  }

  /* Ensure the decorative SVG wave sits below the hero and does not overlap */
  .waveimg1 {
    margin-top: -2rem !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .hero-section2>svg {
    position: absolute !important;
    top: 40vw !important;
    left: 0 !important;
    /* width: 150% !important; */
    height: 100vw !important;
    /* z-index: 0 !important; */
    /* transform: scale(1.5) !important; */
    transform-origin: center top !important;
  }

  .hero-bg>svg,
  .hero-bg svg {
    position: absolute !important;
    bottom: -250vw !important;
    left: 0 !important;
    width: 150% !important;
    height: 200vw !important;
    z-index: 0 !important;
    transform: scale(1.5) !important;
    transform-origin: center bottom !important;
  }

  #wavePath {
    stroke: #0E00BF !important;
    stroke-width: 55 !important;
    padding-bottom: 250vw !important;
    fill: none !important;
  }

  /* ========================================== 
     CUSTOMER JOURNEY SECTION - MOBILE RESPONSIVE (Figma Match)
     ========================================== */

  /* Journey Section Container */
  .journey-section {
    padding: 3rem 1rem 4rem 1rem !important;
    height: auto !important;
    position: relative !important;
    top: 0 !important;
    overflow: hidden !important;
  }

  /* Heading container - uses flexbox for reordering */
  .journey-section .content-pad {
    display: flex !important;
    flex-direction: column !important;
  }

  .journey-section .tableft {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
  }

  /* CUSTOMER JOURNEY label comes FIRST */
  .journey-section .solutions-home {
    order: 1 !important;
    font-size: 1.7rem !important;
    font-weight: 600 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: #00B4BD !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
    display: block !important;
  }

  /* Main heading "Turn Challenges Into Scalable Solutions" comes SECOND */
  .journey-section .section-titles {
    order: 2 !important;
    font-size: 2rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin: 0 0 2rem 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-family: "Unbounded", sans-serif !important;
    position: relative !important;
    width: 100% !important;
  }

  /* Remove the br tag effect and make it flow naturally */
  .journey-section .section-titles br {
    display: none !important;
  }

  /* Cards container comes third - horizontal slider */
  .journey-section .row {
    order: 3 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 1.25rem !important;
    padding: 0 0.5rem 1rem 0.5rem !important;
    margin: 0 -1rem !important;
    padding-left: 1rem !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .journey-section .row::-webkit-scrollbar {
    display: none !important;
  }

  /* Individual card columns */
  .journey-section .col-3 {
    flex: 0 0 auto !important;
    width: auto !important;
    padding: 0 !important;
  }

  /* Journey Cards - Large, tall mobile design matching Figma */
  .jcard-home {
    min-width: 80vw !important;
    max-width: 80vw !important;
    width: 80vw !important;
    height: auto !important;
    min-height: 280px !important;
    padding: 2rem 1.5rem !important;
    border: 2px solid #F9AC8D !important;
    border-radius: 20px !important;
    background-color: #262138 !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
    position: relative !important;
  }

  /* Mobile tap/active state for touch feedback */
  .jcard-home:active {
    transform: scale(0.98) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  }

  /* Icon size - large and prominent matching Figma */
  .jcard-home .jimg {
    width: 50px !important;
    height: 50px !important;
    margin-bottom: 1.25rem !important;
  }

  /* Stage label - "STAGE 1" matching Figma */
  .jcard-home .stageno-home {
    font-size: 1.1rem !important;
    color: #C5C5C5 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 0.875rem !important;
    margin-top: 2rem !important;
    font-weight: 600 !important;
  }

  /* Card title - "Assess & Align" - Large, bold, and prominent */
  .jcard-home-title {
    font-size: 2.3rem !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #ffffff !important;
    margin: 0 !important;
    font-family: "Unbounded", sans-serif !important;
  }

  /* Remove the br effect on mobile for better control */
  .jcard-home-title br {
    display: inline !important;
  }

  /* Card description text - hidden by default */
  .jcard-home-text {
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    color: #ffffff !important;
    opacity: 0 !important;
    margin-top: 1.25rem !important;
    display: none !important;
  }

  /* Hover/Active state for cards - Mobile touch support */
  .jcard-home:hover,
  .jcard-home:active,
  .jcard-home:focus {
    background-color: #4048D1 !important;
  }

  .jcard-home:hover .stageno-home,
  .jcard-home:hover .jcard-home-title,
  .jcard-home:active .stageno-home,
  .jcard-home:active .jcard-home-title,
  .jcard-home:focus .stageno-home,
  .jcard-home:focus .jcard-home-title {
    opacity: 0 !important;
    display: none !important;
  }

  .jcard-home:hover .jcard-home-text,
  .jcard-home:active .jcard-home-text,
  .jcard-home:focus .jcard-home-text {
    opacity: 1 !important;
    display: block !important;
  }

  /* Add touch-action for better mobile interaction */
  .jcard-home {
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Learn More button section comes fourth - Aligned to left */
  .journey-section .text-center {
    order: 4 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.625rem !important;
    margin-top: 3rem !important;
    padding: 0 1.25rem !important;
    width: 100% !important;
  }

  /* Learn More button styling - Figma exact match */
  .learn-more-btn {
    padding: 2.5rem 4.5rem !important;
    size: 80px !important;
    font-size: 5rem !important;
    font-weight: 400 !important;
    border: 2px solid #ffffff !important;
    border-radius: 50px !important;
    background-color: transparent !important;
    color: #ffffff !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    height: 2.8rem !important;
    width: 8rem !important;
    letter-spacing: 0.2px !important;
  }

  .learn-more-btn:hover,
  .learn-more-btn:active {
    background-color: #ffffff !important;
    color: #262138 !important;
  }

  /* Arrow icon button - Circular blue background matching image 2 */
  .journey-section .ico {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    background-color: #5B52FF !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    object-fit: contain !important;
    overflow: hidden !important;
    float: left !important;
    margin-right: 1rem !important;
  }

  /* Ensure the icon image inside fills properly */
  .journey-section .ico img {
    width: 60% !important;
    height: 60% !important;
    object-fit: contain !important;
  }

  /* Featured Case Study: horizontal scroll cards */
  .case-cards .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 0.8rem !important;
    padding-bottom: 1rem !important;
    scroll-snap-type: x mandatory !important;
  }

  .case-cards .col-6 {
    flex: 0 0 auto !important;
    width: 80% !important;
    max-width: 420px !important;
  }

  .fcase {
    scroll-snap-align: center !important;
    min-width: 80% !important;
  }

  /* Featured solution tiles in the solutions section (three-card row) also scroll horizontally on mobile */
  .solutions-bg .row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 1rem !important;
    scroll-snap-type: x mandatory !important;
  }

  .solutions-bg .col-4 {
    flex: 0 0 auto !important;
    width: 76% !important;
    max-width: 420px !important;
    scroll-snap-align: center !important;
  }

  /* Hide scrollbar while allowing scroll (visual cleanup) */
  .journey-section .row::-webkit-scrollbar,
  .case-cards .row::-webkit-scrollbar,
  .solutions-bg .row::-webkit-scrollbar {
    height: 8px;
  }

  .journey-section .row::-webkit-scrollbar-thumb,
  .case-cards .row::-webkit-scrollbar-thumb,
  .solutions-bg .row::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
  }

  /* Make Learn More button centered below the journey cards */
  .learn-more-btn {
    display: block !important;
    margin: 1rem auto !important;
  }

  /* Keywords (badges) reposition to be inline under hero */

  .keywords {
    position: relative !important;
    top: -20rem !important;
    left: 0 !important;
    width: 100% !important;
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding: 0.75rem 1rem 0 1rem;
    justify-content: center;
  }

  .badge {
    font-size: 0.85rem !important;
    padding: 6px 10px !important;
    scale: 1 !important;
  }

  /* Reduce stroke weight of svg paths on mobile for clarity */
  path {
    stroke-width: 6 !important;
  }

  /* Hero description readable size */
  .hero-desc-mobile {
    font-size: 1.25rem !important;
    padding-top: -10rem !important;
  }

  /* ============================================
     OUR SOLUTIONS SECTION - MOBILE REDESIGN
     Matches Figma: Vertical card stacking, no center image
     ============================================ */

  /* Solutions section container - push down to create space */
  .solutions-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin-top: 5rem !important;
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }

  /* Solution content wrapper */
  .solutions-section .content-pad {
    padding: 0 1rem !important;
    display: block !important;
  }

  /* Override tableft padding on mobile for solutions section */
  .solutions-section .tableft {
    padding-left: 0 !important;
    text-transform: uppercase;
  }

  /* Section labels and titles - ensure visibility and proper positioning */
  .solutions-section .solutions-tag,
  .solutions-tag {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    font-size: 1.6rem !important;
    font-weight: 600 !important;
    color: #F9AC8D !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
    /* text-align: left !important; */
    padding-left: 18px !important;
  }

  .solutions-section .section-title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    font-size: 1.8rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
    margin-bottom: 2.5rem !important;
    margin-top: 0 !important;
    text-align: left !important;
    padding-left: 18px !important;
  }

  /* Ensure line breaks work */
  .solutions-section .section-title br {
    display: block !important;
  }

  /* Solution cards wrapper */
  .solutions-bg {
    display: block !important;
    padding-top: 0 !important;
  }

  /* Solution cards container - vertical stacking */
  .solutions-bg .row {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
    align-items: center !important;
    width: 100% !important;
  }

  .solutions-bg .col-4 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 1rem !important;
  }

  /* Hide the center image and Get Started button on mobile */
  #greencardpic,
  .solutions-bg .col-4:nth-child(2),
  #greencard1+.col-4 {
    display: none !important;
  }

  /* Solution card styling - full width, teal background */
  .solution-cards {
    width: 100% !important;
    height: auto !important;
    min-height: 200px !important;
    margin: 0 !important;
    padding: 2rem 1.75rem !important;
    border-radius: 20px !important;
    background-color: #00B4BD !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  /* Card heading - large and bold */
  .solution-cards .Scard {
    font-size: 2rem !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: #ffffff !important;
    margin-bottom: 2.5rem !important;
    padding: 0 !important;
  }

  /* Card description text - smaller and subtle */
  .solution-cards p {
    font-size: 1rem !important;
    font-family: Poppins, Helvetica !important;
    /* font-weight: 500 !important; */
    color: #ffffff !important;
    margin: 0 !important;
  }

  /* Arrow icon - bottom right, blue circular background matching SVG */
  .solution-cards .ico {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    background-color: #0E00BF !important;
    border-radius: 50% !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
  }

  /* Bottom row with text and icon */
  .solution-cards .row.h-25 {
    height: auto !important;
    margin-top: auto !important;
  }

  .solution-cards .row.h-75 {
    height: auto !important;
    margin-bottom: auto !important;
  }

  .solution-cards .d-flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  /* Journey cards stacked and readable */
  .jcard-home,
  .jcard {
    width: calc(100% - 2rem) !important;
    height: auto !important;
    margin: 0.8rem auto !important;
    padding: 1rem !important;
  }

  .jimg {
    width: 8vw !important;
    height: auto !important;
    margin-bottom: 0.6rem !important;
  }

  /* Tiles & case cards scale down */
  .fimg {
    height: auto !important;
  }

  /* ------------------------ ABOUT SECTION (responsive) ------------------------ */
  /* Default mobile: stack for very narrow screens */
  .about-section {
    padding: 2rem 0 1rem 0 !important;
  }

  /* only target the main about row (text + image) so metrics row keeps its layout */
  .about-section .about-main-row {
    display: flex !important;
    gap: 1rem !important;
  }

  .about-section img {
    width: 100% !important;
    height: auto !important;
    border-radius: 12px;
  }

  /* reset the global about-text negative margin so mobile spacing is stable */
  .about-section .about-text {
    margin-top: 0 !important;
    padding-right: 0.6rem !important;
  }

  /* -------------------- FEATURED CASE STUDY (mobile) --------------------- */
  .case-study .section-Title,
  .case-study .highlight-case {
    text-align: center !important;
  }

  .case-cards {
    padding: 0.6rem 0 !important;
  }

  .fcase {
    min-width: 80% !important;
    max-width: 420px !important;
    border-radius: 10px !important;
    padding: 0.8rem !important;
  }

  .fcase .fimg {
    width: 100% !important;
    height: auto !important;
    border-radius: 10px !important;
  }

  .view-all-btn {
    display: block !important;
    margin: 1rem auto !important;
  }

  /* ============================================
   FOOTER - MOBILE LAYOUT (max-width: 767px)
   Figma Pixel-Perfect Design
   ============================================ */
  @media (max-width: 767px) {

    /* Footer container */
    .footer {
      background-color: #4048D1;
      padding: 40px 24px;
      width: 100%;
      box-sizing: border-box;
    }

    /* Footer flex container - single column layout */
    .footer-fx {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      width: 100%;
      padding: 4rem;
    }

    /* Logo section - larger and centered */
    .footer-logo {
      width: 100%;
      text-align: center;
      padding: 0;
      margin-bottom: 40px;
    }


    .footer-logo img {
      width: 60% !important;
      height: auto;
      /* max-width: 120px !important; */
      margin: 0 auto 40px auto !important;
      display: block;
      padding: 0 !important;
      scale: 1.4 !important;
    }

    .footer-logo .title {
      font-family: "Unbounded", sans-serif;
      font-size: 24px !important;
      font-weight: 700;
      color: #ffffff;
      text-align: center;
      margin: 0;
      letter-spacing: 2px;
      padding: 0 !important;
    }

    /* Navigation links - left aligned */
    .footer-links {
      width: 100%;
      text-align: left;
      padding: 0 22px;
      margin-bottom: 40px;
    }

    .footer-links ul {
      list-style: none;
      padding: 0 !important;
      margin: 0;
      text-align: left !important;
    }

    .footer-links ul li {
      margin: 16px 0 !important;
      padding: 0;
      text-align: left;
    }

    .footer-links ul li a {
      font-family: "Afacad", sans-serif;
      font-size: 16px !important;
      font-weight: 400;
      color: #ffffff;
      text-decoration: none;
      transition: opacity 0.3s ease;
    }

    .footer-links ul li a:hover {
      opacity: 0.8;
    }

    /* Contact info section - left aligned */
    .contact-info {
      width: 100%;
      text-align: left;
      padding: 0 22px;
      margin: 0;
    }

    .contact-info ul {
      list-style: none;
      padding: 0 !important;
      margin: 0;
      text-align: left !important;
    }

    .contact-info ul li {
      margin: 12px 0 !important;
      padding: 0;
      text-align: left;
    }

    .contact-info ul li.ctlink {
      font-family: "Poppins", sans-serif;
      font-size: 20px !important;
      font-weight: 400;
      color: #ffffff;
      line-height: 1.5;
    }

    /* "Contact Us" heading */
    .contact-info ul li.ctlink:first-child {
      font-size: 20px !important;
      font-weight: 700;
      margin-top: 0 !important;
      margin-bottom: 20px !important;
    }

    /* Phone number */
    .contact-info ul li.ctlink:nth-child(2) {
      margin-top: 8px !important;
    }

    /* "Location:" heading */
    .contact-info ul li.ctlink:nth-last-child(5) {
      font-size: 20px !important;
      font-weight: 400;
      /* margin-top: 40px !important;
      margin-bottom: 20px !important; */
    }

    /* Copyright bar */
    .cpw {
      background-color: #0000bf;
      padding: 16px 20px !important;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      font-family: Poppins, sans-serif;
      font-size: 20px !important;
      font-weight: 400;
      color: #ffffff;
      margin: 0;
      position: relative !important;
    }

    .cpw a {
      color: #ffffff;
      text-decoration: none;
    }

    .cpw a:hover {
      opacity: 0.8;
    }

    /* .footer-logo{
      width : 30% !important
    } */
  }

  /* ============================================
   END MOBILE FOOTER
   ============================================ */

  /* -------------------------- CTA tweaks for mobile ------------------------- */
  .cta-mod {
    width: calc(100% - 2rem) !important;
    margin: 1rem auto !important;
    border-radius: 12px !important;
    padding: 1rem !important;
  }

  .cta-left {
    font-size: 1.2rem !important;
  }

  .cta-right {
    font-size: 0rem !important;
  }

  /* Make header action buttons compact */
  .actionbox {
    width: auto !important;
    text-align: right !important;
  }

  .pill {
    font-size: 0.9rem !important;
    padding: 0.4rem 0.8rem !important;
  }

  /* Center discover / CTA buttons and prevent overlap */
  .discover-btn .learn-more-btn,
  .get-started-btn,
  .view-all-btn {
    display: inline-block !important;
    position: static !important;
    margin: 0.6rem auto !important;
  }

  /* Keep hero title and typed text from being hidden under header */
  .hero-title,
  .auto-type {
    margin-top: 0.4rem !important;
  }

  @media (max-width: 600px) {
    .case-study-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 24px 16px;
      border-radius: 20px;
      border: 2px solid #fff;
      background: #231f36;
      width: 90%;
      margin: 32px auto 16px auto;
    }

    .case-study-title {
      text-align: center;
      font-size: 1.5rem;
      margin-bottom: 16px;
      color: #fff;
      font-weight: 600;
    }

    .case-study-image {
      width: 100%;
      max-width: 300px;
      border-radius: 16px;
      margin-bottom: 16px;
      display: block;
    }

    .case-study-btn-wrap {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-bottom: 32px;
    }

    .view-all-btn {
      background: #231f36;
      color: #fff;
      border: 2px solid #fff;
      border-radius: 20px;
      padding: 12px 32px;
      font-size: 1rem;
      cursor: pointer;
      text-align: center;
      width: fit-content;
    }
  }

  /* Reduce large absolute-positioned decorative images so they don't overflow */
  .c1,
  .c2,
  .c3 {
    display: none !important;
  }

  /* Fix popup min sizes that break on mobile (keep desktop rules intact) */
  .pop-up {
    min-width: auto !important;
    left: auto !important;
    margin: 1rem !important;
    padding: 0.5rem !important;
  }

  .pop-up .service-background {
    width: 100% !important;
    height: auto !important;
  }

  /* Small tweaks for map and map markers */
  .map-container {
    width: 100% !important;
    padding: 0.5rem !important;
  }

  .map-map {
    height: auto !important;
  }

  /* Reduce the hero block 3D scene height on mobile so it doesn't push content too far */
  .pageheader__scene {
    height: 22vh !important;
  }

  /* Reduce journey-section padding (desktop used very large padding) */
  .journey-section {
    padding: 6rem 1rem !important;
    height: auto !important;
  }

  /* Make sure CTA module doesn't create huge bottom gaps on mobile */
  .cta-mod {
    margin-bottom: 2rem !important;
  }
}

/* Strong mobile layout for CTA card to match reference image */
@media (max-width: 480px) {
  .cta-section {
    top: 0 !important;
    padding: 2rem 1rem !important;
  }

  .cta-mod {
    width: calc(100% - 2rem) !important;
    max-width: 500px !important;
    margin: 1rem auto !important;
    border-radius: 32px !important;
    padding: 2.5rem 1.5rem !important;
    margin-top: 1rem !important;
    margin-bottom: 1.5rem !important;
    background-color: #00B4BD !important;
  }

  .cta-mod .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1.5rem !important;
  }

  .cta-left {
    font-family: "Unbounded", sans-serif !important;
    font-size: 8rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    line-height: 1.5em !important;
    color: #262138 !important;
    margin-bottom: 0 !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
    padding-left: 30px !important;
    padding-top: 20px !important;
  }

  .cta-right-desktop {
    display: none !important;
  }

  .cta-right-mobile {
    display: block !important;
    color: #ffffff !important;
    font-size: 5rem !important;
    text-align: start !important;
    margin-bottom: 0 !important;
    font-weight: 300 !important;
    text-align: left !important;
    padding-right: 30px !important;
    /* margin-left: 0 !important; */
  }

  .cta-mod .text-start {
    display: flex !important;
    /* align-items: center !important;  */
    justify-content: flex-start !important;
    gap: 0.75rem !important;
    /* margin-top: 0.5rem !important; */
    /* padding-left: 0 !important; */
    margin-left: -0.5rem !important;
  }

  .cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50px !important;
    padding: 0.7rem 1.8rem !important;
    background: transparent !important;
    color: #262138 !important;
    border: 2px solid #262138 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
  }

  .cta-mod .ico {
    width: 42px !important;
    height: 42px !important;
    background-color: #5D3FD3 !important;
    border-radius: 50% !important;
    padding: 10px !important;
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
}

/* ============================================
   TABLET VIEW (769px to 1024px)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* General Layout */
  .content-pad {
    padding-left: 5vw;
    padding-right: 5vw;
  }

  /* Header/Navbar */
  .mlogo {
    width: 8vw;
  }

  .pill {
    font-size: 1.5vw;
    padding: 8px 18px;
  }

  /* Hero Section (SOLVSTRAT Title) */
  .tagline {
    font-size: 3vw;
  }

  .hero-title {
    font-size: 8vw;
  }

  /* Solution Badges (Making them wider than mobile) */
  .keywords-section {
    width: 70%;
    margin: 0 auto;
  }

  .badge {
    width: 100%;
    font-size: 18px;
    padding: 12px 20px;
    margin-bottom: 15px;
  }

  /* Discover Section Text */
  .hero-desc-mobile {
    display: none !important;
  }

  .hero-desc-desktop {
    display: block !important;
    font-size: 3.5rem !important;
    max-width: 80%;
    margin: 0 auto 30px auto;
    line-height: 1.6;
  }

  /* Customer Journey Cards (Switch to 2x2 grid) */
  .journey-section .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .journey-section .col-3 {
    width: 49%;
    margin-bottom: 25px;
  }

  .jcard-home-title {
    font-size: 3.5vw;
  }

  .jcard-home-text {
    font-size: 1.5vw;
  }

  .learn-more-btn {
    font-size: 1.5vw !important;
  }

  /* About Section (Why Solvstrat?) */
  .about-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-heading,
  .about-label,
  .about-description {
    text-align: center;
    max-width: 80%;
    margin: 0 auto 20px auto;
  }

  .about-image-wrapper {
    width: 80%;
    margin-top: 30px;
  }

  /* CTA Section */
  .cta-mod .row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }

  .cta-mod .col-6 {
    width: 50%;
  }

  .cta-left {
    font-size: 3.5vw;
    font-weight: 600;
    line-height: 1.2;
  }

  .cta-right-desktop,
  .cta-btn {
    font-size: 1.5vw;
  }

  /* Footer */
  .footer-fx {
    font-size: 1.5vw;
  }

  .footer-logo img {
    scale: 1;
    width: 80px;
  }
}

/* ============================================
   LARGE SCREEN VIEW (min-width: 1440px)
   ============================================ */
@media (min-width: 1440px) {

  /* Global Containers */
  .content-pad {
    /* max-width: 1200px; */
    margin: 0 auto;
    /* padding-left: 6vw; */
    /* padding-right: 6vw; */
  }


  .footer-logo img {
    width: 30% !important;
    /* scale: 0 !important; */

  }


  /* Header/Navbar */
  .mlogo {
    width: 4vw;
    scale: 1.2;
  }

  .pill {
    padding: 10px 30px;
    font-size: 1.1rem;
  }

  /* Hero Section (SOLVSTRAT Title) */
  .hero-title {
    font-size: 8.5vw;
  }

  /* Discover Section Text */
  .hero-desc-desktop {
    font-size: 4.5rem !important;
    max-width: 70%;
    margin-top: -200px;
  }

  /* About Section (Why Solvstrat?) */
  .about-wrapper {
    display: grid;
    grid-template-columns: 45% 55%;
    gap: 100px;
  }

  .about-heading {
    font-size: 4.5vw;
  }

  .about-description {
    font-size: 1.3rem;
  }

  .about-image-wrapper {
    max-width: 100%;
  }

  /* Customer Journey Cards */
  .jcard-home-title {
    font-size: 1.8rem;
  }

  /* CTA Section */
  .cta-left {
    font-size: 2.5vw;
    font-weight: 600;
  }

  .cta-right-desktop {
    font-size: 1.4rem;
  }

  /* Footer */
  .footer-fx {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .footer-links li,
  .contact-info li {
    font-size: 1.1rem;
  }
}

/* Accessibility helper: ensure focus-visible styles remain strong on small screens */
:focus {
  outline-color: #00B4BD;
  outline-style: solid;
  outline-width: 3px;


  /* Mobile-specific layout for Services page (matches Figma) */
  @media (max-width: 768px) {

    /* Header: logo left, hamburger right */
    header#header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 12px 16px !important;
      height: auto !important;
    }

    /* Hide desktop nav and action box on mobile (we'll use hamburger) */
    header#header .navbar {
      display: none !important;
    }

    header#header .actionbox {
      display: none !important;
    }

    /* Brand logo size on mobile */
    header#header .lbox img.slogo {
      height: 28px !important;
      width: auto !important;
      display: block !important;
    }

    /* Mobile hamburger button (inline SVG white icon) */
    .mobile-menu-btn {
      display: block !important;
      width: 36px;
      height: 36px;
      background-color: transparent;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><rect y='4' width='24' height='2' fill='%23ffffff'/><rect y='11' width='24' height='2' fill='%23ffffff'/><rect y='18' width='24' height='2' fill='%23ffffff'/></svg>");
      background-repeat: no-repeat;
      background-position: center;
      border: none;
      cursor: pointer;
    }

    /* Label "SERVICES" (centered peach/orange) */
    .hero-section .solutions-tag,
    .solutions-tag {
      color: #FFAA00 !important;
      font-size: 14px !important;
      font-weight: 600 !important;
      letter-spacing: 1px !important;
      text-transform: uppercase !important;
      text-align: center !important;
      display: block !important;
      margin: 10px 0 8px 0 !important;
      width: 100% !important;
    }

    /* Main headline centered, large, uppercase */
    .hero-section .ctpg-title,
    .ctpg-title {
      color: #FFFFFF !important;
      font-size: 32px !important;
      font-weight: 800 !important;
      line-height: 1.2 !important;
      text-transform: uppercase !important;
      text-align: center !important;
      margin: 0 0 30px 0 !important;
      padding: 0 12px !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    /* Feature image: centered, rounded, constrained width */
    .hero-section .col-6 img.img-fluid,
    .hero-section .hero-bg img.img-fluid,
    .hero-section .hero-image img {
      width: 90% !important;
      max-width: 380px !important;
      height: auto !important;
      border-radius: 20px !important;
      display: block !important;
      margin: 0 auto 30px auto !important;
      overflow: hidden !important;
    }

    /* Description text: centered, constrained width */
    .hero-section p.service-lead,
    .hero-section .service-lead,
    .hero-section .hero-desc {
      color: #FFFFFF !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      line-height: 1.6 !important;
      text-align: center !important;
      max-width: 90% !important;
      margin: 0 auto 30px auto !important;
      padding: 0 12px !important;
      box-sizing: border-box !important;
    }

    /* Force vertical stacking for hero content and reset any page-level offsets */
    .hero-section .content-pad,
    .hero-section .hero-bg {
      display: block !important;
      width: 100% !important;
      padding-top: 6vw !important;
      position: static !important;
      top: 0 !important;
    }

    /* Ensure the bootstrap row and columns stack and center on mobile */
    .hero-section .hero-bg .row {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
    }

    .hero-section .hero-bg .col-6 {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      text-align: center !important;
    }

    /* Remove any inline left padding on the title and center it */
    .hero-section .ctpg-title,
    .ctpg-title {
      padding-left: 0 !important;
      margin-left: 0 !important;
      text-align: center !important;
      font-size: 34px !important;
    }

    /* Make sure service-lead paragraph centers and doesn't float */
    .p-4.fs-5.m-4.text-start.service-lead,
    p.service-lead {
      display: block !important;
      float: none !important;
      margin-left: auto !important;
      margin-right: auto !important;
    }
  }

  /* ============================================
   COMMITMENT TO EXCELLENCE - MOBILE REDESIGN
   Figma Centered Layout
   ============================================ */

  @media (max-width: 768px) {

    /* 1. Container - Flex Column, Centered */
    #cta.content-pad,
    section#cta.ctpg-bg2,
    .ctpg-bg2#cta {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      padding: 40px 20px !important;
      background-color: #262138 !important;
      width: 100% !important;
      box-sizing: border-box !important;
    }

    .ctpg-bg2 .content-pad {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: 100% !important;
      padding: 0 !important;
    }

    /* 2. Headline - "Commitment To Excellence" */
    .ctpg-bg2 .about-tag,
    .ctpg-bg2 h2.about-tag,
    section#cta .about-tag,
    section[id*="cta"] .about-tag {
      color: #00C2CB !important;
      /* Teal/Cyan */
      font-family: "Unbounded", sans-serif !important;
      font-size: 28px !important;
      font-weight: 800 !important;
      /* Extra Bold */
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
      text-align: center !important;
      margin: 0 0 20px 0 !important;
      padding: 0 !important;
      line-height: 1.1 !important;
    }

    /* 3. Body Text - "At SolvStrat..." */
    .ctpg-bg2 p,
    .ctpg-bg2 .text-start p,
    section#cta p,
    section[id*="cta"] p {
      color: #FFFFFF !important;
      font-family: "Afacad", sans-serif !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      line-height: 1.6 !important;
      text-align: center !important;
      width: 90% !important;
      max-width: 90% !important;
      margin: 0 auto 30px auto !important;
      padding: 0 !important;
    }

    /* Remove line breaks in paragraphs for mobile */
    .ctpg-bg2 p br,
    section#cta p br {
      display: none !important;
    }

    /* 4. Buttons Container - Flex Row, Centered */
    .ctpg-bg2 .text-start,
    .ctpg-bg2 .button-group,
    section#cta .text-start {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 15px !important;
      width: 100% !important;
      margin-top: 20px !important;
      flex-wrap: wrap !important;
    }

    /* "Learn More" Button */
    .ctpg-bg2 .pill,
    .ctpg-bg2 a.pill,
    section#cta .pill {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 10px 25px !important;
      background-color: transparent !important;
      border: 1px solid #FFFFFF !important;
      border-radius: 50px !important;
      color: #FFFFFF !important;
      font-family: "Afacad", sans-serif !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      text-decoration: none !important;
      transition: all 0.3s ease !important;
      white-space: nowrap !important;
      margin: 0 !important;
    }

    .ctpg-bg2 .pill:hover,
    .ctpg-bg2 a.pill:hover,
    section#cta .pill:hover {
      background-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* Arrow Icon Circle */
    .ctpg-bg2 .ico,
    .ctpg-bg2 img.ico,
    section#cta .ico {
      width: 50px !important;
      height: 50px !important;
      min-width: 50px !important;
      min-height: 50px !important;
      background-color: #4856DF !important;
      border-radius: 50% !important;
      padding: 12px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
      flex-shrink: 0 !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
    }

    .ctpg-bg2 .ico:hover,
    .ctpg-bg2 img.ico:hover,
    section#cta .ico:hover {
      background-color: #3644BE !important;
      transform: scale(1.05) !important;
    }

    /* Responsive adjustments for smaller screens */
    @media (max-width: 480px) {

      #cta.content-pad,
      section#cta.ctpg-bg2,
      .ctpg-bg2#cta {
        padding: 30px 15px !important;
      }

      .ctpg-bg2 .about-tag,
      .ctpg-bg2 h2.about-tag,
      section#cta .about-tag {
        font-size: 24px !important;
      }

      .ctpg-bg2 p,
      .ctpg-bg2 .text-start p,
      section#cta p {
        font-size: 13px !important;
      }

      .ctpg-bg2 .pill,
      .ctpg-bg2 a.pill,
      section#cta .pill {
        padding: 8px 18px !important;
        font-size: 13px !important;
      }

      .ctpg-bg2 .ico,
      .ctpg-bg2 img.ico,
      section#cta .ico {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        padding: 8px !important;
      }
    }

    @media (max-width: 375px) {

      #cta.content-pad,
      section#cta.ctpg-bg2,
      .ctpg-bg2#cta {
        padding: 25px 12px !important;
      }

      .ctpg-bg2 .about-tag,
      .ctpg-bg2 h2.about-tag,
      section#cta .about-tag {
        font-size: 22px !important;
      }

      .ctpg-bg2 p,
      .ctpg-bg2 .text-start p,
      section#cta p {
        font-size: 12px !important;
        width: 95% !important;
      }
    }
  }

  /* Desktop View - Keep Original Layout */
  @media (min-width: 769px) {

    #cta.content-pad,
    section#cta.ctpg-bg2,
    .ctpg-bg2#cta {
      display: block !important;
    }

    .ctpg-bg2 .content-pad {
      display: block !important;
    }

    .ctpg-bg2 .about-tag,
    section#cta .about-tag {
      color: #00B4BD !important;
      font-size: 3vw !important;
      text-align: left !important;
    }

    .ctpg-bg2 p,
    .ctpg-bg2 .text-start p,
    section#cta p {
      font-size: 1.5vw !important;
      text-align: left !important;
    }

    .ctpg-bg2 .text-start,
    section#cta .text-start {
      display: block !important;
      text-align: left !important;
    }
  }

  /* ============================================
   LANDING PAGE - MOBILE RESPONSIVE (FIGMA DESIGN)
   Mobile View Only (max-width: 768px)
   Desktop View Remains Unchanged
   ============================================ */

  @media (max-width: 768px) {

    /* ==========================================
     1. GLOBAL LAYOUT - VERTICAL STACKING
     ========================================== */

    #hero,
    .hero-section,
    .hero-section2 {
      display: flex !important;
      flex-direction: column !important;
      min-height: auto !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow-x: hidden !important;
    }

    .content-pad {
      padding: 0 20px !important;
      width: 100% !important;
    }

    .hero-bg {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: flex-start !important;
      width: 100% !important;
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* ==========================================
     2. HEADER - LOGO + HAMBURGER MENU
     ========================================== */

    #header {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      padding: 1rem 1.5rem !important;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      z-index: 1000 !important;
      background-color: #4048D1 !important;
    }

    /* Logo - Left Side */
    #header .mobile-logo {
      display: block !important;
      width: auto !important;
      margin: 0 !important;
    }

    #header .mobile-logo img {
      width: 100px !important;
      height: auto !important;
      display: block !important;
    }

    #header .lbox {
      display: none !important;
    }

    /* Hamburger Menu - Right Side */
    #header .mobile-menu-toggle {
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      width: 30px !important;
      height: 22px !important;
      background: none !important;
      border: none !important;
      cursor: pointer !important;
      padding: 0 !important;
      z-index: 1001 !important;
    }

    #header .hamburger-line {
      width: 100% !important;
      height: 3px !important;
      background-color: #ffffff !important;
      border-radius: 2px !important;
      transition: all 0.3s ease !important;
      display: block !important;
    }

    /* Hide Desktop Elements */
    #header .desktop-nav,
    #header .actionbox,
    #header .navbar {
      display: none !important;
    }

    /* ==========================================
     3. HERO IMAGE (DOG LOGO) - CENTERED
     ========================================== */

    .hero-logo {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      transform: none !important;
      width: 65% !important;
      max-width: 280px !important;
      height: auto !important;
      margin: 30px auto 30px auto !important;
      display: block !important;
      opacity: 1 !important;
      z-index: 10 !important;
    }

    .hero-bg .text-center {
      height: auto !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* ==========================================
     4. MAIN TYPOGRAPHY - "We are SOLVSTRAT"
     ========================================== */

    .tagline {
      font-size: 24px !important;
      font-weight: 400 !important;
      text-align: center !important;
      color: #FFFFFF !important;
      margin: 0 auto 10px auto !important;
      padding: 0 20px !important;
      line-height: 1.2 !important;
      display: block !important;
    }

    .tagline br {
      display: none !important;
    }

    /* Mobile-specific styling for .highlight-mobile within .tagline */
    .tagline .highlight-mobile {
      font-size: 18px !important;
      font-weight: 400 !important;
      text-transform: lowercase !important;
      color: #FFFFFF !important;
    }

    /* Hide desktop highlight on mobile */
    .tagline .highlight-desktop {
      display: none !important;
    }

    /* Hide desktop animated title */
    .auto-type {
      display: none !important;
    }

    /* Show mobile static title */
    .mobile-hero-title {
      display: block !important;
      font-family: "Unbounded", sans-serif !important;
      font-size: 48px !important;
      font-weight: 800 !important;
      text-transform: uppercase !important;
      color: #FFFFFF !important;
      text-align: center !important;
      margin: 0 auto 50px auto !important;
      padding: 0 20px !important;
      line-height: 1.1 !important;
    }

    h2.text-start {
      text-align: center !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* ==========================================
     5. ANIMATION BADGES (PILLS) - STACKED
     ========================================== */

    .keywords-section {
      width: 100% !important;
      padding: 0 20px !important;
      margin: 0 auto 40px auto !important;
      display: block !important;
      position: static !important;
      top: auto !important;
      left: auto !important;
      clear: both !important;
    }

    .keywords {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 12px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 auto !important;
      padding: 0 !important;
      position: static !important;
      top: auto !important;
      left: auto !important;
      text-align: center !important;
      background-color: transparent !important;
    }

    .badge {
      background-color: transparent !important;
      border: 1.5px solid #F9AC8D !important;
      color: #F9AC8D !important;
      font-family: "Afacad", sans-serif !important;
      font-size: 14px !important;
      font-weight: 400 !important;
      padding: 10px 20px !important;
      border-radius: 30px !important;
      text-decoration: none !important;
      display: inline-block !important;
      margin: 0 !important;
      cursor: pointer !important;
      width: auto !important;
      max-width: fit-content !important;
      height: auto !important;
      text-align: center !important;
      transform: none !important;
      scale: 1 !important;
      white-space: nowrap !important;
    }

    /* Individual badge styling */
    .bd1 {
      width: auto !important;
      max-width: fit-content !important;
      margin: 0 0 0 15% !important;
      transform: rotate(-2deg) !important;
      padding: 10px 20px !important;
      font-size: 14px !important;
      height: auto !important;
    }

    .bd2 {
      width: auto !important;
      max-width: fit-content !important;
      margin: 0 15% 0 auto !important;
      transform: rotate(1deg) !important;
      padding: 10px 20px !important;
      font-size: 14px !important;
      height: auto !important;
    }

    .bd3 {
      width: auto !important;
      max-width: fit-content !important;
      margin: 0 auto 0 10% !important;
      transform: rotate(8deg) !important;
      padding: 10px 20px !important;
      font-size: 14px !important;
      height: auto !important;
    }

    /* ==========================================
     6. "DISCOVER" SECTION - CENTERED
     ========================================== */

    .discover-btn {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      font-size: 18px !important;
      font-weight: 500 !important;
      color: #FFFFFF !important;
      text-decoration: none !important;
      margin: 0 auto 50px auto !important;
      padding: 20px 0 !important;
      gap: 10px !important;
      clear: both !important;
    }

    .discover-btn img.ico {
      width: 50px !important;
      height: 50px !important;
      margin: 0 !important;
      display: block !important;
    }

    .discover-btn:hover {
      color: #00B4BD !important;
    }

    /* ==========================================
     7. PARAGRAPH TEXT - CENTERED & READABLE
     ========================================== */

    .hero-desc {
      font-family: "Afacad", sans-serif !important;
      font-size: 16px !important;
      font-weight: 300 !important;
      line-height: 1.6 !important;
      text-align: center !important;
      color: #FFFFFF !important;
      padding: 0 20px !important;
      margin: 0 auto 50px auto !important;
      max-width: 100% !important;
      display: block !important;
      clear: both !important;
    }

    .hero-desc br {
      display: none !important;
    }

    /* ==========================================
     8. FOOTER ACTIONS - LEARN MORE BUTTON
     ========================================== */

    .hero-section2 .hero-bg {
      position: relative !important;
      top: 0 !important;
      padding: 0 20px 40px 20px !important;
      margin: 0 !important;
      z-index: 10 !important;
    }

    .hero-section2 .d-flex,
    .hero-section2 .justify-content-center {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 15px !important;
      margin: 0 auto 60px auto !important;
      padding: 0 !important;
      flex-wrap: nowrap !important;
    }

    .hero-section2 .pill,
    .hero-section2 a.pill {
      background-color: transparent !important;
      border: 1px solid #FFFFFF !important;
      color: #FFFFFF !important;
      font-family: "Afacad", sans-serif !important;
      font-size: 16px !important;
      font-weight: 400 !important;
      padding: 12px 28px !important;
      border-radius: 30px !important;
      text-decoration: none !important;
      display: inline-block !important;
      cursor: pointer !important;
      transition: all 0.3s ease !important;
    }

    .hero-section2 .pill:hover {
      background-color: #00B4BD !important;
      border-color: #00B4BD !important;
    }

    .hero-section2 .ico,
    .hero-section2 img.ico {
      width: 50px !important;
      height: 50px !important;
      min-width: 50px !important;
      min-height: 50px !important;
      background-color: #0E00BF !important;
      border-radius: 50% !important;
      padding: 10px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      margin: 0 !important;
      scale: 1 !important;
    }

    .hero-section2 {
      position: relative !important;
      overflow: visible !important;
      padding-bottom: 60px !important;
    }

    .waveimg1 {
      position: relative !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .hero-section2 svg,
    .hero-section2>svg {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: 100% !important;
      z-index: 0 !important;
      pointer-events: none !important;
    }

    .hero-section2 svg path,
    .hero-section2 svg #wavePath {
      stroke: #0E00BF !important;
      stroke-width: 55 !important;
      fill: none !important;
      stroke-linecap: round !important;
    }

    /* Ensure content is above wave */
    .hero-section2 .hero-bg,
    .hero-section2 .content-pad {
      position: relative !important;
      z-index: 10 !important;
    }

    /* CRITICAL: Override inline style that causes overlap */
    .hero-section2 .hero-bg[style*="top"] {
      top: 0 !important;
    }

    /* Remove fixed heights */
    .hero-section,
    .hero-section2,
    .hero-bg,
    .pageheader__scene {
      min-height: auto !important;
      height: auto !important;
    }


    #hero:first-of-type,
    .hero-section:first-of-type {
      margin-top: 0 !important;
      padding-top: 20px !important;
    }

    /* Fix the small unreadable text blob */
    .hero-subtitle,
    .hero-subtitle * {
      font-size: inherit !important;
      line-height: inherit !important;
      opacity: 1 !important;
      visibility: visible !important;
    }

    /* Ensure proper vertical flow */
    .hero-section>* {
      margin-left: auto !important;
      margin-right: auto !important;
    }

    /* Hide desktop 3D animation */
    .pageheader__scene,
    .pageheader__cube,
    .cube__face {
      display: none !important;
    }

    /* Ensure mobile elements are visible */
    .mobile-hero-title {
      visibility: visible !important;
      opacity: 1 !important;
    }

    /* ==========================================
     STATS/COUNTER SECTION - 2x2 GRID LAYOUT
     Match Figma design with Peach numbers and Teal labels
     ========================================== */

    /* Stats container - reset margins */
    .metrics-sub {
      margin: 40px 0 !important;
      padding: 0 !important;
    }

    /* Parent row - 2x2 CSS Grid Layout - OVERRIDE BOOTSTRAP */
    .row.py-4,
    div.row.py-4 {
      display: grid !important;
      grid-template-columns: 1fr 1fr !important;
      grid-template-rows: auto auto !important;
      gap: 40px 0 !important;
      width: 100% !important;
      padding: 40px 20px !important;
      margin: 0 !important;
    }

    /* Each stat item - centered content, FORCE reset ALL borders */
    .metrics-sub.col-3,
    div.col-3.metrics-sub,
    .row.py-4>.col-3.metrics-sub {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 20px !important;
      margin: 0 !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
      border: none !important;
      border-right: none !important;
      border-left: none !important;
      border-top: none !important;
      border-bottom: none !important;
      position: relative !important;
    }

    /* FORCE override inline styles - remove all borders first */
    .metrics-sub.col-3[style],
    div.col-3.metrics-sub[style] {
      border: none !important;
      border-right: none !important;
    }

    /* Vertical dividers - Left column items only (1st and 3rd) */
    .row.py-4>.metrics-sub.col-3:nth-child(1),
    .row.py-4>.metrics-sub.col-3:nth-child(3) {
      border-right: 1px solid rgba(0, 212, 255, 0.6) !important;
      padding-right: 20px !important;
    }

    /* Right column items - FORCE no borders (2nd and 4th) */
    .row.py-4>.metrics-sub.col-3:nth-child(2),
    .row.py-4>.metrics-sub.col-3:nth-child(4) {
      border: none !important;
      border-right: none !important;
      padding-left: 20px !important;
    }

    /* Numbers - Peach/Orange color (#FFB89E) - OVERRIDE inline styles */
    .metrics-title,
    .metrics-title.title,
    .metrics-title.counter,
    strong.metrics-title,
    strong.title.metrics-title {
      font-size: 48px !important;
      font-weight: 800 !important;
      color: #FFB89E !important;
      line-height: 1 !important;
      margin: 0 !important;
      padding: 0 !important;
      font-family: "Unbounded", sans-serif !important;
    }

    /* Plus/Percent symbols - same Peach color */
    .metrics-title+.metrics-title,
    strong.metrics-title+strong.metrics-title {
      font-size: 48px !important;
      font-weight: 800 !important;
      color: #FFB89E !important;
      display: inline !important;
      margin: 0 !important;
    }

    /* Labels - Teal/Cyan (#00D4FF) - OVERRIDE inline styles */
    .mtext,
    div.mtext,
    .mtext[style] {
      font-size: 14px !important;
      font-weight: 400 !important;
      color: #00D4FF !important;
      line-height: 1.4 !important;
      text-align: center !important;
      margin-top: 8px !important;
      padding: 0 5px !important;
    }


    .photo {
      position: absolute !important;
      top: 0 !important;
      left: 0 !important;
      /* width: 100% !important; */
      /* height: 100% !important; */
      background-repeat: no-repeat !important;
      background-position: center !important;
      background-size: cover !important;
      border-radius: 15px !important;
      transition: transform 0.5s ease-out !important;
    }

    /* Photo inside tiles/case study cards */
    .tile .photo,
    .tiles .photo,
    .fcase .photo {
      border-radius: 15px !important;
      object-fit: cover !important;
    }

    /* ==========================================
     CTA SECTION - MOBILE CARD LAYOUT (FIGMA PIXEL-PERFECT)
     ========================================== */

    .cta-section {
      background-color: #262138 !important;
      padding: 2rem 1.5rem !important;
      margin-top: 0 !important;
      top: 0 !important;
    }

    /* Teal card container - exact Figma specs */
    .cta-mod {
      width: 100% !important;
      max-width: 100% !important;
      margin: 16px auto !important;
      border-radius: 32px !important;
      padding: 32px 28px !important;
      background-color: #00B7BD !important;
      display: flex !important;
      flex-direction: column !important;
      gap: 20px !important;
    }

    .cta-mod .row {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      gap: 0 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .cta-mod .col-6 {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Heading - exact Figma typography */
    .cta-left {
      font-family: "Unbounded", sans-serif !important;
      font-size: 28px !important;
      font-weight: 700 !important;
      text-transform: uppercase !important;
      line-height: 1.2 !important;
      letter-spacing: 0.5px !important;
      color: #0F0F25 !important;
      text-align: left !important;
      margin: 0 0 12px 0 !important;
      padding: 0 !important;
    }

    .cta-left br {
      display: inline !important;
    }

    /* Paragraph text - exact Figma specs */
    .cta-right-desktop {
      display: none !important;
    }

    .cta-right-mobile {
      display: block !important;
      color: #FFFFFF !important;
      font-size: 16px !important;
      font-weight: 300 !important;
      line-height: 1.6 !important;
      text-align: left !important;
      max-width: 260px !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    /* Button row container */
    .cta-mod .text-start {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      gap: 12px !important;
      margin-top: 10px !important;
      margin-bottom: 0 !important;
      padding: 0 !important;
    }

    /* Get Started button - exact Figma specs */
    .cta-btn {
      display: inline-flex !important;
      justify-content: center !important;
      border-radius: 50px !important;
      padding: 10px 20px !important;
      background: transparent !important;
      color: #0F0F25 !important;
      border: 1.5px solid #0F0F25 !important;
      font-size: 15px !important;
      font-weight: 500 !important;
      white-space: nowrap !important;
      text-decoration: none !important;
      transition: all 0.3s ease !important;
    }

    .cta-btn:hover {
      background-color: #0F0F25 !important;
      color: #00B7BD !important;
    }

    /* Circle arrow button - exact Figma gradient */
    .cta-mod .ico {
      width: 44px !important;
      height: 44px !important;
      min-width: 44px !important;
      min-height: 44px !important;
      background: linear-gradient(135deg, #4B2FE4, #486BFF) !important;
      border-radius: 50% !important;
      padding: 12px !important;
      margin: 0 !important;
      flex-shrink: 0 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

  }

  /* Global Container Alignment - Desktop */
  @media (min-width: 769px) {

    /* Standardize container max-width across all sections */
    .content-pad {
      max-width: 1320px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    /* Fix ctpg-bg2 section padding for consistent gutters */
    .ctpg-bg2 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Ensure nested content-pad doesn't add extra padding */
    .ctpg-bg2 .content-pad {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    /* Fix .bgs section padding */
    .bgs {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .bgs .content-pad {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    /* Remove excessive padding from parent container */
    .ctpg-bg2.px-5 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .ctpg-bg2 .container-fluid.mx-5.px-5 {
      margin-left: 0 !important;
      margin-right: 0 !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
      max-width: 100% !important;
    }

    /* Ensure proper column alignment */
    .ctpg-bg2 .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Left column - "Our Approach" heading */
    .solutions-tag-Our {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    /* Right column - Accordion */
    .ctpg-c2a {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Accordion items - full width horizontal rules */
    .accordion-item {
      width: 100% !important;
    }

    /* Soln-Detail paragraph alignment */
    .Soln-Detail {
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Grid container alignment */
    .grid-container {
      width: 100% !important;
      max-width: 100% !important;
    }

    /* Ensure 4-column grid with equal spacing */
    .grid-container .row {
      display: flex !important;
      justify-content: space-between !important;
      gap: 20px !important;
    }

    .grid-container .col-md-3 {
      flex: 0 0 calc(25% - 15px) !important;
      max-width: calc(25% - 15px) !important;
    }

    /* Center content inside cards */
    .sd-tile-Detail {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
      padding: 4vh !important;
    }

    .sd-tile-Detail img {
      margin: 0 auto !important;
    }

    .sd-titletxt,
    .sd-title-p {
      text-align: center !important;
    }

    /* Remove excessive nested padding */
    .ctpg-bg2 .content-pad[style*="position: relative"] {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }

    /* Fix 3-column layout alignment */
    .ctpg-bg2 .row.my-5.py-5 {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 .col-4 {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }

    /* Align image vertically with text */
    .ctpg-bg2 .row.my-5.py-5 .col-4:first-child {
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
    }

    /* Remove inline styles causing misalignment */
    .ctpg-bg2 .row.my-5.py-5 h2[style] {
      margin-left: 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 img[style] {
      position: relative !important;
      top: 0 !important;
    }

    /* Center the container */
    .common-concerns-wave-container {
      max-width: 1200px !important;
      margin: 0 auto !important;
    }

    /* Ensure 4-column grid with equal spacing */
    .common-concerns-wave-container .row {
      display: flex !important;
      justify-content: space-between !important;
      gap: 20px !important;
    }

    .common-concerns-wave-container .col-lg-3 {
      flex: 0 0 calc(25% - 15px) !important;
      max-width: calc(25% - 15px) !important;
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    /* Center content inside cards */
    .sd-wavetile {
      display: flex !important;
      flex-direction: column !important;
      align-items: flex-start !important;
      text-align: left !important;
    }

    /* Wave positioning - ensure it doesn't affect card alignment */
    .common-concerns-wave {
      pointer-events: none !important;
      z-index: 0 !important;
    }

    .common-concerns-wave-container .row {
      position: relative !important;
      z-index: 10 !important;
    }

    .cta-mod {
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 40px 60px !important;
      background-color: #00B4BD !important;
      border-radius: 24px !important;
      margin-top: 60px !important;
    }

    .cta-mod .row {
      width: 100% !important;
      display: flex !important;
      align-items: center !important;
      margin: 0 !important;
    }

    .cta-mod .col-6 {
      display: flex !important;
      flex-direction: column !important;
      justify-content: center !important;
    }

    .cta-mod .col-6:first-child {
      align-items: flex-start !important;
    }

    .cta-mod .col-6:last-child {
      align-items: flex-start !important;
    }

    /* Text styling */
    .cta-left {
      font-family: 'Unbounded', sans-serif !important;
      font-size: 40px !important;
      font-weight: 400 !important;
      color: #262138 !important;
      line-height: 1.2 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .cta-right {
      font-family: 'Poppins', sans-serif !important;
      font-size: 20px !important;
      font-weight: 400 !important;
      color: #262138 !important;
      line-height: 1.4 !important;
      margin: 0 0 20px 0 !important;
      padding: 0 !important;
    }

    /* Button alignment */
    .cta-mod .text-start.mt-2 {
      display: flex !important;
      align-items: center !important;
      gap: 12px !important;
    }

    .cta-btn {
      font-family: 'Poppins', sans-serif !important;
      font-size: 16px !important;
      font-weight: 500 !important;
      padding: 12px 32px !important;
      border-radius: 50px !important;
      background-color: #262138 !important;
      color: #ffffff !important;
      border: none !important;
      text-decoration: none !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .cta-btn:hover {
      background-color: #1a1528 !important;
      color: #ffffff !important;
    }

    /* Ensure accordion items span full width */
    #faq .accordion-item {
      width: 100% !important;
      margin-bottom: 0 !important;
    }

    /* Accordion button alignment */
    .faqbtn {
      background: transparent !important;
      border: none !important;
      color: #ffffff !important;
      font-size: 32px !important;
      cursor: pointer !important;
      padding: 0 !important;
      text-align: right !important;
    }

    /* SD-topic styling */
    .SD-topic {
      font-family: 'Poppins', sans-serif !important;
      font-size: 20px !important;
      font-weight: 600 !important;
      color: #00B4BD !important;
      letter-spacing: 2px !important;
    }

    /* Dot before topic */
    .sd-dot {
      display: inline-block !important;
      width: 8px !important;
      height: 8px !important;
      background-color: #00B4BD !important;
      border-radius: 50% !important;
      margin-right: 12px !important;
    }

    /* Accordion content */
    .accordion-content {
      padding: 20px 0 !important;
    }

    .sd-AQtxt {
      font-family: 'Poppins', sans-serif !important;
      font-size: 18px !important;
      font-weight: 400 !important;
      color: #ffffff !important;
      line-height: 1.6 !important;
    }

    .solutions-tag-Our,
    .solutions-tag-Is,
    .solutions-tag-commen {
      font-family: 'Unbounded', sans-serif !important;
      color: #F9AC8D !important;
      font-weight: 500 !important;
      line-height: 1.3 !important;
    }

    .solutions-tag-Our {
      font-size: 40px !important;
    }

    .solutions-tag-Is {
      font-size: 40px !important;
    }

    .solutions-tag-commen {
      font-size: 48px !important;
    }

    /* Remove excessive margins from sections */
    .ctpg-bg2.py-5 {
      padding-top: 80px !important;
      padding-bottom: 80px !important;
    }

    .bgs {
      padding-top: 60px !important;
      padding-bottom: 60px !important;
    }

    /* Ensure consistent vertical spacing */
    .content-pad .row {
      margin-bottom: 0 !important;
    }

    /* Fix container fluid issues */
    .container-fluid {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  @media (min-width: 1440px) {
    .content-pad {
      max-width: 1320px !important;
    }
  }

  @media (min-width: 1920px) {
    .content-pad {
      max-width: 1320px !important;
    }
  }

  @media (max-width: 786px) {

    /* Global container for mobile */
    .content-pad {
      max-width: 100% !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
    }

    /* Our Approach Section - Mobile */
    .ctpg-bg2 .row {
      flex-direction: column !important;
    }

    .ctpg-bg2 .col-4,
    .ctpg-bg2 .col-8,
    .ctpg-bg2 .col-12 {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
    }

    .solutions-tag-Our {
      font-size: 28px !important;
      text-align: center !important;
      margin-bottom: 30px !important;
    }

    /* Accordion - full width on mobile */
    .ctpg-c2a {
      width: 100% !important;
    }

    #faq .accordion-item {
      margin-bottom: 10px !important;
    }

    .SD-topic {
      font-size: 16px !important;
    }

    /* Is This Solution Right For You? - 1 Column Mobile */
    .grid-container .row {
      flex-direction: column !important;
      gap: 20px !important;
    }

    .grid-container .col-md-3 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-bottom: 20px !important;
    }

    .sd-tile-Detail {
      width: 100% !important;
      padding: 30px 20px !important;
    }

    .solutions-tag-Is {
      font-size: 28px !important;
      text-align: center !important;
    }

    /* What You'll Gain - 1 Column Mobile */
    .ctpg-bg2 .row.my-5.py-5 {
      flex-direction: column !important;
      padding: 20px 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 .col-4 {
      width: 100% !important;
      max-width: 100% !important;
      padding: 20px 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 h2 {
      text-align: center !important;
      font-size: 28px !important;
      padding: 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 img {
      max-width: 200px !important;
      margin: 20px auto !important;
      display: block !important;
    }

    .ctpg-bg2 .row.my-5.py-5 p {
      text-align: center !important;
      font-size: 16px !important;
    }

    /* Common Concerns - 1 Column Mobile */
    .solutions-tag-commen {
      font-size: 28px !important;
      text-align: center !important;
    }

    .common-concerns-wave-container .row {
      flex-direction: column !important;
      gap: 20px !important;
    }

    .common-concerns-wave-container .col-lg-3 {
      flex: 0 0 100% !important;
      max-width: 100% !important;
      margin-bottom: 20px !important;
    }

    .sd-wavetile {
      width: 100% !important;
      padding: 30px 20px !important;
    }

    /* CTA Section - Mobile */
    .cta-mod {
      padding: 30px 20px !important;
      margin-top: 40px !important;
    }

    .cta-mod .row {
      flex-direction: column !important;
    }

    .cta-mod .col-6 {
      width: 100% !important;
      max-width: 100% !important;
      text-align: center !important;
      margin-bottom: 20px !important;
    }

    .cta-left {
      font-size: 28px !important;
      text-align: center !important;
    }

    .cta-right {
      font-size: 16px !important;
      text-align: center !important;
    }

    .cta-mod .text-start.mt-2 {
      justify-content: center !important;
    }
  }

  @media (min-width: 787px) and (max-width: 1440px) {

    /* Container for laptop screens */
    .content-pad {
      max-width: 1200px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
    }

    /* Our Approach Section */
    .solutions-tag-Our {
      font-size: 36px !important;
    }

    .SD-topic {
      font-size: 18px !important;
    }

    /* Is This Solution Right For You? - 4 Column Grid */
    .grid-container .row {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 20px !important;
    }

    .grid-container .col-md-3 {
      flex: none !important;
      max-width: none !important;
    }

    .sd-tile-Detail {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
    }

    /* What You'll Gain - 3 Column Grid */
    .ctpg-bg2 .row.my-5.py-5 {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 30px !important;
    }

    .ctpg-bg2 .row.my-5.py-5 .col-4 {
      flex: none !important;
      max-width: none !important;
    }

    /* Common Concerns - 4 Column Grid */
    .common-concerns-wave-container .row {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 20px !important;
    }

    .common-concerns-wave-container .col-lg-3 {
      flex: none !important;
      max-width: none !important;
    }

    .sd-wavetile {
      height: 100% !important;
      display: flex !important;
      flex-direction: column !important;
    }

    /* CTA Section */
    .cta-mod {
      padding: 50px 60px !important;
    }

    .cta-left {
      font-size: 36px !important;
    }

    .cta-right {
      font-size: 18px !important;
    }
  }

  @media (min-width: 1441px) {

    /* Container for wide desktop screens */
    .content-pad {
      max-width: 1320px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 60px !important;
      padding-right: 60px !important;
    }

    /* Our Approach Section */
    .solutions-tag-Our {
      font-size: 40px !important;
    }

    .SD-topic {
      font-size: 20px !important;
    }

    .sd-AQtxt {
      font-size: 18px !important;
    }

    /* Is This Solution Right For You? - 4 Column Grid with breathing room */
    .grid-container {
      max-width: 1320px !important;
      margin: 0 auto !important;
    }

    .grid-container .row {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 30px !important;
    }

    .grid-container .col-md-3 {
      flex: none !important;
      max-width: none !important;
    }

    .sd-tile-Detail {
      height: 100% !important;
      min-height: 320px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: space-between !important;
      padding: 40px 30px !important;
    }

    .sd-titletxt {
      font-size: 24px !important;
    }

    .sd-title-p {
      font-size: 16px !important;
    }

    /* What You'll Gain - 3 Column Grid with ample spacing */
    .ctpg-bg2 .row.my-5.py-5 {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 40px !important;
      padding: 60px 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 .col-4 {
      flex: none !important;
      max-width: none !important;
    }

    .ctpg-bg2 .row.my-5.py-5 h2 {
      font-size: 48px !important;
    }

    .ctpg-bg2 .row.my-5.py-5 img {
      max-height: 400px !important;
    }

    /* Common Concerns - 4 Column Grid with wide margins */
    .common-concerns-wave-container {
      max-width: 1320px !important;
      margin: 0 auto !important;
    }

    .common-concerns-wave-container .row {
      display: grid !important;
      grid-template-columns: repeat(4, 1fr) !important;
      gap: 30px !important;
    }

    .common-concerns-wave-container .col-lg-3 {
      flex: none !important;
      max-width: none !important;
    }

    .sd-wavetile {
      height: 100% !important;
      min-height: 320px !important;
      display: flex !important;
      flex-direction: column !important;
      padding: 40px 30px !important;
    }

    .solutions-tag-commen {
      font-size: 48px !important;
    }

    /* CTA Section - Wide desktop */
    .cta-mod {
      max-width: 1320px !important;
      margin: 60px auto !important;
      padding: 60px 80px !important;
    }

    .cta-left {
      font-size: 40px !important;
    }

    .cta-right {
      font-size: 20px !important;
    }

    .cta-btn {
      font-size: 18px !important;
      padding: 14px 36px !important;
    }
  }

  @media (min-width: 787px) {

    /* Ensure equal height for grid items */
    .grid-container .row,
    .common-concerns-wave-container .row {
      align-items: stretch !important;
    }

    .sd-tile-Detail,
    .sd-wavetile {
      display: flex !important;
      flex-direction: column !important;
      height: 100% !important;
    }

    /* Flex grow for content to fill space */
    .sd-tile-Detail p:last-child,
    .sd-wavetile p:last-child {
      flex-grow: 1 !important;
    }
  }

  .content-pad,
  .ctpg-bg2 .content-pad,
  .bgs .content-pad,
  section .content-pad {
    width: 100% !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
  }

  /* Remove conflicting padding from parent sections */
  .ctpg-bg2,
  .bgs,
  section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Ensure container-fluid doesn't override */
  .container-fluid {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .Soln-Detail {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Heading on far-left edge */
  .solutions-tag-Our {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  /* Accordion spans full width */
  .ctpg-c2a {
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #faq {
    width: 100% !important;
    padding-top: 0 !important;
  }

  #faq .accordion-item {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Horizontal rules span full accordion width */
  #faq .accordion-item {
    border-top: 1px solid white !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  /* Is This Solution Right For You? */
  .grid-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .grid-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* Common Concerns */
  .common-concerns-wave-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .common-concerns-wave-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  /* What You''ll Gain */
  .ctpg-bg2 .row.my-5.py-5 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }


  @media (min-width: 1920px) {

    .content-pad,
    .ctpg-bg2 .content-pad,
    .bgs .content-pad,
    section .content-pad {
      max-width: 1320px !important;
      padding-left: 60px !important;
      padding-right: 60px !important;
      margin: 0 auto !important;
    }

    /* Ensure grids align to container edges */
    .grid-container .row,
    .common-concerns-wave-container .row,
    .ctpg-bg2 .row.my-5.py-5 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  /* ============================================
   LAPTOP - 1440px Breakpoint
   ============================================ */

  @media (min-width: 1440px) and (max-width: 1919px) {

    .content-pad,
    .ctpg-bg2 .content-pad,
    .bgs .content-pad,
    section .content-pad {
      max-width: 1200px !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
      margin: 0 auto !important;
    }

    /* Ensure grids align to container edges */
    .grid-container .row,
    .common-concerns-wave-container .row,
    .ctpg-bg2 .row.my-5.py-5 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  /* ============================================
   TABLET/SMALL LAPTOP - 787px to 1439px
   ============================================ */

  @media (min-width: 787px) and (max-width: 1439px) {

    .content-pad,
    .ctpg-bg2 .content-pad,
    .bgs .content-pad,
    section .content-pad {
      max-width: 960px !important;
      padding-left: 30px !important;
      padding-right: 30px !important;
      margin: 0 auto !important;
    }
  }

  /* ============================================
   MOBILE - 786px and Below
   ============================================ */

  @media (max-width: 786px) {

    .content-pad,
    .ctpg-bg2 .content-pad,
    .bgs .content-pad,
    section .content-pad {
      max-width: 100% !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      margin: 0 auto !important;
    }

    /* All elements start at same X-coordinate */
    .Soln-Detail,
    .solutions-tag-Our,
    .solutions-tag-Is,
    .solutions-tag-commen,
    .grid-container,
    .common-concerns-wave-container,
    #faq {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    /* Ensure rows don''t add extra padding */
    .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  /* ============================================
   COLUMN PADDING RESET
   Ensure Bootstrap columns don''t break alignment
   ============================================ */

  @media (min-width: 787px) {

    /* Our Approach columns */
    .ctpg-bg2 .row .col-4,
    .ctpg-bg2 .row .col-8,
    .ctpg-bg2 .row .col-12 {
      padding-left: 15px !important;
      padding-right: 15px !important;
    }

    /* First column - remove left padding */
    .ctpg-bg2 .row .col-4:first-child,
    .ctpg-bg2 .row .col-12:first-child {
      padding-left: 0 !important;
    }

    /* Last column - remove right padding */
    .ctpg-bg2 .row .col-8:last-child,
    .ctpg-bg2 .row .col-12:last-child {
      padding-right: 0 !important;
    }

    /* Grid columns - equal spacing */
    .grid-container .col-md-3,
    .common-concerns-wave-container .col-lg-3 {
      padding-left: 10px !important;
      padding-right: 10px !important;
    }

    /* First grid column */
    .grid-container .col-md-3:first-child,
    .common-concerns-wave-container .col-lg-3:first-child {
      padding-left: 0 !important;
    }

    /* Last grid column */
    .grid-container .col-md-3:last-child,
    .common-concerns-wave-container .col-lg-3:last-child {
      padding-right: 0 !important;
    }
  }

  /* ============================================
   VISUAL ALIGNMENT VERIFICATION
   Add temporary guide (remove in production)
   ============================================ */

  /* Uncomment to see alignment guides
.content-pad::before,
.content-pad::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: red;
  opacity: 0.3;
  z-index: 9999;
}

.content-pad::before {
  left: 24px;
}

.content-pad::after {
  right: 24px;
}
*/


  /* ============================================
   MOBILE ALIGNMENT FIXES - 786px and Below
   Based on Figma Mobile Design
   ============================================ */

  @media (max-width: 786px) {

    /* ============================================
     GLOBAL MOBILE CONTAINER - Uniform Gutters
     ============================================ */

    /* Unified padding for all sections */
    .content-pad,
    .ctpg-bg2 .content-pad,
    .bgs .content-pad,
    section .content-pad {
      max-width: 100% !important;
      padding-left: 20px !important;
      padding-right: 20px !important;
      margin: 0 auto !important;
    }

    /* Remove parent section padding */
    .ctpg-bg2,
    .bgs,
    section {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Ensure container-fluid doesn''t add padding */
    .container-fluid {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Remove Bootstrap row margins */
    .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* ============================================
     INTRO TEXT SECTION - Mobile
     ============================================ */

    .Soln-Detail {
      text-align: left !important;
      padding: 0 !important;
      margin: 20px 0 !important;
      font-size: 14px !important;
      line-height: 1.6 !important;
    }

    /* ============================================
     OUR APPROACH SECTION - Mobile
     ============================================ */

    /* Stack columns vertically */
    .ctpg-bg2 .row {
      flex-direction: column !important;
    }

    .ctpg-bg2 .col-4,
    .ctpg-bg2 .col-8,
    .ctpg-bg2 .col-12 {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      flex: 0 0 100% !important;
    }

    /* Our Approach heading - align to left edge */
    .solutions-tag-Our {
      font-size: 28px !important;
      text-align: left !important;
      padding: 0 !important;
      margin: 30px 0 20px 0 !important;
      line-height: 1.2 !important;
    }

    /* Accordion container - full width */
    .ctpg-c2a {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #faq {
      width: 100% !important;
      padding: 0 !important;
    }

    /* Accordion items - full width with proper separators */
    #faq .accordion-item {
      width: 100% !important;
      margin: 0 !important;
      padding: 15px 0 !important;
      border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
      border-left: none !important;
      border-right: none !important;
      border-bottom: none !important;
    }

    #faq .accordion-item:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    }

    /* Accordion topic text */
    .SD-topic {
      font-size: 16px !important;
      letter-spacing: 1px !important;
    }

    /* Accordion content */
    .sd-AQtxt {
      font-size: 14px !important;
      line-height: 1.6 !important;
    }

    /* Plus/minus button */
    .faqbtn {
      font-size: 24px !important;
    }

    /* ============================================
     IS THIS SOLUTION RIGHT FOR YOU? - Mobile
     ============================================ */

    .solutions-tag-Is {
      font-size: 28px !important;
      text-align: left !important;
      padding: 0 !important;
      margin: 30px 0 20px 0 !important;
      line-height: 1.2 !important;
    }

    /* Grid container - full width */
    .grid-container {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Stack grid into single column */
    .grid-container .row {
      flex-direction: column !important;
      gap: 20px !important;
    }

    .grid-container .col-md-3 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding: 0 !important;
      margin-bottom: 20px !important;
    }

    .grid-container .col-md-3:last-child {
      margin-bottom: 0 !important;
    }

    /* Cards - full width within gutters */
    .sd-tile-Detail {
      width: 100% !important;
      padding: 30px 20px !important;
      text-align: center !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
    }

    .sd-tile-Detail img {
      max-width: 60px !important;
      margin-bottom: 15px !important;
    }

    .sd-titletxt {
      font-size: 18px !important;
      margin-bottom: 10px !important;
    }

    .sd-title-p {
      font-size: 14px !important;
      line-height: 1.5 !important;
    }

    /* ============================================
     WHAT YOU''LL GAIN SECTION - Mobile
     ============================================ */

    /* Stack 3-column layout vertically */
    .ctpg-bg2 .row.my-5.py-5 {
      flex-direction: column !important;
      padding: 20px 0 !important;
      margin: 0 !important;
    }

    .ctpg-bg2 .row.my-5.py-5 .col-4 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding: 0 !important;
      margin-bottom: 30px !important;
    }

    .ctpg-bg2 .row.my-5.py-5 .col-4:last-child {
      margin-bottom: 0 !important;
    }

    /* What You''ll Gain heading */
    .ctpg-bg2 .row.my-5.py-5 h2 {
      font-size: 28px !important;
      text-align: left !important;
      padding: 0 !important;
      margin: 0 0 20px 0 !important;
      line-height: 1.2 !important;
    }

    /* Image - centered and smaller */
    .ctpg-bg2 .row.my-5.py-5 img {
      max-width: 200px !important;
      margin: 20px auto !important;
      display: block !important;
    }

    /* Benefit text items */
    .ctpg-bg2 .row.my-5.py-5 p {
      text-align: left !important;
      font-size: 14px !important;
      line-height: 1.6 !important;
      margin-bottom: 20px !important;
    }

    .solutions-tag-detail2 {
      font-size: 16px !important;
      display: block !important;
      margin-bottom: 8px !important;
    }

    /* ============================================
     COMMON CONCERNS WE ADDRESS - Mobile
     ============================================ */

    .solutions-tag-commen {
      font-size: 28px !important;
      text-align: left !important;
      padding: 0 !important;
      margin: 30px 0 20px 0 !important;
      line-height: 1.2 !important;
    }

    /* Common Concerns container */
    .common-concerns-wave-container {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    /* Stack cards into single column */
    .common-concerns-wave-container .row {
      flex-direction: column !important;
      gap: 20px !important;
    }

    .common-concerns-wave-container .col-lg-3 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding: 0 !important;
      margin-bottom: 20px !important;
    }

    .common-concerns-wave-container .col-lg-3:last-child {
      margin-bottom: 0 !important;
    }

    /* Concern cards - full width */
    .sd-wavetile {
      width: 100% !important;
      padding: 30px 20px !important;
      text-align: left !important;
      display: flex !important;
      flex-direction: column !important;
    }

    .sd-wavetile img {
      max-width: 50px !important;
      margin-bottom: 15px !important;
    }

    .sd-wavetile h3 {
      font-size: 18px !important;
      margin-bottom: 10px !important;
    }

    .sd-wavetile p {
      font-size: 14px !important;
      line-height: 1.5 !important;
    }

    /* Wave decoration - hide or adjust on mobile */
    .common-concerns-wave {
      display: none !important;
    }

    /* ============================================
     CTA SECTION - Ready to Engineer - Mobile
     ============================================ */

    .cta-mod {
      padding: 30px 20px !important;
      margin: 40px 0 !important;
      border-radius: 16px !important;
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      text-align: center !important;
    }

    .cta-mod .row {
      flex-direction: column !important;
      width: 100% !important;
    }

    .cta-mod .col-6 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding: 0 !important;
      margin-bottom: 20px !important;
    }

    .cta-mod .col-6:last-child {
      margin-bottom: 0 !important;
    }

    /* CTA text */
    .cta-left {
      font-size: 24px !important;
      text-align: center !important;
      line-height: 1.3 !important;
      margin-bottom: 15px !important;
    }

    .cta-right {
      font-size: 16px !important;
      text-align: center !important;
      line-height: 1.5 !important;
      margin-bottom: 20px !important;
    }

    /* CTA button container */
    .cta-mod .text-start.mt-2 {
      justify-content: center !important;
      text-align: center !important;
      width: 100% !important;
    }

    .cta-btn {
      font-size: 16px !important;
      padding: 12px 30px !important;
      width: auto !important;
      display: inline-flex !important;
    }

    .cta-mod .ico {
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      min-height: 40px !important;
    }

    /* ============================================
     SECTION SPACING - Mobile
     ============================================ */

    .ctpg-bg2.py-5,
    .bgs {
      padding-top: 40px !important;
      padding-bottom: 40px !important;
    }

    section {
      padding-top: 20px !important;
      padding-bottom: 20px !important;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    /* Ensure all paragraphs align to left edge */
    p {
      padding-left: 0 !important;
      margin-left: 0 !important;
    }

    /* Force all columns to full width */
    [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .gx-0,
    .g-0 {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .content-pad>* {
      margin-left: 0 !important;
      padding-left: 0 !important;
    }

    /* Ensure all rows within content-pad align */
    .content-pad .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    /* Ensure grid containers don''t add extra spacing */
    .grid-container,
    .common-concerns-wave-container {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  @media (min-width: 787px) and (max-width: 1024px) {

    .content-pad,
    .ctpg-bg2 .content-pad,
    .bgs .content-pad,
    section .content-pad {
      max-width: 720px !important;
      padding-left: 30px !important;
      padding-right: 30px !important;
    }

    /* 2-column grid for tablets */
    .grid-container .row,
    .common-concerns-wave-container .row {
      display: grid !important;
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 20px !important;
    }
  }


  @media (max-width: 786px) {

    .solutions-tag-Our {
      font-size: 28px !important;
      text-align: left !important;
      padding: 0 !important;
      margin: 0 0 30px 0 !important;
      line-height: 1.2 !important;
      color: #F9AC8D !important;
      font-family: "Unbounded", sans-serif !important;
      font-weight: 500 !important;
    }

    .ctpg-c2a {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #faq {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }


    #faq .accordion-item {
      width: 100% !important;
      margin: 0 !important;
      padding: 25px 0 !important;
      background: transparent !important;
      border: none !important;
      border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
    }

    /* First item - no top border */
    #faq .accordion-item:first-child {
      border-top: none !important;
    }

    /* Last item - add bottom border */
    #faq .accordion-item:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    /* Content wrapper */
    #faq .accordion-item .col-10,
    #faq .accordion-item .col-11 {
      padding: 0 !important;
      margin: 0 !important;
      flex: 1 !important;
      max-width: calc(100% - 40px) !important;
    }

    /* Blue bullet dot */
    .sd-dot {
      display: inline-block !important;
      width: 8px !important;
      height: 8px !important;
      background-color: #4B6FFF !important;
      border-radius: 50% !important;
      margin-right: 12px !important;
      vertical-align: middle !important;
      flex-shrink: 0 !important;
    }

    /* Category titles (DISCOVER & PLANNING, etc.) */
    .SD-topic {
      font-family: "Poppins", sans-serif !important;
      font-size: 18px !important;
      font-weight: 600 !important;
      color: #00D4D9 !important;
      letter-spacing: 1.5px !important;
      text-transform: uppercase !important;
      line-height: 1.4 !important;
      margin: 0 !important;
      padding: 0 !important;
      display: inline !important;
    }

    #faq .accordion-item .col-1,
    #faq .accordion-item .col-2 {
      padding: 0 !important;
      margin: 0 !important;
      flex: 0 0 30px !important;
      max-width: 30px !important;
      display: flex !important;
      justify-content: flex-end !important;
      align-items: flex-start !important;
    }

    .faqbtn {
      background: transparent !important;
      border: none !important;
      color: #ffffff !important;
      font-size: 28px !important;
      font-weight: 300 !important;
      cursor: pointer !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1 !important;
      width: 30px !important;
      height: 30px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }

    .accordion-content {
      padding: 15px 0 0 20px !important;
      margin: 0 !important;
    }

    .sd-AQtxt {
      font-family: "Poppins", sans-serif !important;
      font-size: 15px !important;
      font-weight: 400 !important;
      color: rgba(255, 255, 255, 0.85) !important;
      line-height: 1.6 !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    #faq .accordion-item+.accordion-item {
      margin-top: 0 !important;
    }

    #faq .accordion-item {
      padding-top: 28px !important;
      padding-bottom: 28px !important;
    }

    #faq .accordion-item::before,
    #faq .accordion-item::after {
      content: none !important;
    }

    .ctpg-bg2 .content-pad #faq {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    #faq .accordion-item.row {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      align-items: flex-start !important;
      justify-content: space-between !important;
    }

    #faq .accordion-item .text-start {
      flex: 1 !important;
      padding-right: 15px !important;
    }

    #faq .accordion-item .text-end {
      flex: 0 0 auto !important;
    }

    #faq .accordion-item [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .ctpg-bg2 .content-pad {
      padding-left: 30px !important;
      padding-right: 30px !important;
    }

    .ctpg-bg2 .row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .ctpg-bg2 .col-4,
    .ctpg-bg2 .col-8 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }


  @media (max-width: 786px) {
    .ctpg-bg2 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .ctpg-bg2 .col-4,
    .ctpg-bg2 .col-8 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
    }

    .solutions-tag-Our {
      width: 100% !important;
    }

    #faq {
      width: 100% !important;
    }

    #faq .accordion-item {
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      padding: 28px 0 !important;
      border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
    }
  }

  @media (max-width: 786px) {

    .ctpg-bg2 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .ctpg-bg2 .content-pad {
      padding-left: 30px !important;
      padding-right: 30px !important;
      max-width: 100% !important;
    }

    .accordion-content-row,
    .ctpg-bg2 .row {
      display: flex !important;
      flex-direction: column !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .ctpg-bg2 .col-4,
    .ctpg-bg2 .col-8,
    .accordion-content-row .col-4,
    .accordion-content-row .col-8 {
      width: 100% !important;
      max-width: 100% !important;
      flex: 0 0 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    .solutions-tag-Our {
      font-size: 26px !important;
      font-weight: 500 !important;
      color: #F9AC8D !important;
      text-align: left !important;
      padding: 0 !important;
      margin: 0 0 30px 0 !important;
      line-height: 1.2 !important;
      width: 100% !important;
      max-width: 100% !important;
    }

    .ctpg-c2a {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #faq {
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }

    #faq .accordion-item {
      width: 100% !important;
      margin: 0 !important;
      padding: 28px 0 !important;
      background: transparent !important;
      border: none !important;
      border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius: 0 !important;
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      justify-content: space-between !important;
      align-items: flex-start !important;
    }

    #faq .accordion-item:first-child {
      border-top: none !important;
    }

    #faq .accordion-item:last-child {
      border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    #faq .accordion-item .col-10,
    #faq .accordion-item .col-11,
    #faq .accordion-item .text-start {
      padding: 0 !important;
      margin: 0 !important;
      flex: 1 !important;
      max-width: calc(100% - 50px) !important;
    }

    .sd-dot {
      display: inline-block !important;
      width: 8px !important;
      height: 8px !important;
      background-color: #4B6FFF !important;
      border-radius: 50% !important;
      margin-right: 12px !important;
      vertical-align: middle !important;
      flex-shrink: 0 !important;
    }

    .SD-topic {
      font-family: "Poppins", sans-serif !important;
      font-size: 20px !important;
      font-weight: 500 !important;
      color: #00D4D9 !important;
      letter-spacing: 1.5px !important;
      text-transform: uppercase !important;
      line-height: 1.4 !important;
      margin: 0 !important;
      padding: 0 !important;
      display: inline !important;
    }

    #faq .accordion-item .col-1,
    #faq .accordion-item .col-2,
    #faq .accordion-item .text-end {
      padding: 0 !important;
      margin: 0 !important;
      flex: 0 0 40px !important;
      max-width: 40px !important;
      width: 40px !important;
      display: flex !important;
      justify-content: flex-end !important;
      align-items: flex-start !important;
    }

    .faqbtn,
    button.faqbtn {
      background: transparent !important;
      border: none !important;
      color: #ffffff !important;
      font-size: 28px !important;
      font-weight: 300 !important;
      cursor: pointer !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1 !important;
      width: 40px !important;
      height: 40px !important;
      min-width: 40px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      text-align: center !important;
    }

    .accordion-content,
    .sd-AQtxt {
      padding: 15px 0 0 20px !important;
      margin: 0 !important;
      font-family: "Poppins", sans-serif !important;
      font-size: 18px !important;
      font-weight: 400 !important;
      color: rgba(255, 255, 255, 0.85) !important;
      line-height: 1.6 !important;
    }

    #faq .accordion-item [class*="col-"] {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #faq .accordion-item.row {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    #faq .accordion-item {
      padding-top: 28px !important;
      padding-bottom: 28px !important;
    }

    #faq .accordion-item+.accordion-item {
      margin-top: 0 !important;
    }

    #faq .accordion-item::before,
    #faq .accordion-item::after {
      content: none !important;
    }

    .ctpg-bg2 .content-pad #faq {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }

    .solutions-tag-Our,
    #faq {
      margin-left: 0 !important;
      padding-left: 0 !important;
    }

    #faq .accordion-item {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  @media (max-width: 768px) {

    .common-concerns-slider-wrapper .row,
    .right-solution-slider-wrapper .row {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      scrollbar-width: none !important;
      gap: 16px !important;
      padding: 0 20px 20px 20px !important;
      margin: 0 -20px !important;
      scroll-behavior: smooth !important;
    }

    .common-concerns-slider-wrapper .row::-webkit-scrollbar,
    .right-solution-slider-wrapper .row::-webkit-scrollbar {
      display: none !important;
    }

    .common-concerns-slider-wrapper .col-sm-12,
    .common-concerns-slider-wrapper [class*="col-"] {
      flex: 0 0 85% !important;
      max-width: 85% !important;
      width: 85% !important;
      scroll-snap-align: center !important;
      flex-shrink: 0 !important;
      margin: 0 !important;
    }

    /* Card Visual Details */
    .common-concerns-slider-wrapper .sd-wavetile {
      background-color: #262138 !important;
      border: 1px solid #F9AC8D !important;
      border-radius: 20px !important;
      padding: 30px !important;
      position: relative;
      z-index: 2;
      height: 100% !important;
      min-height: 320px !important;
      display: flex !important;
      flex-direction: column !important;
      justify-content: flex-start !important;
      align-items: flex-start !important;
      text-align: left !important;
    }

    .common-concerns-slider-wrapper .sd-wavetile img {
      margin-bottom: 24px !important;
      align-self: flex-start !important;
      width: 60px !important;
      height: 60px !important;
      margin-left: 0 !important;
    }

    /* Text Colors */
    .common-concerns-slider-wrapper .sd-titletxt {
      color: #FFFFFF !important;
      font-family: 'Unbounded', sans-serif !important;
      font-size: 28px !important;
      font-weight: 500 !important;
      margin-bottom: 12px !important;
    }

    .common-concerns-slider-wrapper .sd-title-p {
      color: rgba(255, 255, 255, 0.9) !important;
      font-family: 'Poppins', sans-serif !important;
      font-size: 16px !important;
      line-height: 1.5 !important;
    }

    .common-concerns-wave-container {
      position: relative;
      background-color: transparent !important;
    }

    .common-concerns-wave-container::before {
      content: "";
      position: absolute;
      top: 48%;
      left: 0;
      width: 100%;
      height: 2px;
      background-color: #F9AC8D;
      z-index: 0;
      transform: translateY(-50%);
      display: block !important;
    }

    .common-concerns-wave {
      display: none !important;
    }

    .slider-pagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 9px !important;
      padding: 25px 0 !important;
      margin-top: 15px !important;
    }

    .pagination-dot {
      width: 10px !important;
      height: 10px !important;
      border-radius: 50% !important;
      background: transparent !important;
      border: 1px solid #00CFD1 !important;
      transition: all 0.3s ease !important;
      cursor: pointer !important;
    }

    .pagination-dot.active {
      background: #00CFD1 !important;
      border: 1px solid #00CFD1 !important;
    }
  }

  .mobile-menu-toggle.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
  }

  .mobile-menu-toggle.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  .mobile-menu-toggle.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
  }

  .aligned-section-container {
    width: 100%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  @media (min-width: 1441px) {
    .aligned-section-container {
      max-width: 1400px !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
  }

  @media (max-width: 1440px) and (min-width: 992px) {
    .aligned-section-container {
      max-width: 1320px !important;
    }
  }

  @media (max-width: 768px) {

    .aligned-section-container {
      max-width: 100% !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* Enforce 24px Side Padding on Wrappers */
    .content-pad-service,
    .section-mobile-pad {
      padding-left: 24px !important;
      padding-right: 24px !important;
    }
  }

  /* Mobile Common Concerns Slider Fix */
  @media (max-width: 768px) {

    .common-concerns-slider-wrapper .row,
    .common-concerns-wave-container .common-concerns-slider-wrapper .row {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      scroll-snap-type: x mandatory !important;
      -webkit-overflow-scrolling: touch !important;
      gap: 16px !important;
      padding: 0 24px 24px 24px !important;
      margin: 0 !important;
      /* Reset margin to prevent overflow */
      scrollbar-width: none !important;
      scroll-padding-left: 24px !important;
    }

    .common-concerns-slider-wrapper .row::-webkit-scrollbar,
    .common-concerns-wave-container .common-concerns-slider-wrapper .row::-webkit-scrollbar {
      display: none !important;
    }

    .common-concerns-slider-wrapper .col-sm-12,
    .common-concerns-slider-wrapper [class*='col-'] {
      flex: 0 0 85% !important;
      max-width: 85% !important;
      scroll-snap-align: start !important;
    }
  }

  /* Redundant Force Horizontal Layout for Mobile Slider */
  @media (max-width: 768px) {
    .common-concerns-slider-wrapper .row {
      display: flex !important;
      flex-wrap: nowrap !important;
      overflow-x: auto !important;
      width: 100% !important;
    }
  }

  .pill:hover,
  a.pill:hover,
  .btn:hover,
  .cta-btn:hover,
  .learn-more-btn:hover,
  .get-started-btn:hover,
  .view-all-btn:hover,
  .automation-get-started-btn:hover,
  .intro-buttons .get-started-btn:hover,
  .automation-buttons-wrapper-mobile .automation-get-started-btn:hover,
  .video-intro-buttons .pill:hover,
  .ctpg-bg2 .pill:hover,
  .ctpg-bg2 a.pill:hover,
  section#cta .pill:hover,
  .case-study-card:hover,
  .solution-cards:hover,
  .sol-tile:hover {
    transform: none !important;
  }

  /* --- CTA Mobile Card Styles (From Solution Page) --- */
  section[aria-label='Call to action card'] {
    background: #262138;
    padding: 36px 12px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .teal-card__heading {
    color: #262138;
    font-weight: 400;
    text-transform: uppercase;
    text-align: left;
    letter-spacing: 0.6px;
    line-height: 1.16;
    margin: 0;
    font-family: 'Unbounded', 'Montserrat', sans-serif;
    font-size: clamp(28px, 6.8vw, 32px);
  }

  .teal-card__body {
    margin: 0;
    color: #ffffff;
    font-weight: 300;
    line-height: 1.6;
    font-size: clamp(14px, 3.5vw, 16px);
    text-align: left;
    max-width: 86%;
  }

  .teal-card__controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
  }

  .pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 40px;
    border: 1.5px solid rgba(0, 0, 0, 0.9);
    background: transparent;
    color: #262138;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    min-width: 110px;
    box-sizing: border-box;
    transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
    flex-shrink: 0;
  }

  .pill-btn:hover,
  .pill-btn:focus {
    transform: scale(1.03);
    border-color: #ffffff;
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .circle-action {
    width: 41px;
    height: 41px;
    min-width: 41px;
    min-height: 41px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: transparent;
    box-shadow: 0 6px 20px rgba(64, 72, 209, 0.14);
    border: none;
    padding: 0;
  }

  @media (max-width: 360px) {
    .teal-card {
      padding: 22px 16px;
    }

    .teal-card__body {
      max-width: 82%;
    }

    .pill-btn {
      min-width: 98px;
      padding: 0 14px;
      font-size: 14px;
      height: 38px;
    }

    .circle-action {
      width: 52px;
      height: 52px;
    }
  }

  @media (max-width: 420px) {
    section[aria-label='Call to action card'] {
      padding: 44px 14px;
      min-height: 520px;
    }
  }

  /* Visibility Control */
  @media (min-width: 769px) {

    .cta-mobile,
    .teal-card,
    section[aria-label='Call to action card'] {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
    }
  }

  @media (max-width: 768px) {
    .desktop-cta {
      display: none !important;
      visibility: hidden !important;
      height: 0 !important;
      overflow: hidden !important;
    }
  }

  .pill-btn:hover,
  .pill-btn:focus {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  }

  .cta-btn:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
  }

  .common-concerns-wave-container .sd-title-p {
    font-family: Poppins, 'sans-serif' !important;
    font-size: 17px !important;
    font-weight: 400 !important;
    margin-top: 20px;
    line-height: 1.3;
  }