:root {
  --navy: #071121;
  --navy2: #0b1730;
  --panel: #101d36;
  --ink: #101827;
  --muted: #667085;
  --soft: #f5f8fc;
  --line: #e6edf5;
  --pink: #f08aa4;
  --pinkDark: #c75376;
  --pink2: #ffc2d0;
  --gold: #eaa21b;
  --cyan: #40d5e8;
  --white: #fff
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background: #fff;
  overflow-x: hidden
}

a {
  text-decoration: none
}

.container {
  width: min(1180px, 92%);
  margin: auto
}

.topbar {
  position: fixed;
  inset: 0 0 auto;
  z-index: 1000;
  background: rgba(7, 17, 33, .9);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.navwrap {
  height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand img {
  height: 52px
}

.hamb {
  display: none;
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 24px
}

.navlinks {
  display: flex;
  align-items: center;
  gap: 20px
}

.navlinks>a,
.dropbtn {
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .01em
}

.navlinks>a:hover,
.navlinks>a.active,
.drop:hover .dropbtn {
  color: var(--pink)
}

.quote {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color: #101827 !important;
  border-radius: 999px;
  padding: 11px 18px;
  box-shadow: 0 12px 30px rgba(240, 138, 164, .24)
}

.drop {
  position: relative
}

.mega {
  position: absolute;
  top: 34px;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 700px;
  background: #fff;
  border: 1px solid #e5edf7;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 28px 80px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  transition: .2s
}

.drop:hover .mega {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0)
}

.mega-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px
}

.mega a {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border-radius: 15px;
  color: #1a2540;
  font-weight: 800
}

.mega a:hover {
  background: #f8f1f4
}

.mega i {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  display: grid;
  place-items: center;
  color: #111
}

.hero {
  padding: 130px 0 74px;
  min-height: 360px;
  background: linear-gradient(90deg, rgba(7, 17, 33, .96), rgba(7, 17, 33, .72)), var(--bg) center/cover;
  color: #fff;
  position: relative;
  overflow: hidden
}

.hero:after {
  content: "";
  position: absolute;
  right: -160px;
  top: 40px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(64, 213, 232, .18), transparent 70%)
}

.crumb {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #cbd5e1;
  font-weight: 700;
  font-size: 13px
}

.crumb a {
  color: var(--pink2)
}

.hero h1 {
  font-family: Poppins, sans-serif;
  font-size: clamp(2.2rem, 4.6vw, 4.3rem);
  line-height: 1.02;
  margin: 16px 0 12px;
  font-weight: 900;
  max-width: 850px
}

.hero p {
  font-size: 1rem;
  line-height: 1.75;
  color: #d7deea;
  max-width: 710px
}

.section {
  padding: 72px 0
}

.section.alt {
  background: var(--soft)
}

.section.dark {
  background: var(--navy);
  color: #fff
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--pinkDark);
  border: 1px solid rgba(240, 138, 164, .34);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15em;
  text-transform: uppercase;
  background: #fff
}

.dark .eyebrow {
  background: rgba(255, 255, 255, .05);
  color: var(--pink2)
}

.title {
  font-family: Poppins, sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3vw, 2.65rem);
  line-height: 1.12;
  margin: 14px 0
}

.sub {
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.75;
  max-width: 780px
}

.dark .sub {
  color: #b9c4d8
}

.accent {
  color: var(--gold)
}

.grid2 {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 44px;
  align-items: center
}

.visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 390px;
  box-shadow: 0 24px 70px rgba(7, 17, 33, .14);
  background: #dfe7f1
}

.visual>img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.badge {
  position: absolute;
  right: 18px;
  bottom: 18px;
  background: #fff;
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  font-weight: 900;
  color: #101827
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}

.cardx {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 46px rgba(7, 17, 33, .06);
  transition: .25s;
  height: 100%
}

.cardx:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 80px rgba(7, 17, 33, .12)
}

.cardx img {
  width: 100%;
  height: 200px;
  object-fit: cover
}

.cardbody {
  padding: 24px
}

.icon {
  width: 50px;
  height: 50px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color: #111;
  margin-bottom: 14px
}

.cardx h3,
.mini-card h3 {
  font-family: Poppins, sans-serif;
  font-size: 1.12rem;
  margin: 0 0 9px
}

.cardx p,
.mini-card p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
  font-size: .94rem
}

.link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  color: #0d91a7;
  font-weight: 900
}

.split {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 32px;
  align-items: start
}

.side {
  position: sticky;
  top: 102px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 14px;
  box-shadow: 0 18px 50px rgba(7, 17, 33, .06)
}

.side h4 {
  font-size: 1.45rem;
  margin: 8px 10px 14px
}

.side a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #1b2742;
  font-weight: 900;
  padding: 15px 16px;
  border-radius: 15px
}

.side a.active,
.side a:hover {
  background: #fbebf0;
  color: #bd4f70
}

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-top: 22px
}

.feat {
  display: flex;
  gap: 13px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff
}

.feat i {
  color: var(--pinkDark);
  margin-top: 3px
}

.feat strong {
  font-size: .95rem
}

.feat p {
  font-size: .9rem
}

.process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px
}

.step {
  background: #101d36;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 22px;
  padding: 24px;
  color: #fff
}

.step b {
  display: block;
  color: var(--pink2);
  font-size: 1.65rem;
  font-family: Poppins
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px
}

.brandbox {
  height: 88px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-weight: 900;
  color: #1b2742;
  box-shadow: 0 12px 30px rgba(7, 17, 33, .05)
}

.formgrid {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 28px
}

.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 22px 70px rgba(7, 17, 33, .08)
}

.field {
  width: 100%;
  border: 1px solid #dfe7f1;
  border-radius: 14px;
  background: #f8fafc;
  padding: 14px 15px;
  margin-bottom: 13px
}

.btnmain {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color: #101827;
  font-weight: 900;
  padding: 13px 22px
}

.cta {
  background: linear-gradient(135deg, #0b1730, #101d36);
  border-radius: 32px;
  padding: 48px;
  color: #fff;
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 24px;
  align-items: center;
  box-shadow: 0 24px 80px rgba(7, 17, 33, .24)
}

.footer {
  background: #050b16;
  color: #fff;
  padding: 68px 0 26px
}

.footgrid {
  display: grid;
  grid-template-columns: 1.3fr .8fr .9fr 1fr;
  gap: 32px
}

.footer img {
  height: 58px;
  margin-bottom: 16px
}

.footer p {
  color: #aab5c8;
  line-height: 1.7
}

.footer a {
  display: block;
  color: #aab5c8;
  margin: 9px 0
}

.footer a:hover {
  color: var(--pink2)
}

.copy {
  text-align: center;
  color: #7f8aa0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 20px;
  margin-top: 32px
}

.kpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 26px
}

.kpi div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 14px 36px rgba(7, 17, 33, .05)
}

.kpi b {
  font-family: Poppins;
  font-size: 1.8rem;
  color: var(--pinkDark)
}

.map {
  border: 0;
  width: 100%;
  height: 370px;
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(7, 17, 33, .08)
}

.contact-card {
  display: flex;
  gap: 15px;
  padding: 18px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid var(--line);
  margin-bottom: 14px
}

.contact-card i {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fbebf0;
  color: var(--pinkDark);
  display: grid;
  place-items: center
}

.solution-carousel {
  height: 430px;
  user-select: none;
  touch-action: pan-y;
  cursor: grab;
  background: #0b1730;
  position: relative
}

.solution-carousel:active {
  cursor: grabbing
}

.carousel-viewport {
  position: absolute;
  inset: 0;
  overflow: hidden
}

.carousel-track {
  display: flex;
  height: 100%;
  transition: transform .65s cubic-bezier(.22, .61, .36, 1);
  will-change: transform
}

.carousel-slide {
  min-width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.solution-carousel:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, transparent 45%, rgba(7, 17, 33, .34));
  pointer-events: none
}

.carousel-arrow {
  position: absolute;
  z-index: 4;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #101827;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .22);
  transition: .2s
}

.carousel-arrow:hover {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  transform: translateY(-50%) scale(1.06)
}

.carousel-arrow.prev {
  left: 18px
}

.carousel-arrow.next {
  right: 18px
}

.carousel-dots {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(10px)
}

.carousel-dot {
  width: 9px;
  height: 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .65);
  padding: 0;
  transition: .2s
}

.carousel-dot.active {
  width: 28px;
  background: linear-gradient(135deg, var(--pink), var(--pink2))
}

.solution-carousel .badge {
  z-index: 5
}

.grid-carousel {
  position: relative;
  overflow: hidden;
  margin-top: 28px
}

.grid-track {
  display: flex;
  gap: 22px;
  transition: transform .7s cubic-bezier(.22, .61, .36, 1);
  will-change: transform
}

.grid-card {
  min-width: calc((100% - 44px)/3);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(7, 17, 33, .07)
}

.grid-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block
}

.grid-card div {
  padding: 18px
}

.grid-card h3 {
  font-family: Poppins;
  font-size: 1.08rem;
  margin: 0 0 6px
}

.grid-controls {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 18px
}

.roundbtn {
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 10px 24px rgba(7, 17, 33, .06)
}

.mini-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px
}

.mini-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 14px 40px rgba(7, 17, 33, .05)
}

@media(max-width:991px) {
  .hamb {
    display: block
  }

  .navlinks {
    position: absolute;
    top: 78px;
    left: 4%;
    right: 4%;
    background: #0b1730;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 20px;
    display: none;
    flex-direction: column;
    align-items: flex-start
  }

  .navlinks.show {
    display: flex
  }

  .mega {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    display: none;
    box-shadow: none
  }

  .drop.open .mega {
    display: block
  }

  .mega-grid,
  .grid2,
  .split,
  .formgrid,
  .cta {
    grid-template-columns: 1fr
  }

  .cards {
    grid-template-columns: repeat(2, 1fr)
  }

  .process,
  .brand-grid,
  .kpi {
    grid-template-columns: repeat(2, 1fr)
  }

  .footgrid {
    grid-template-columns: 1fr 1fr
  }

  .side {
    position: relative;
    top: 0
  }

  .grid-card {
    min-width: calc((100% - 22px)/2)
  }

  .solution-carousel {
    height: 360px
  }
}

@media(max-width:575px) {
  .navwrap {
    height: 72px
  }

  .brand img {
    height: 46px
  }

  .navlinks {
    top: 72px
  }

  .hero {
    padding-top: 116px;
    min-height: 330px
  }

  .hero h1 {
    font-size: 2.2rem
  }

  .section {
    padding: 56px 0
  }

  .cards,
  .feature-list,
  .process,
  .brand-grid,
  .footgrid,
  .kpi,
  .mini-grid {
    grid-template-columns: 1fr
  }

  .visual,
  .solution-carousel {
    min-height: 300px;
    height: 300px
  }

  .cta {
    padding: 32px 22px
  }

  .carousel-arrow {
    width: 38px;
    height: 38px
  }

  .carousel-arrow.prev {
    left: 12px
  }

  .carousel-arrow.next {
    right: 12px
  }

  .solution-carousel .badge {
    display: none
  }

  .grid-card {
    min-width: 100%
  }

  .panel {
    padding: 24px
  }

  .side h4 {
    font-size: 1.25rem
  }
}


/* Final premium compact refinements */
.hero {
  padding: 118px 0 58px;
  min-height: 310px
}

.hero h1 {
  font-size: clamp(2rem, 3.8vw, 3.45rem);
  letter-spacing: -.04em
}

.hero p {
  font-size: .98rem;
  max-width: 760px
}

.section {
  padding: 62px 0
}

.title {
  font-size: clamp(1.55rem, 2.55vw, 2.3rem);
  letter-spacing: -.035em
}

.sub {
  font-size: .95rem
}

.split {
  grid-template-columns: 290px 1fr;
  gap: 36px
}

.side {
  overflow: hidden
}

.solution-carousel {
  height: 380px;
  border-radius: 28px;
  overflow: hidden
}

.carousel-track.dragging {
  transition: none !important
}

.carousel-arrow {
  cursor: pointer
}

.carousel-arrow:active {
  transform: translateY(-50%) scale(.96)
}

.carousel-slide {
  flex: 0 0 100%
}

.carousel-slide img {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none
}

.feature-list {
  gap: 14px
}

.feat {
  padding: 15px
}

.grid-card img {
  height: 175px
}

.grid-card div {
  padding: 17px
}

.grid-card h3 {
  font-size: 1rem
}

.grid-card p {
  font-size: .9rem;
  line-height: 1.55
}

.brand-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 28px
}

.brandbox {
  height: 104px;
  position: relative;
  overflow: hidden;
  transition: .28s ease;
  background: linear-gradient(180deg, #fff, #f9fbff)
}

.brandbox img {
  max-width: 72%;
  max-height: 46px;
  object-fit: contain;
  filter: saturate(1.05);
  transition: .28s ease
}

.brandbox span {
  font-weight: 900;
  font-size: .95rem
}

.brandbox:before {
  content: "";
  position: absolute;
  inset: auto -20% -70% -20%;
  height: 80%;
  background: radial-gradient(circle, rgba(240, 138, 164, .22), transparent 62%);
  transition: .28s ease
}

.brandbox:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 70px rgba(7, 17, 33, .14);
  border-color: rgba(240, 138, 164, .45)
}

.brandbox:hover img {
  transform: scale(1.08)
}

.brandbox:hover:before {
  bottom: -38%
}

.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}

.mv-card {
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 15px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(7, 17, 33, .06);
  position: relative;
  overflow: hidden
}

.mv-card:after {
  content: "";
  position: absolute;
  right: -35px;
  top: -35px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(240, 138, 164, .12)
}

.mv-card .icon {
  margin-bottom: 18px
}

.image-box-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  grid-template-rows: 180px 180px;
  gap: 18px
}

.image-box-grid .imgbox {
  border-radius: 24px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 18px 50px rgba(7, 17, 33, .08)
}

.image-box-grid .imgbox:first-child {
  grid-row: span 2
}

.image-box-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .4s ease
}

.image-box-grid .imgbox:hover img {
  transform: scale(1.06)
}

.image-box-grid .label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: #fff;
  border-radius: 999px;
  padding: 8px 13px;
  font-weight: 900;
  font-size: .85rem
}

.modern-process {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  position: relative
}

.modern-step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 26px 22px;
  box-shadow: 0 18px 50px rgba(7, 17, 33, .06);
  position: relative;
  overflow: hidden
}

.modern-step b {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  font-family: Poppins;
  color: #101827;
  margin-bottom: 18px
}

.modern-step h3 {
  font-size: 1.05rem;
  margin-bottom: 8px
}

.modern-step p {
  font-size: .9rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0
}

.modern-step:after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -28px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: rgba(64, 213, 232, .10)
}

@media(max-width:991px) {
  .split {
    grid-template-columns: 1fr
  }

  .side {
    position: relative;
    top: auto
  }

  .solution-carousel {
    height: 320px
  }

  .brand-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .mv-grid,
  .modern-process {
    grid-template-columns: 1fr 1fr
  }

  .image-box-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none
  }

  .image-box-grid .imgbox {
    height: 220px
  }

  .image-box-grid .imgbox:first-child {
    grid-row: auto
  }
}

@media(max-width:575px) {
  .hero {
    padding: 104px 0 46px
  }

  .section {
    padding: 46px 0
  }

  .solution-carousel {
    height: 260px;
    border-radius: 22px
  }

  .carousel-arrow {
    width: 38px;
    height: 38px
  }

  .carousel-arrow.prev {
    left: 10px
  }

  .carousel-arrow.next {
    right: 10px
  }

  .mv-grid,
  .modern-process,
  .brand-grid {
    grid-template-columns: 1fr
  }

  .grid-card {
    min-width: 100%
  }

  .title {
    font-size: 1.55rem
  }

  .side h4 {
    font-size: 1.2rem
  }
}

/* Theme sync with approved home page - applied only to inner pages */
:root {
  --navy: #0B132B;
  --navy2: #080e1c;
  --panel: #101827;
  --ink: #111827;
  --muted: #4B5563;
  --soft: #F5F7FA;
  --line: #e2e8f0;
  --pink: #e97790;
  --pinkDark: #c45272;
  --pink2: #f5c2ce;
  --gold: #e2981a;
  --cyan: #0099BB;
  --white: #fff;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color: #111827;
  background: #fff;
  font-size: 15px;
  line-height: 1.65;
}

.topbar {
  background: rgb(0 0 0 / 96%);
  border-bottom: 1px solid rgba(0, 212, 255, .10);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .25);
}

.navwrap {
  height: 76px;
}

.navlinks {
  gap: 18px;
}

.navlinks>a,
.dropbtn {
  font-size: .86rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .86);
}

.navlinks>a:hover,
.navlinks>a.active,
.drop:hover .dropbtn {
  color: var(--pink);
}

.quote,
.btnmain {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  box-shadow: 0 8px 30px rgba(233, 119, 144, .28);
  border-radius: 999px;
  color: #111827 !important;
  font-size: .82rem;
  text-transform: capitalize;
}

.mega {
  border-radius: 18px;
  border: 1px solid rgba(0, 153, 187, .18);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.mega a {
  font-size: .9rem;
  color: #172033;
}

.mega a:hover {
  background: rgba(233, 119, 144, .10);
  color: var(--pinkDark);
}

.mega i,
.icon,
.modern-step b {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
  color: #111827;
}

.hero {
  padding: 118px 0 54px;
  min-height: 292px;
  background: linear-gradient(90deg, rgba(8, 14, 28, .97), rgba(11, 19, 43, .76)), var(--bg) center/cover;
  color: #fff;
}

.hero:after {
  background: radial-gradient(circle, rgba(0, 153, 187, .18), transparent 70%);
}

.crumb {
  font-size: .78rem;
  color: rgba(255, 255, 255, .65);
  font-weight: 700;
}

.crumb a {
  color: var(--pink2);
}

.hero h1 {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: clamp(2.05rem, 4.2vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.045em;
  margin: 14px 0 12px;
  font-weight: 900;
  max-width: 860px;
}

.hero p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, .70);
  max-width: 760px;
  margin: 0;
}

.section {
  padding: 60px 0;
}

.section.alt {
  background: #F5F7FA;
}

.section.dark {
  background: linear-gradient(135deg, #080e1c 0%, #0B132B 100%);
}

.eyebrow {
  font-size: .68rem;
  letter-spacing: .16em;
  color: var(--cyan);
  border: 1px solid rgba(0, 153, 187, .35);
  background: rgba(0, 153, 187, .06);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 900;
}

.dark .eyebrow {
  background: rgba(255, 255, 255, .04);
  color: var(--pink2);
  border-color: rgba(233, 119, 144, .25);
}

.title {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: clamp(1.55rem, 3vw, 2.28rem);
  line-height: 1.14;
  letter-spacing: -.04em;
  font-weight: 800;
  margin: 12px 0;
}

.sub {
  font-size: .95rem;
  line-height: 1.75;
     color: black;
  max-width: 780px;
}
.cta .sub {
  font-size: .95rem;
  line-height: 1.75;
     color: #d9d9d9;
  max-width: 780px;
}
.dark .sub {
  color: #9CA3AF;
}

.accent {
  color: var(--gold);
}

.visual {
  border-radius: 22px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .14);
  min-height: 360px;
}

.badge {
     border-radius: 999px;
    padding: 12px 18px;
    font-size: 1.26rem;
    font-weight: 900;
    color: #111827;
}

.cardx,
.panel,
.side,
.mv-card,
.modern-step,
.grid-card,
.brandbox,
.feat,
.contact-card {
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .055);
}

.cardx {
  border-radius: 18px;
}

.cardx:hover,
.brandbox:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, .12), 0 0 30px rgba(0, 153, 187, .08);
}

.cardx h3,
.mini-card h3,
.grid-card h3,
.modern-step h3,
.mv-card h3 {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 900;
  color: #111827;
}

.cardx p,
.mini-card p,
.grid-card p,
.modern-step p,
.mv-card p {
  font-size: .9rem;
  line-height: 1.6;
  color: #4B5563;
}

.link {
  color: var(--cyan);
  font-size: .82rem;
}

.side {
  border-radius: 22px;
  padding: 20px;
}

.side h4 {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 6px 10px 12px;
  color: #111827;
}

.side a {
  font-size: .94rem;
  font-weight: 900;
  padding: 13px 14px;
  color: #172033;
}

.side a.active,
.side a:hover {
  background: rgba(233, 119, 144, .14);
  color: var(--pinkDark);
}

.solution-carousel {
  height: 360px;
  border-radius: 24px;
  background: #0B132B;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .16);
}

.carousel-arrow {
  width: 42px;
  height: 42px;
  background: rgba(255, 255, 255, .94);
  color: #111827;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .20);
}

.carousel-arrow:hover {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
}

.carousel-dot.active {
  background: linear-gradient(135deg, var(--pink), var(--pink2));
}

.grid-card {
  border-radius: 20px;
}

.grid-card img {
  height: 170px;
}

.grid-controls .roundbtn,
.roundbtn {
  border-color: #e2e8f0;
  color: #111827;
}

.kpi b {
  font-family: 'Montserrat', 'Poppins', sans-serif;
  color: var(--pink);
  font-size: 1.65rem;
}

.kpi p {
  font-size: .84rem;
  color: #4B5563;
  margin: 0;
}

.brandbox {
  border-radius: 16px;
  background: #fff;
  height: 96px;
}

.brandbox:hover {
  border-color: rgba(0, 153, 187, .38);
  transform: translateY(-7px);
}

.brandbox:before {
  background: radial-gradient(circle, rgba(0, 153, 187, .14), transparent 62%);
}

.formgrid {
  gap: 26px;
}

.field {
  border: 1px solid #e2e8f0;
  background: #F8FAFC;
  border-radius: 12px;
  font-size: .9rem;
}

.map {
  border-radius: 22px;
}

.footer {
  background: #080e1c;
}

.cta {
  background: linear-gradient(135deg, #080e1c, #0B132B);
  border-radius: 24px;
}

@media(max-width:991px) {
  .navlinks {
    background: rgb(0 0 0 / 98%);
  }

  .section {
    padding: 52px 0
  }

  .solution-carousel {
    height: 320px
  }

  .title {
    font-size: clamp(1.45rem, 4vw, 2rem)
  }
}

@media(max-width:575px) {
  body {
    font-size: 14px
  }

  .navwrap {
    height: 72px
  }

  .hero {
    padding: 104px 0 42px;
    min-height: 270px
  }

  .hero h1 {
    font-size: 2rem
  }

  .hero p {
    font-size: .94rem
  }

  .section {
    padding: 44px 0
  }

  .solution-carousel {
    height: 260px;
    border-radius: 20px
  }

  .side a {
    font-size: .9rem
  }

  .cardbody {
    padding: 20px
  }

  .grid-card img {
    height: 165px
  }
}

/* Final header/footer exact match with approved home page */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 20px 0;
  transition: all .4s ease;
  background: transparent;
}

#mainNav.scrolled,
#mainNav.inner-nav {
  background: rgb(0 0 0 / 96%);
  backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .4);
  border-bottom: 1px solid rgba(0, 212, 255, .1);
}

.nav-logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--white);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-logo img {
  width: 140px;
  height: auto;
  display: block;
}

#mainNav .nav-link {
  color: rgba(255, 255, 255, .85) !important;
  font-size: .88rem;
  font-weight: 500;
  letter-spacing: .04em;
  padding: 8px 14px !important;
  transition: color .2s;
}

#mainNav .nav-link:hover,
#mainNav .nav-link.active {
  color: var(--cyan) !important;
}

.navbar-toggler {
  border: 1px solid rgba(0, 212, 255, .4);
  box-shadow: none !important;
}

.navbar-toggler-icon {
  filter: invert(1);
}

#mainNav .btn-cyan {
  /* background: linear-gradient(135deg, var(--cyan), var(--teal)); */
     background: linear-gradient(135deg, #f5c2ce, var(--teal));
  color: #000 !important;
  font-weight: 600;
  border: none;
  border-radius: 50px;
  padding: 13px 32px;
  font-size: .95rem;
  letter-spacing: .03em;
  transition: all .3s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: none;
  text-transform: none;
}

#mainNav .btn-cyan:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(0, 212, 255, .45);
  color: #000 !important;
}

.footer {
  background: #060b17 !important;
  border-top: 1px solid rgba(0, 212, 255, .1);
  padding: 80px 0 0 !important;
  color: #fff;
}

.footer-logo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.4rem;
  color: var(--white);
  display: flex !important;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 16px;
}

.footer-logo img {
  width: 200px;
  height: auto !important;
  margin: 0 !important;
}

.footer-about {
  font-size: .85rem !important;
  color: var(--gray-text, #9CA3AF) !important;
  line-height: 1.7;
  margin: 0;
}

.footer-heading {
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 20px;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 10px;
}

.footer-links a {
  font-size: .88rem;
  color: var(--gray-text, #9CA3AF);
  text-decoration: none;
  transition: color .2s;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}

.footer-links a::before {
  content: '';
  width: 6px;
  height: 1px;
  background: var(--cyan);
  display: block;
  opacity: .5;
  transition: opacity .2s;
  flex: 0 0 auto;
}

.footer-links.contact a::before {
  content: none;
}

.footer-links a:hover {
  color: var(--cyan);
}

.footer-links a:hover::before {
  opacity: 1;
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .06);
  padding: 22px 0;
  margin-top: 60px;
}

.footer-bottom p {
  font-size: .82rem !important;
  color: var(--gray-text, #9CA3AF) !important;
  margin: 0;
  line-height: 1.7;
}

.footer-bottom a {
  color: #fff;
  text-decoration: none;
  display: inline;
  margin: 0;
}

.social-icons {
  display: flex;
  gap: 10px;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex !important;
  align-items: center;
  justify-content: center;
  color: var(--gray-text, #9CA3AF);
  font-size: .85rem;
  text-decoration: none;
  transition: all .3s;
  margin: 0 !important;
}

.social-icon:hover {
  background: rgba(0, 212, 255, .15);
  border-color: var(--cyan);
  color: var(--cyan);
  transform: translateY(-3px);
}

@media(max-width:991px) {
  #mainNav {
    background: rgb(0 0 0 / 96%);
    padding: 12px 0;
  }

  #mainNav .navbar-collapse {
    background: rgb(0 0 0 / 98%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    margin-top: 14px;
    padding: 16px;
  }

  #mainNav .nav-link {
    padding: 10px 0 !important
  }

  .nav-logo img {
    width: 170px;
  }
}

@media(max-width:576px) {
  .footer {
    padding-top: 60px !important
  }

  .nav-logo img {
    width: 112px
  }

  .footer-logo img {
    width: 170px
  }
}


/* Final floating actions + inner page sticky header behavior */
:root {
  --teal: #e97790;
}

body {
  padding-top: 0;
}

#mainNav.inner-page-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent !important;
  backdrop-filter: none;
  padding: 20px 0;
  box-shadow: none;
  border-bottom: 1px solid transparent;
  transition: background .35s ease, padding .35s ease, box-shadow .35s ease, border-color .35s ease;
}

#mainNav.inner-page-nav.scrolled {
  background: rgba(0, 0, 0, .96) !important;
  backdrop-filter: blur(20px);
  padding: 12px 0;
  box-shadow: 0 4px 30px rgba(0, 0, 0, .4);
  border-bottom: 1px solid rgba(245, 194, 206, .14);
}

#mainNav.inner-page-nav .nav-link {
  color: rgba(255, 255, 255, .9) !important;
}

#mainNav.inner-page-nav .nav-link:hover,
#mainNav.inner-page-nav .nav-link.active {
  color: var(--cyan) !important;
}

.floating-whatsapp {
  position: fixed;
  left: 18px;
  bottom: 95px;
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #25D366;
  color: #fff !important;
  border-radius: 999px;
  padding: 12px 16px 12px 14px;
  font-weight: 800;
  font-size: .86rem;
  box-shadow: 0 15px 40px rgba(37, 211, 102, .34);
  animation: whatsappPulse 1.8s infinite;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.floating-whatsapp i {
  font-size: 1.35rem;
  line-height: 1;
}

.floating-whatsapp:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 20px 55px rgba(37, 211, 102, .48);
}

.floating-whatsapp:before {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 1px solid rgba(37, 211, 102, .45);
  animation: whatsappRing 1.8s infinite;
}

.back-to-top {
  position: fixed;
  right: 22px;
  bottom: 28px;
  z-index: 1100;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cyan), var(--teal));
  color: #08111f;
  box-shadow: 0 14px 35px rgba(233, 119, 144, .30);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: all .25s ease;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(233, 119, 144, .42);
}

@keyframes whatsappPulse {

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

  50% {
    transform: translateY(-4px)
  }
}

@keyframes whatsappRing {
  0% {
    transform: scale(.94);
    opacity: .75
  }

  100% {
    transform: scale(1.2);
    opacity: 0
  }
}

@media(max-width:991px) {
  #mainNav.inner-page-nav {
    background: rgba(0, 0, 0, .96) !important;
    padding: 6px 0;
    backdrop-filter: blur(20px)
  }

  .floating-whatsapp {
    left: 14px;
    bottom: 86px;
    padding: 11px 12px
  }

  .floating-whatsapp span {
    display: none
  }

  .back-to-top {
    right: 16px;
    bottom: 24px;
    width: 44px;
    height: 44px
  }
}


/* Solutions mega dropdown - final addition */
#mainNav .nav-has-mega {
  position: relative;
}

#mainNav .solution-mega-menu {
    position: absolute;
        top: calc(50% + 18px);
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    width: min(550px, 92vw);
    background: #fff;
    border: 1px solid rgba(226, 232, 240, .95);
    border-radius: 33 13 33px 28px;
    padding: 26px 28px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .20);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* transition: opacity .25s ease, transform .25s ease, visibility .25s ease; */
    z-index: 1100;
}

#mainNav .nav-has-mega:hover .solution-mega-menu,
#mainNav .nav-has-mega:focus-within .solution-mega-menu {
      opacity: 1;
    visibility: visible;
    border-radius: 10px;
    pointer-events: auto;
    transform: translateX(-43%) translateY(0);
}

#mainNav .solution-mega-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 30px;
}

#mainNav .solution-mega-grid a {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #172033;
  text-decoration: none;
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: -.01em;
  padding: 8px 0;
  transition: color .2s ease, transform .2s ease;
}

#mainNav .solution-mega-grid a:hover {
  color: #e97790;
  transform: translateX(4px);
}

#mainNav .solution-mega-grid span {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: #f5c2ce;
  color: #050b16;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background .2s ease, transform .2s ease;
}

#mainNav .solution-mega-grid a:hover span {
  background: #e97790;
  transform: scale(1.06);
}

@media(max-width:991px) {
  #mainNav .nav-has-mega {
    position: static;
  }

  #mainNav .solution-mega-menu {
    position: static;
    transform: none !important;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 16px;
    margin-top: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .10);
  }

  #mainNav .solution-mega-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #mainNav .solution-mega-grid a {
    color: #fff;
    font-size: .9rem;
    padding: 8px;
  }

  #mainNav .solution-mega-grid span {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }


  .mv-card{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    height:100%;
}

.mv-card .icon{
    margin-bottom:15px;
}

.mv-card h3{
    margin-bottom:12px;
}

.mv-card p{
    margin-bottom:0;
    max-width:300px;
}

 .cardbody{
        text-align: center;
    }

    .cardbody .icon{
        display: flex;
        justify-content: center;
        margin-bottom: 15px;
    }

    .cardbody h3,
    .cardbody p{
        text-align: center;
    }
     .cardbody{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .section.dark {
    text-align: center;
    background: linear-gradient(135deg, #080e1c 0%, #0B132B 100%);
}
.grid2{
  text-align: center;
}

.modern-step{
    text-align: center;
}

.modern-step b{
    /* display: block; */
    margin-bottom: 12px;
}

.modern-step h3{
    margin-bottom: 10px;
}
.modern-step{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
  .modern-step{
        text-align: center;
        align-items: center;
    }
    .center1{
      text-align: center;
    }
    .side {
    border-radius: 22px;
    padding: 20px;
    display: none;
}
}

.solution-carousel .badge {
    z-index: 5;
    display: none;
}







/* Mobile Solutions dropdown behavior */
#mainNav .solution-toggle {
  border: 0;
  background: transparent;
  cursor: pointer;
}

@media (min-width: 992px) {
  #mainNav .solution-toggle {
    display: flex;
    align-items: center;
  }
}

@media (max-width: 991px) {
  #mainNav .nav-has-mega {
    position: static;
  }

  #mainNav .nav-has-mega .solution-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  #mainNav .nav-has-mega .solution-toggle i {
    transition: transform .2s ease;
  }

  #mainNav .nav-has-mega.mega-open .solution-toggle i {
    transform: rotate(180deg);
  }

  #mainNav .solution-mega-menu {
    display: none;
    position: static;
    transform: none !important;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border-radius: 16px;
    margin-top: 8px;
    padding: 14px;
    background: rgba(255, 255, 255, .06);
    border-color: rgba(255, 255, 255, .10);
  }

  #mainNav .nav-has-mega.mega-open .solution-mega-menu {
    display: block;
  }

  #mainNav .solution-mega-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  #mainNav .solution-mega-grid a {
    color: #fff;
    font-size: .9rem;
    padding: 8px;
  }

  #mainNav .solution-mega-grid span {
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }
}






/*==================================
TEAM SECTION
==================================*/

.team-section{
    padding:100px 0;
    background:#f8fafc;
}

.team-heading{
    text-align:center;
    max-width:750px;
    margin:0 auto 60px;
}

.team-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.team-card{
    background:#ffffff;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    transition:.4s ease;
}

.team-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 60px rgba(0,0,0,.15);
}

.team-image{
    height:320px;
    overflow:hidden;
}

.team-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
    display:block;
}

.team-card:hover img{
    transform:scale(1.08);
}

.team-content {
    padding: 12px;
    /* font-weight: 800; */
    text-align: center;
}

.team-content h3{
    margin:0;
    font-size:20px;
    font-weight: 800; 
    color:#222;
}

.team-content span{
    display:block;
    color:#0d6efd;
    font-weight:600;
    margin:10px 0 15px;
    font-size:15px;
}

.team-content p{
    color:#666;
    font-size:15px;
    line-height:1.8;
    margin-bottom:25px;
}

.team-social{
    display:flex;
    justify-content:center;
    gap:12px;
}

.team-social a{
    width:42px;
    height:42px;
    background:#f1f5f9;
    color:#222;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    transition:.35s;
}

.team-social a:hover{
    background:#0d6efd;
    color:#fff;
    transform:translateY(-5px);
}

/* Tablet */

@media(max-width:992px){

.team-grid{
    grid-template-columns:repeat(2,1fr);
}

}

/* Mobile */

@media(max-width:768px){

.team-section{
    padding:70px 0;
}

.team-grid{
    grid-template-columns:1fr;
}

.team-image{
    height:280px;
}

.team-content{
    padding:25px;
}

}






html, body {
    overflow-x: hidden !important;
    max-width: 100%;
    width: 100%;
}

*, *::before, *::after {
    box-sizing: border-box;
}


@media (max-width: 768px) {
    .about-floating-card {
        position: relative;
        bottom: 0;
        left: 0;
        margin-top: 15px;
        max-width: 100%;
    }
}


.overflow-safe-section {
    overflow-x: hidden;
    width: 100%;
}