* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --header-h: 80px;
  --blue: #2563eb;
  --blue-dark: #1a3a6b;
}
body {
  font-family: 'Inter', sans-serif;
  background: #f0f2f5;
  color: #1f2937;
  overflow-x: hidden;
}
/* HEADER */
.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #fff;
  transition: all 0.3s ease;
}
.header.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}
.header-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-icon img {
  width: 100%;
  height: 100%;
}
.logo-fallback {
  color: #fff;
  font-size: 20px;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.logo-text .brand {
  font-size: 20px;
  font-weight: 700;
  color: #1a3a6b;
  letter-spacing: -0.5px;
}
.logo-text .tagline {
  font-size: 9px;
  color: #7a8ba5;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 500;
}
.nav {
  display: flex;
  align-items: center;
}
.nav-item {
  position: relative;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 28px 20px;
  text-decoration: none;
  color: #3a4a5c;
  font-size: 14.5px;
  font-weight: 500;
  transition: all 0.25s ease;
  position: relative;
  white-space: nowrap;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #3b82f6);
  border-radius: 3px 3px 0 0;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.nav-link:hover, .nav-item:hover .nav-link {
  color: #2563eb;
}
.nav-link:hover::after, .nav-item:hover .nav-link::after {
  transform: scaleX(1);
}
.nav-link .arrow {
  font-size: 10px;
  transition: transform 0.3s ease;
  color: #8a9ab5;
}
.nav-item:hover .nav-link .arrow {
  transform: rotate(180deg);
  color: #2563eb;
}
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  margin-left: 24px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(37, 99, 235, 0.3);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  transition: left 0.5s ease;
}
.cta-btn:hover::before {
  left: 100%;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
}
.cta-btn i {
  font-size: 12px;
}
/* MEGA MENU */
.mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #fff;
  border-radius: 0 0 16px 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  border-top: 3px solid #2563eb;
  overflow: hidden;
}
.mega-menu::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #2563eb, #60a5fa, #2563eb);
}
.nav-item:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
.mega-header {
  padding: 20px 35px 14px;
  border-bottom: 1px solid #f0f2f5;
  text-align: center;
}
.mega-header h3 {
  font-size: 13px;
  color: #1a3a6b;
  font-weight: 600;
}
.mega-who {
  width: 320px;
}
.mega-who .mega-body {
  display: block;
  padding: 18px 20px 22px;
}
.mega-who .mega-column {
  padding: 0;
  border-right: none !important;
}
.mega-services {
  width: 900px;
}
.mega-services .mega-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 25px 20px 30px;
}
.mega-industries {
  width: 720px;
}
.mega-industries .mega-body {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 25px 20px 30px;
}
.mega-column {
  padding: 0 15px;
}
.mega-column:not(:last-child) {
  border-right: 1px solid #f0f2f5;
}
.mega-column-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #8a9ab5;
  font-weight: 600;
  margin-bottom: 18px;
  padding-bottom: 10px;
  position: relative;
}
.mega-column-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, transparent);
  border-radius: 2px;
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  text-decoration: none;
  color: #4a5568;
  font-size: 13.5px;
  border-radius: 8px;
  transition: all 0.2s ease;
  margin-bottom: 2px;
}
.mega-link::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d1d9e6;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.mega-link:hover {
  background: #f0f5ff;
  color: #2563eb;
  padding-left: 16px;
}
.mega-link:hover::before {
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
/* MOBILE */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}
.mobile-toggle span {
  width: 24px;
  height: 2.5px;
  background: #1a3a6b;
  border-radius: 3px;
  transition: all 0.3s ease;
}
.mobile-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.mobile-toggle.active span:nth-child(2) {
  opacity: 0;
}
.mobile-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}
.nav-overlay {
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  height: calc(100vh - var(--header-h));
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 998;
}
.nav-overlay.active {
  opacity: 1;
  visibility: visible;
}
/* HERO */
.hero {
  position: relative;
  width: 100%;
  height: calc(100vh - var(--header-h));
  min-height: 520px;
  margin-top: var(--header-h);
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #0b1220;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.55) 0%, rgba(13, 27, 64, 0.78) 100%), radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.35), transparent 60%);
}
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 900px;
  padding: 0 24px;
  text-align: center;
  color: #fff;
  animation: fadeUp 1s ease both;
}
.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  margin-bottom: 22px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  backdrop-filter: blur(8px);
}
.hero-tag i {
  color: #fbbf24;
  font-size: 11px;
}
.hero-title {
  font-size: clamp(30px, 5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.hero-title span {
  background: linear-gradient(90deg, #60a5fa, #93c5fd);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
  max-width: 680px;
  margin: 0 auto 34px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn-primary, .btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.45);
}
.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 38px rgba(37, 99, 235, 0.55);
}
.btn-outline {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(8px);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
}
.scroll-down {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 42px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  z-index: 3;
  display: flex;
  justify-content: center;
  padding-top: 7px;
}
.scroll-down span {
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 4px;
  animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot {
  0% {
    opacity: 0;
    transform: translateY(0)
  }
  40% {
    opacity: 1
  }
  80% {
    opacity: 0;
    transform: translateY(12px)
  }
  100% {
    opacity: 0
  }
}
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px)
  }
  to {
    opacity: 1;
    transform: translateY(0)
  }
}
/* SHARED */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px;
}
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  margin-bottom: 18px;
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}
.section-tag i {
  font-size: 6px;
}
.section-tag.light {
  background: rgba(255, 255, 255, 0.15);
  color: #93c5fd;
}
.section-title {
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 800;
  line-height: 1.2;
  color: #1a3a6b;
  letter-spacing: -0.5px;
  margin-bottom: 18px;
}
.section-title span {
  background: linear-gradient(90deg, #2563eb, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-title.light {
  color: #fff;
}
.section-title.light span {
  background: linear-gradient(90deg, #93c5fd, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.section-lead {
  font-size: 17px;
  line-height: 1.7;
  color: #4a5568;
  margin-bottom: 16px;
}
.section-lead.light {
  color: rgba(255, 255, 255, 0.85);
}
.section-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #6b7c93;
  margin-bottom: 26px;
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  background: transparent;
  color: #1a3a6b;
  border: 1.5px solid #d1d9e6;
  transition: all 0.3s ease;
}
.btn-ghost:hover {
  border-color: #2563eb;
  color: #2563eb;
  transform: translateY(-3px);
}
/* INTRODUCTION */
.intro {
  padding: 100px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f6f9ff 100%);
  position: relative;
  overflow: hidden;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 70px;
  align-items: center;
}
.intro-visual {
  position: relative;
}
.intro-img {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 4/4.2;
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
  box-shadow: 0 30px 60px rgba(26, 58, 107, 0.18);
}
.intro-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.intro-img-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #2563eb;
  font-size: 90px;
  opacity: 0.35;
}
.intro-shape {
  position: absolute;
  top: -30px;
  left: -30px;
  width: 130px;
  height: 130px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2563eb, #60a5fa);
  opacity: 0.15;
  z-index: -1;
}
.intro-badge {
  position: absolute;
  bottom: -25px;
  right: -20px;
  background: #fff;
  padding: 22px 26px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 20px 40px rgba(26, 58, 107, 0.18);
  border-left: 4px solid #2563eb;
}
.intro-badge-num {
  font-size: 38px;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #2563eb, #1a3a6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.intro-badge-txt {
  font-size: 13px;
  color: #4a5568;
  line-height: 1.3;
  font-weight: 500;
}
.intro-points {
  list-style: none;
  margin-bottom: 32px;
}
.intro-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 9px 0;
  color: #3a4a5c;
  font-size: 15px;
}
.intro-points i {
  color: #2563eb;
  font-size: 17px;
  margin-top: 2px;
}
.intro-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
/* ============ OUR SERVICES (INTERACTIVE SHOWCASE) ============ */
.services {
  position: relative;
  padding: 110px 0;
  background: linear-gradient(135deg, #fdfbf5 0%, #f4f9f4 50%, #eef7f5 100%);
  overflow: hidden;
}
.services-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.18), transparent 40%), radial-gradient(circle at 90% 80%, rgba(245, 158, 11, 0.15), transparent 45%), radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.1), transparent 50%);
  animation: meshMove 18s ease-in-out infinite alternate;
}
@keyframes meshMove {
  0% {
    transform: translate(0, 0) scale(1)
  }
  100% {
    transform: translate(-30px, 20px) scale(1.1)
  }
}
.services .container {
  position: relative;
  z-index: 2;
}
.services-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
}
.services-head .section-title span {
  background: linear-gradient(90deg, #059669, #14b8a6, #f59e0b);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shineText 4s linear infinite;
}
@keyframes shineText {
  to {
    background-position: 200% center;
  }
}
.showcase {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: stretch;
  min-height: 520px;
}
/* LEFT TABS */
.showcase-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.show-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(5, 150, 105, 0.12);
  border-radius: 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
  backdrop-filter: blur(8px);
}
.show-item:hover {
  background: #fff;
  transform: translateX(6px);
  border-color: rgba(5, 150, 105, 0.3);
  box-shadow: 0 10px 24px rgba(5, 150, 105, 0.12);
}
.show-item.active {
  background: linear-gradient(135deg, #059669, #14b8a6);
  border-color: transparent;
  box-shadow: 0 16px 36px rgba(5, 150, 105, 0.35);
  transform: translateX(8px);
}
.show-num {
  font-size: 22px;
  font-weight: 800;
  color: #059669;
  transition: color 0.3s;
  min-width: 36px;
}
.show-item.active .show-num {
  color: rgba(255, 255, 255, 0.85);
}
.show-name {
  font-size: 15.5px;
  font-weight: 600;
  color: #1a3a6b;
  transition: color 0.3s;
  flex: 1;
}
.show-item.active .show-name {
  color: #fff;
}
.show-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, #f59e0b, #ef4444);
  transform: scaleY(0);
  transition: transform 0.4s;
}
.show-item.active .show-bar {
  transform: scaleY(1);
}
/* RIGHT STAGE */
.showcase-stage {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  background: linear-gradient(135deg, #064e3b 0%, #065f46 50%, #115e59 100%);
  box-shadow: 0 30px 70px rgba(6, 78, 59, 0.35);
  min-height: 520px;
}
.showcase-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(245, 158, 11, 0.25), transparent 50%), radial-gradient(circle at 20% 80%, rgba(20, 184, 166, 0.3), transparent 50%);
  pointer-events: none;
}
.stage-card {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 30px;
  padding: 50px 46px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(40px);
  transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.stage-card.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
.stage-visual {
  position: relative;
  display: grid;
  place-items: center;
}
.stage-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}
.stage-rings span {
  position: absolute;
  border: 1.5px dashed rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  animation: ringPulse 4s ease-in-out infinite;
}
.stage-rings span:nth-child(1) {
  width: 180px;
  height: 180px;
  animation-delay: 0s;
}
.stage-rings span:nth-child(2) {
  width: 260px;
  height: 260px;
  animation-delay: 0.6s;
}
.stage-rings span:nth-child(3) {
  width: 340px;
  height: 340px;
  animation-delay: 1.2s;
  border-style: solid;
  border-color: rgba(245, 158, 11, 0.15);
}
@keyframes ringPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.6
  }
  50% {
    transform: scale(1.08);
    opacity: 1
  }
}
.stage-icon {
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 32px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 52px;
  box-shadow: 0 20px 50px rgba(245, 158, 11, 0.45);
  animation: floatIcon 4s ease-in-out infinite;
  z-index: 2;
}
@keyframes floatIcon {
  0%, 100% {
    transform: translateY(0) rotate(0)
  }
  50% {
    transform: translateY(-12px) rotate(-4deg)
  }
}
.stage-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  position: relative;
  z-index: 2;
}
.stage-tag {
  display: inline-block;
  padding: 5px 14px;
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
  border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 18px;
  align-self: flex-start;
}
.stage-body h3 {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 16px;
  letter-spacing: -0.5px;
}
.stage-body p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 22px;
}
.stage-body ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 28px;
}
.stage-body ul li {
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50px;
  font-size: 13px;
  backdrop-filter: blur(6px);
}
.stage-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #fff;
  color: #065f46;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.3s;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}
.stage-btn:hover {
  transform: translateX(6px);
  background: #fcd34d;
  color: #064e3b;
}
.stage-btn i {
  transition: transform 0.3s;
}
.stage-btn:hover i {
  transform: translateX(4px);
}
/* RESPONSIVE */
@media (max-width: 1100px) {
  .nav-link {
    padding: 28px 14px;
    font-size: 13.5px;
  }
  .mega-services {
    width: 750px;
  }
  .mega-industries {
    width: 620px;
  }
  .showcase {
    grid-template-columns: 0.9fr 1.1fr;
    gap: 24px;
  }
  .stage-card {
    padding: 36px 30px;
  }
  .stage-body h3 {
    font-size: 24px;
  }
  .stage-icon {
    width: 100px;
    height: 100px;
    font-size: 40px;
  }
}
@media (max-width: 992px) {
  .mobile-toggle {
    display: flex;
  }
  .nav {
    position: fixed;
    top: var(--header-h);
    right: -100%;
    width: 85%;
    max-width: 340px;
    height: calc(100vh - var(--header-h));
    background: #fff;
    flex-direction: column;
    align-items: stretch;
    padding: 15px 0;
    overflow-y: auto;
    transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.1);
    z-index: 999;
  }
  .nav.open {
    right: 0;
  }
  .nav-item {
    width: 100%;
  }
  .nav-link {
    padding: 14px 22px;
    justify-content: space-between;
    width: 100%;
  }
  .nav-link::after {
    display: none;
  }
  .mega-menu {
    position: static;
    transform: none !important;
    box-shadow: none;
    border-radius: 0;
    border-top: none;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 0;
    overflow: hidden;
    opacity: 1;
    visibility: visible;
    transition: max-height 0.4s ease;
    background: #f8fafc;
  }
  .mega-menu::before {
    display: none;
  }
  .mega-header {
    padding: 14px 22px 10px;
    text-align: left;
  }
  .nav-item.mobile-open > .mega-menu {
    max-height: 2000px;
    border-bottom: 1px solid #e5e9f0;
  }
  .mega-services .mega-body, .mega-who .mega-body, .mega-industries .mega-body {
    display: block;
    padding: 8px 12px 16px;
  }
  .mega-column {
    padding: 0;
    border-right: none !important;
    margin-bottom: 8px;
  }
  .mega-column:not(:last-child) {
    border-bottom: 1px solid #e5e9f0;
    padding-bottom: 8px;
  }
  .cta-btn {
    margin: 15px 22px;
    justify-content: center;
  }
  .nav-item:hover .nav-link .arrow {
    transform: none;
    color: #8a9ab5;
  }
  .nav-item.mobile-open > .nav-link .arrow {
    transform: rotate(180deg);
    color: #2563eb;
  }
  .nav-item.mobile-open > .nav-link {
    color: #2563eb;
  }
  .hero {
    min-height: 480px;
  }
  .intro {
    padding: 70px 0;
  }
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }
  .intro-visual {
    max-width: 460px;
    margin: 0 auto;
  }
  .facts {
    padding: 70px 0;
  }
  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .services {
    padding: 80px 0;
  }
  .showcase {
    grid-template-columns: 1fr;
    gap: 24px;
    min-height: auto;
  }
  .showcase-list {
    flex-direction: row;
    overflow-x: auto;
    gap: 10px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }
  .show-item {
    flex: 0 0 auto;
    min-width: 220px;
    scroll-snap-align: start;
    padding: 14px 18px;
  }
  .show-item:hover, .show-item.active {
    transform: none;
  }
  .showcase-stage {
    min-height: 460px;
  }
  .stage-card {
    grid-template-columns: 1fr;
    padding: 36px 28px;
    gap: 20px;
    text-align: center;
  }
  .stage-visual {
    order: -1;
  }
  .stage-rings span:nth-child(3) {
    width: 260px;
    height: 260px;
  }
  .stage-rings span:nth-child(2) {
    width: 200px;
    height: 200px;
  }
  .stage-rings span:nth-child(1) {
    width: 140px;
    height: 140px;
  }
  .stage-icon {
    width: 90px;
    height: 90px;
    font-size: 36px;
  }
  .stage-tag, .stage-btn {
    align-self: center;
  }
  .stage-body ul {
    justify-content: center;
  }
}
@media (max-width: 560px) {
  .container {
    padding: 0 20px;
  }
  .intro {
    padding: 60px 0;
  }
  .intro-badge {
    right: 10px;
    bottom: -20px;
    padding: 16px 18px;
  }
  .intro-badge-num {
    font-size: 30px;
  }
  .facts-grid {
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  .fact-card {
    padding: 26px 16px;
  }
  .fact-num {
    font-size: 36px;
  }
  .fact-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }
  .intro-actions {
    flex-direction: column;
  }
  .intro-actions a {
    justify-content: center;
  }
  .services {
    padding: 60px 0;
  }
  .stage-card {
    padding: 30px 22px;
  }
  .stage-body h3 {
    font-size: 22px;
  }
}
@media (max-width: 480px) {
  :root {
    --header-h: 65px;
  }
  .header-inner {
    padding: 0 16px;
  }
  .nav {
    width: 100%;
    max-width: 100%;
  }
  .logo-icon {
    width: 40px;
    height: 40px;
  }
  .logo-text .brand {
    font-size: 17px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .btn-primary, .btn-outline {
    justify-content: center;
  }
}
/* ============ FACTS & FIGURES ============ */
.facts {
  position: relative;
  padding: 80px 0;
  background: linear-gradient(135deg, #0b1b33 0%, #12264a 55%, #0b1b33 100%);
  color: #fff;
  overflow: hidden;
}
.facts::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
}
.facts-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
}
.facts-glow-1 {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -120px;
  background: rgba(217, 164, 65, .18);
}
.facts-glow-2 {
  width: 380px;
  height: 380px;
  bottom: -160px;
  right: -100px;
  background: rgba(58, 110, 190, .16);
}
/* ---- Head ---- */
.facts-head {
  position: relative;
  text-align: center;
  margin: 0 auto 64px;
}
.facts-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e9c77e;
  background: rgba(217, 164, 65, .15);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px;
}
.facts-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 16px;
}
.facts-title span {
  color: #d9a441;
}
.facts-subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, .65);
}
/* ---- Grid ---- */
.facts-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.fact-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 16px;
  padding: 38px 26px 34px;
  text-align: center;
  backdrop-filter: blur(6px);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
}
.fact-card:hover {
  transform: translateY(-8px);
  border-color: rgba(217, 164, 65, .55);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 22px 45px rgba(0, 0, 0, .35);
}
.fact-icon {
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #d9a441, #b57e1e);
  box-shadow: 0 10px 24px rgba(217, 164, 65, .35);
}
.fact-icon i {
  font-size: 26px;
  color: #0b1b33;
}
.fact-number {
  font-size: clamp(34px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.fact-suffix {
  color: #d9a441;
  margin-left: 2px;
}
.fact-title {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
}
.fact-text {
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.6;
}
/* ---- Bottom Strip ---- */
.facts-strip {
  position: relative;
  margin-top: 60px;
  padding-top: 42px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.facts-strip-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.facts-strip-item strong {
  font-size: 30px;
  font-weight: 800;
  color: #d9a441;
  font-variant-numeric: tabular-nums;
}
.facts-strip-item span:last-child {
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  letter-spacing: .3px;
}
.facts-strip-divider {
  width: 1px;
  height: 44px;
  background: rgba(255, 255, 255, .15);
}
/* ---- Responsive ---- */
@media (max-width: 992px) {
  .facts {
    padding: 90px 0;
  }
  .facts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .facts-grid {
    grid-template-columns: 1fr;
  }
  .facts-strip {
    flex-direction: column;
    gap: 26px;
  }
  .facts-strip-divider {
    width: 60px;
    height: 1px;
  }
}
/* ============ END FACTS & FIGURES ============ */
/* ===== SCOPED STYLES — WHITE BG + #022E52 INTERIOR ===== */
/* SECTION BG — white */
.xac-section {
  position: relative;
  padding: 80px 0 80px;
  background: #ffffff;
  overflow: hidden;
  font-family: 'Inter', sans-serif
}
.xac-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(2, 46, 82, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 46, 82, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}
/* GLOWS — blue blur */
.xac-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none
}
.xac-glow.g1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(2, 46, 82, .12), transparent 70%);
  top: -180px;
  left: -120px;
  animation: xacFloat 16s ease-in-out infinite
}
.xac-glow.g2 {
  width: 620px;
  height: 620px;
  background: radial-gradient(circle, rgba(2, 46, 82, .09), transparent 70%);
  bottom: -240px;
  right: -140px;
  animation: xacFloat 20s ease-in-out infinite reverse
}
.xac-glow.g3 {
  width: 900px;
  height: 520px;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(2, 46, 82, .06), transparent 70%)
}
@keyframes xacFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1)
  }
  50% {
    transform: translate(60px, -40px) scale(1.15)
  }
}
.xac-wrap {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px
}
/* HEAD — Facts & Figures same format */
.xac-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 64px
}
.xac-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #022E52;
  background: rgba(2, 46, 82, .08);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px
}
.xac-tag i {
  font-size: 7px;
  color: #022E52;
  animation: xacPulse 2s ease-in-out infinite
}
@keyframes xacPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .3
  }
}
.xac-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #022E52;
  margin-bottom: 16px
}
.xac-title span {
  position: relative;
  color: #022E52
}
.xac-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 8px;
  background: rgba(2, 46, 82, .12);
  border-radius: 4px;
  z-index: -1
}
.xac-sub {
  font-size: 16px;
  color: rgba(2, 46, 82, .6)
}
/* BOARD */
.xac-board {
  display: flex;
  gap: 14px;
  height: 480px;
  perspective: 1400px
}
.xac-panel {
  position: relative;
  flex: 1 1 0;
  min-width: 78px;
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  background: #022E52;
  border: 1px solid rgba(2, 46, 82, .9);
  box-shadow: 0 20px 45px rgba(2, 46, 82, .22);
  transition: flex .8s cubic-bezier(.22, 1, .36, 1), box-shadow .5s, transform .5s
}
.xac-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .15), transparent 65%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none
}
.xac-panel:hover::after {
  opacity: 1
}
.xac-panel.on {
  flex: 6 1 0;
  box-shadow: 0 30px 70px rgba(2, 46, 82, .4)
}
.xac-panel:not(.on):hover {
  transform: translateY(-6px)
}
.xac-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2, 46, 82, .05) 0%, rgba(2, 46, 82, .35) 100%);
  pointer-events: none
}
.xac-ghost {
  position: absolute;
  bottom: -28px;
  right: 8px;
  font-size: 150px;
  font-weight: 900;
  line-height: 1;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
  transition: .7s
}
.xac-panel.on .xac-ghost {
  bottom: -40px;
  right: 26px;
  font-size: 200px
}
/* COLLAPSED VIEW */
.xac-mini {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 26px 0;
  z-index: 3;
  transition: opacity .4s
}
.xac-panel.on .xac-mini {
  opacity: 0;
  pointer-events: none
}
.xac-mini .n {
  font-size: 15px;
  font-weight: 800;
  color: rgba(255, 255, 255, .85);
  letter-spacing: 1px
}
.xac-mini .v {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 15.5px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  white-space: nowrap;
  text-transform: uppercase
}
.xac-mini .ic {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .25);
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 17px;
  backdrop-filter: blur(6px)
}
/* EXPANDED VIEW */
.xac-full {
  position: absolute;
  inset: 0;
  padding: 42px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 3;
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .5s .2s, transform .6s .2s;
  pointer-events: none
}
.xac-panel.on .xac-full {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto
}
.xac-full .badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 6px 15px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 20px;
  backdrop-filter: blur(8px)
}
.xac-full .bigic {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: #ffffff;
  display: grid;
  place-items: center;
  color: #022E52;
  font-size: 30px;
  margin-bottom: 22px;
  animation: xacBob 4s ease-in-out infinite
}
@keyframes xacBob {
  0%, 100% {
    transform: translateY(0) rotate(0)
  }
  50% {
    transform: translateY(-9px) rotate(-5deg)
  }
}
.xac-full h3 {
  font-size: 29px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -.5px;
  margin-bottom: 14px;
  max-width: 460px
}
.xac-full p {
  font-size: 14.8px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .8);
  max-width: 430px;
  margin-bottom: 22px
}
.xac-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
  max-width: 440px
}
.xac-chips span {
  font-size: 12.5px;
  padding: 7px 15px;
  border-radius: 50px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #ffffff;
  font-weight: 500
}
.xac-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 13px 28px;
  background: #ffffff;
  color: #022E52;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: .3s;
  box-shadow: 0 12px 28px rgba(2, 46, 82, .3)
}
.xac-cta:hover {
  transform: translateX(6px);
  gap: 14px
}
/* PROGRESS BAR */
.xac-prog {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, .18);
  z-index: 4;
  opacity: 0;
  transition: opacity .3s
}
.xac-panel.on .xac-prog {
  opacity: 1
}
.xac-prog i {
  display: block;
  height: 100%;
  width: 0;
  background: #ffffff
}
.xac-panel.on .xac-prog i.run {
  animation: xacFill 6s linear forwards
}
@keyframes xacFill {
  to {
    width: 100%
  }
}
/* FOOTER CONTROLS */
.xac-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px
}
.xac-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(2, 46, 82, .25);
  background: rgba(2, 46, 82, .06);
  color: #022E52;
  font-size: 15px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .3s
}
.xac-nav:hover {
  background: #022E52;
  color: #ffffff;
  transform: scale(1.1)
}
.xac-count {
  font-size: 14px;
  color: rgba(2, 46, 82, .6);
  font-weight: 600;
  letter-spacing: 1px;
  min-width: 70px;
  text-align: center
}
.xac-count b {
  color: #022E52;
  font-size: 19px
}
.xac-hint {
  font-size: 12.5px;
  color: rgba(2, 46, 82, .45);
  text-align: center;
  margin-top: 14px;
  letter-spacing: .5px
}
/* RESPONSIVE */
@media(max-width:1024px) {
  .xac-board {
    height: 440px;
    gap: 10px
  }
  .xac-panel {
    min-width: 64px
  }
  .xac-full {
    padding: 34px 32px
  }
  .xac-full h3 {
    font-size: 24px
  }
  .xac-ghost {
    font-size: 110px
  }
}
@media(max-width:860px) {
  .xac-section {
    padding: 80px 0 70px
  }
  .xac-board {
    flex-direction: column;
    height: auto;
    gap: 12px
  }
  .xac-panel {
    flex: 0 0 auto;
    min-width: 0;
    height: 82px;
    transition: height .7s cubic-bezier(.22, 1, .36, 1), box-shadow .4s
  }
  .xac-panel.on {
    flex: 0 0 auto;
    height: 430px
  }
  .xac-mini {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 0 24px
  }
  .xac-mini .v {
    writing-mode: horizontal-tb;
    transform: none;
    font-size: 15px;
    letter-spacing: 1px
  }
  .xac-mini .n {
    order: -1;
    font-size: 14px
  }
  .xac-full {
    padding: 30px 26px;
    justify-content: flex-start;
    padding-top: 34px
  }
  .xac-full h3 {
    font-size: 22px
  }
  .xac-full .bigic {
    width: 58px;
    height: 58px;
    font-size: 24px;
    margin-bottom: 16px
  }
  .xac-ghost {
    font-size: 90px;
    bottom: -14px
  }
  .xac-panel.on .xac-ghost {
    font-size: 120px
  }
}
@media(max-width:480px) {
  .xac-wrap {
    padding: 0 18px
  }
  .xac-panel.on {
    height: 470px
  }
  .xac-full p, .xac-chips {
    max-width: 100%
  }
}
.clf-section {
  position: relative;
  padding: 80px 0 80px;
  background: #022E52;
  overflow: hidden;
  font-family: 'Inter', sans-serif
}
.clf-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}
/* GLOWS — white blur */
.clf-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none
}
.clf-glow.g1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 70%);
  top: -160px;
  right: -100px;
  animation: clfFloat 16s ease-in-out infinite
}
.clf-glow.g2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(255, 255, 255, .1), transparent 70%);
  bottom: -220px;
  left: -140px;
  animation: clfFloat 20s ease-in-out infinite reverse
}
@keyframes clfFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1)
  }
  50% {
    transform: translate(50px, -35px) scale(1.12)
  }
}
.clf-wrap {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px
}
/* HEAD — Facts & Figures same format */
.clf-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 60px
}
.clf-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px
}
.clf-tag i {
  font-size: 7px;
  color: #ffffff;
  animation: clfPulse 2s ease-in-out infinite
}
@keyframes clfPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .3
  }
}
.clf-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #ffffff;
  margin-bottom: 16px
}
.clf-title span {
  position: relative;
  color: #ffffff
}
.clf-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 8px;
  background: rgba(255, 255, 255, .18);
  border-radius: 4px;
  z-index: -1
}
.clf-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, .65)
}
/* SLIDER */
.clf-slider {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent)
}
.clf-track {
  display: flex;
  gap: 22px;
  width: max-content;
  animation: clfScroll 32s linear infinite
}
.clf-slider:hover .clf-track {
  animation-play-state: paused
}
@keyframes clfScroll {
  to {
    transform: translateX(-50%)
  }
}
/* LOGO CARD */
.clf-logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 30px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  backdrop-filter: blur(6px);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.clf-logo:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .35);
  transform: translateY(-4px)
}
.clf-logo img {
  height: 42px;
  max-width: 170px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  display: block
}
/* TRUST LINE */
.clf-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 46px;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
  letter-spacing: .4px;
  text-align: center
}
.clf-note::before, .clf-note::after {
  content: '';
  width: 60px;
  height: 1px;
  background: rgba(255, 255, 255, .22)
}
/* RESPONSIVE */
@media(max-width:860px) {
  .clf-section {
    padding: 80px 0 70px
  }
  .clf-track {
    gap: 14px;
    animation-duration: 24s
  }
  .clf-logo {
    padding: 13px 20px
  }
  .clf-logo img {
    height: 34px;
    max-width: 130px
  }
  .clf-wrap {
    padding: 0 18px
  }
}
@media (prefers-reduced-motion:reduce) {
  .clf-track {
    animation: none
  }
}

/* ========== START: HOME CLIENTS 32 LOGOS / 2 ROWS ========== */
.clf-section-32 .clf-head{margin-bottom:42px}
.clf-section-32 .clf-slider-stack{display:flex;flex-direction:column;gap:16px}
.clf-section-32 .clf-slider-row{width:100%;overflow:hidden;padding:2px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.clf-section-32 .clf-track{gap:18px;animation:clfScrollRowOne 42s linear infinite;will-change:transform}
.clf-section-32 .clf-row-two .clf-track{animation-name:clfScrollRowTwo;animation-duration:46s}
.clf-section-32 .clf-slider-row:hover .clf-track{animation-play-state:paused}
.clf-section-32 .clf-logo{width:190px;min-width:190px;height:82px;padding:15px 20px;border-radius:14px}
.clf-section-32 .clf-logo img{width:100%;height:44px;max-width:150px;object-fit:contain}
@keyframes clfScrollRowOne{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes clfScrollRowTwo{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(max-width:860px){
  .clf-section-32{padding:64px 0 58px}
  .clf-section-32 .clf-head{margin-bottom:34px}
  .clf-section-32 .clf-slider-stack{gap:12px}
  .clf-section-32 .clf-track{gap:12px;animation-duration:34s}
  .clf-section-32 .clf-row-two .clf-track{animation-duration:38s}
  .clf-section-32 .clf-logo{width:155px;min-width:155px;height:70px;padding:12px 15px}
  .clf-section-32 .clf-logo img{height:38px;max-width:125px}
}
@media(max-width:480px){
  .clf-section-32{padding:52px 0 50px}
  .clf-section-32 .clf-head{margin-bottom:28px}
  .clf-section-32 .clf-title{font-size:30px}
  .clf-section-32 .clf-sub{font-size:14px;line-height:1.55}
  .clf-section-32 .clf-slider-stack{gap:10px}
  .clf-section-32 .clf-logo{width:132px;min-width:132px;height:62px;padding:10px 12px;border-radius:12px}
  .clf-section-32 .clf-logo img{height:32px;max-width:108px}
}
@media(prefers-reduced-motion:reduce){.clf-section-32 .clf-track{animation:none!important}}
/* ============ END: HOME CLIENTS 32 LOGOS / 2 ROWS ============ */

.rmp-section * {
  box-sizing: border-box
}
.rmp-section {
  position: relative;
  padding: 80px 0;
  background: #fff;
  overflow: hidden;
  font-family: 'Inter', sans-serif
}
.rmp-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(2, 46, 82, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 46, 82, .05) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none
}
.rmp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  pointer-events: none
}
.rmp-glow.g1 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(2, 46, 82, .1), transparent 70%);
  top: -200px;
  left: -120px;
  animation: rmpFloat 16s ease-in-out infinite
}
.rmp-glow.g2 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(2, 46, 82, .08), transparent 70%);
  bottom: -240px;
  right: -140px;
  animation: rmpFloat 20s ease-in-out infinite reverse
}
@keyframes rmpFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1)
  }
  50% {
    transform: translate(50px, -35px) scale(1.12)
  }
}
.rmp-wrap {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px
}
/* HEAD */
.rmp-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 56px
}
.rmp-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #022E52;
  background: rgba(2, 46, 82, .08);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px
}
.rmp-tag i {
  font-size: 7px;
  color: #022E52;
  animation: rmpPulse 2s ease-in-out infinite
}
@keyframes rmpPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .3
  }
}
.rmp-title {
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.2;
  color: #022E52;
  margin-bottom: 16px
}
.rmp-title span {
  position: relative;
  color: #022E52
}
.rmp-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 8px;
  background: rgba(2, 46, 82, .12);
  border-radius: 4px;
  z-index: -1
}
.rmp-sub {
  font-size: 16px;
  color: rgba(2, 46, 82, .6);
  line-height: 1.6;
  margin: 0
}
/* ===== FULL-WIDTH MAP CANVAS ===== */
.rmp-mapwrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 100%;
  padding: 0
}
.rmp-map {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 1000/440;
  min-height: 420px
}
.rmp-road {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}
/* CAR — TOP VIEW (bird's eye), koi bg / border nahi */
.rmp-walker {
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 62px;
  margin: -31px 0 0 -17px;
  z-index: 10;
  pointer-events: none;
  will-change: left, top, transform
}
.rmp-walker .w-body {
  position: absolute;
  inset: 0;
  background: none;
  border: 0;
  box-shadow: none;
  display: grid;
  place-items: center;
  animation: rmpBob .6s ease-in-out infinite
}
.rmp-walker svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 10px rgba(2, 46, 82, .32))
}
@keyframes rmpBob {
  0%, 100% {
    transform: translateX(0)
  }
  50% {
    transform: translateX(.8px)
  }
}
.wk-peg {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%
}
.wk-blink {
  animation: wkBlink 1.1s steps(1, end) infinite
}
@keyframes wkBlink {
  0%, 49% {
    opacity: 1
  }
  50%, 100% {
    opacity: .25
  }
}
.rmp-walker.wk-idle .w-body, .rmp-walker.wk-idle .wk-blink {
  animation: none
}
.rmp-ms.rmp-pass .rmp-pin {
  transform: translate(-50%, -50%) scale(1.28);
  box-shadow: 0 0 0 12px rgba(2, 46, 82, .16), 0 16px 34px rgba(2, 46, 82, .35);
  background: #022E52;
  color: #fff
}
/* MILESTONES */
.rmp-ms {
  position: absolute;
  animation: rmpPop .5s cubic-bezier(.34, 1.56, .64, 1) both
}
.rmp-ms.m1 {
  left: 10%;
  top: 62%;
  animation-delay: .35s
}
.rmp-ms.m2 {
  left: 30%;
  top: 46%;
  animation-delay: .75s
}
.rmp-ms.m3 {
  left: 50%;
  top: 62%;
  animation-delay: 1.15s
}
.rmp-ms.m4 {
  left: 70%;
  top: 46%;
  animation-delay: 1.55s
}
.rmp-ms.m5 {
  left: 90%;
  top: 62%;
  animation-delay: 1.95s
}
@keyframes rmpPop {
  from {
    opacity: 0;
    transform: scale(.4)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
.rmp-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #022E52;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 0 0 7px rgba(2, 46, 82, .08), 0 12px 26px rgba(2, 46, 82, .25);
  z-index: 2;
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  cursor: default
}
.rmp-pin::after {
  content: '';
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  border: 2px dashed rgba(2, 46, 82, .3);
  animation: rmpSpin 14s linear infinite
}
@keyframes rmpSpin {
  to {
    transform: rotate(360deg)
  }
}
.rmp-ms:hover .rmp-pin {
  transform: translate(-50%, -50%) scale(1.15)
}
.rmp-pin .fas {
  font-size: 19px
}
.rmp-card {
  position: absolute;
  left: 50%;
  width: clamp(200px, 17vw, 250px);
  background: #fff;
  border: 1px solid rgba(2, 46, 82, .12);
  border-radius: 14px;
  padding: 18px 18px 16px;
  box-shadow: 0 12px 30px rgba(2, 46, 82, .08);
  transition: all .35s cubic-bezier(.4, 0, .2, 1);
  z-index: 3
}
.m1 .rmp-card, .m3 .rmp-card, .m5 .rmp-card {
  top: 80px;
  transform: translateX(-50%)
}
.m2 .rmp-card, .m4 .rmp-card {
  bottom: 80px;
  transform: translateX(-50%)
}
.m1 .rmp-card {
  left: 50%;
  transform: translateX(-40%)
}
.m5 .rmp-card {
  left: 50%;
  transform: translateX(-60%)
}
.rmp-card::before {
  content: '';
  position: absolute;
  left: 50%;
  height: 22px;
  border-left: 2px dashed rgba(2, 46, 82, .3)
}
.m1 .rmp-card::before {
  left: 40%
}
.m5 .rmp-card::before {
  left: 60%
}
.m1 .rmp-card::before, .m3 .rmp-card::before, .m5 .rmp-card::before {
  top: -22px
}
.m2 .rmp-card::before, .m4 .rmp-card::before {
  bottom: -22px
}
.rmp-ms:hover .rmp-card {
  border-color: rgba(2, 46, 82, .35);
  box-shadow: 0 22px 45px rgba(2, 46, 82, .15);
  transform: translateX(-50%) translateY(-4px)
}
.m1:hover .rmp-card {
  transform: translateX(-40%) translateY(-4px)
}
.m5:hover .rmp-card {
  transform: translateX(-60%) translateY(-4px)
}
.m2:hover .rmp-card, .m4:hover .rmp-card {
  transform: translateX(-50%) translateY(4px)
}
.rmp-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px
}
.rmp-ic {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(2, 46, 82, .08);
  display: grid;
  place-items: center;
  color: #022E52;
  font-size: 17px;
  transition: all .35s
}
.rmp-ms:hover .rmp-ic {
  background: #022E52;
  color: #fff
}
.rmp-card h3 {
  font-size: 15px;
  font-weight: 700;
  color: #022E52;
  line-height: 1.3;
  margin: 0
}
.rmp-card p {
  font-size: 12.6px;
  line-height: 1.6;
  color: rgba(2, 46, 82, .62);
  margin: 0 0 12px
}
.rmp-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #022E52;
  background: rgba(2, 46, 82, .07);
  padding: 5px 12px;
  border-radius: 50px
}
.rmp-time i {
  font-size: 9px
}
/* ===== TABLET / MOBILE ===== */
@media (max-width:960px) {
  .rmp-section {
    padding: 70px 0
  }
  .rmp-head {
    margin-bottom: 40px;
    padding: 0 10px
  }
  .rmp-mapwrap {
    padding: 0 20px
  }
  .rmp-map {
    aspect-ratio: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 28px;
    max-width: 580px;
    padding: 10px 0
  }
  .rmp-road {
    display: none !important
  }
  .rmp-map::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 35px;
    bottom: 35px;
    width: 2px;
    background-image: linear-gradient(180deg, rgba(2, 46, 82, .4) 50%, transparent 50%);
    background-size: 2px 14px;
    z-index: 1
  }
  .rmp-ms, .rmp-ms.m1, .rmp-ms.m2, .rmp-ms.m3, .rmp-ms.m4, .rmp-ms.m5 {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    animation: none
  }
  .rmp-pin {
    position: relative !important;
    transform: none !important;
    flex: 0 0 54px;
    width: 54px;
    height: 54px;
    margin: 0 !important;
    z-index: 5
  }
  .rmp-pin::after {
    display: none
  }
  .rmp-ms.rmp-pass .rmp-pin {
    transform: scale(1.15) !important;
    box-shadow: 0 0 0 10px rgba(2, 46, 82, .18), 0 10px 24px rgba(2, 46, 82, .3)
  }
  .rmp-card, .m1 .rmp-card, .m2 .rmp-card, .m3 .rmp-card, .m4 .rmp-card, .m5 .rmp-card {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    flex: 1;
    margin: 0 !important;
    box-shadow: 0 8px 24px rgba(2, 46, 82, .07)
  }
  .rmp-card::before, .m1 .rmp-card::before, .m2 .rmp-card::before, .m3 .rmp-card::before, .m4 .rmp-card::before, .m5 .rmp-card::before {
    display: none !important
  }
  .rmp-ms:hover .rmp-pin, .rmp-ms:active .rmp-pin {
    transform: scale(1.08) !important
  }
  .rmp-ms:hover .rmp-card, .rmp-ms:active .rmp-card {
    transform: translateY(-2px) !important;
    border-color: rgba(2, 46, 82, .35);
    box-shadow: 0 14px 30px rgba(2, 46, 82, .12)
  }
  .rmp-walker {
    display: block !important;
    left: 27px !important;
    top: 0 !important;
    width: 32px;
    height: 58px;
    margin: -29px 0 0 -16px !important;
    z-index: 10
  }
}
@media (max-width:640px) {
  .rmp-section {
    padding: 60px 0
  }
  .rmp-wrap {
    padding: 0 16px
  }
  .rmp-mapwrap {
    padding: 0 16px
  }
  .rmp-title {
    font-size: clamp(26px, 7vw, 32px)
  }
  .rmp-sub {
    font-size: 14.5px
  }
  .rmp-map {
    gap: 22px
  }
  .rmp-pin {
    width: 46px !important;
    height: 46px !important;
    flex: 0 0 46px !important;
    font-size: 15px
  }
  .rmp-pin .fas {
    font-size: 16px
  }
  .rmp-map::before {
    left: 23px;
    top: 30px;
    bottom: 30px
  }
  .rmp-ms {
    gap: 14px
  }
  .rmp-card {
    padding: 16px 15px 14px !important;
    border-radius: 12px
  }
  .rmp-card-head {
    gap: 10px;
    margin-bottom: 8px
  }
  .rmp-ic {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    font-size: 15px;
    border-radius: 10px
  }
  .rmp-card h3 {
    font-size: 14.5px
  }
  .rmp-card p {
    font-size: 12.5px;
    margin-bottom: 10px
  }
  .rmp-time {
    font-size: 10.5px;
    padding: 4px 10px
  }
  .rmp-walker {
    left: 23px !important;
    width: 28px;
    height: 50px;
    margin: -25px 0 0 -14px !important
  }
}
@media (max-width:380px) {
  .rmp-wrap, .rmp-mapwrap {
    padding: 0 12px
  }
  .rmp-ms {
    gap: 12px
  }
  .rmp-card {
    padding: 14px 12px !important
  }
}
.csx-section {
  --navy: #0d1f38;
  --card: #12294a;
  --accent: #ffffff;
  --blue: #2f7df6;
  --line: rgba(255, 255, 255, .10);
}
.csx-section * {
  box-sizing: border-box
}
.csx-section {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: radial-gradient(120% 90% at 50% -10%, #16305a 0%, #0d1f38 45%, #091729 100%)
}
.csx-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none
}
.csx-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none
}
.csx-glow.g1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(47, 125, 246, .18), transparent 70%);
  top: -240px;
  left: -120px;
  animation: csxFloat 18s ease-in-out infinite
}
.csx-glow.g2 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(47, 125, 246, .2), transparent 70%);
  bottom: -250px;
  right: -140px;
  animation: csxFloat 22s ease-in-out infinite reverse
}
@keyframes csxFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1)
  }
  50% {
    transform: translate(45px, -35px) scale(1.14)
  }
}
.csx-wrap {
  position: relative;
  z-index: 2;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px
}
/* HEAD — centered like Facts & Figures */
.csx-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 46px
}
.csx-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 9px 20px;
  border-radius: 50px;
  margin-bottom: 22px
}
.csx-tag i {
  font-size: 7px;
  color: #fff;
  animation: csxPulse 2s ease-in-out infinite
}
@keyframes csxPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .25
  }
}
.csx-title {
  font-size: clamp(30px, 4.4vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.5px;
  color: #fff;
  margin: 0 0 16px
}
.csx-title span {
  color: var(--blue)
}
.csx-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, .62);
  line-height: 1.6;
  margin: 0
}
/* ===== SLIDER ===== */
.csx-slider {
  position: relative;
  overflow: hidden;
  padding: 8px 0 6px
}
.csx-track {
  display: flex;
  gap: 26px;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  will-change: transform
}
.csx-slide {
  flex: 0 0 calc((100% - 52px)/3);
  min-width: 0
}
.csx-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1), box-shadow .4s, border-color .4s, background .4s
}
.csx-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 3px;
  width: 100%;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.4, 0, .2, 1);
  z-index: 4
}
.csx-card:hover {
  transform: translateY(-8px);
  background: #16325a;
  border-color: rgba(47, 125, 246, .55);
  box-shadow: 0 28px 55px rgba(0, 0, 0, .45)
}
.csx-card:hover::before {
  transform: scaleX(1)
}
/* visual */
.csx-vis {
  position: relative;
  height: 146px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: #0f2542
}
.csx-vis::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
  background-size: 26px 26px
}
.csx-vis::after {
  content: '';
  position: absolute;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(47, 125, 246, .35), transparent 68%);
  top: -80px;
  right: -55px;
  transition: transform .6s
}
.csx-card:hover .csx-vis::after {
  transform: scale(1.4)
}
.csx-vis i {
  position: relative;
  font-size: 44px;
  color: #fff;
  transition: transform .45s cubic-bezier(.34, 1.4, .64, 1);
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .35))
}
.csx-card:hover .csx-vis i {
  transform: scale(1.14) rotate(-6deg)
}
.csx-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #0d1f38;
  background: #fff;
  padding: 5px 12px;
  border-radius: 50px
}
/* body */
.csx-body {
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1
}
.csx-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .85);
  margin-bottom: 11px
}
.csx-meta span {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35)
}
.csx-meta em {
  font-style: normal;
  color: rgba(255, 255, 255, .45)
}
.csx-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: #fff;
  margin: 0 0 10px
}
.csx-card p {
  font-size: 13.4px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 18px
}
.csx-res {
  display: flex;
  gap: 10px;
  padding-top: 16px;
  margin-top: auto;
  border-top: 1px dashed rgba(255, 255, 255, .16)
}
.csx-res div {
  flex: 1;
  text-align: center
}
.csx-res b {
  display: block;
  font-size: 23px;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -.5px
}
.csx-res b u {
  text-decoration: none;
  color: rgba(255, 255, 255, .9)
}
.csx-res small {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .48);
  margin-top: 5px
}
.csx-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #fff;
  text-decoration: none
}
.csx-link i {
  transition: transform .3s
}
.csx-card:hover .csx-link i {
  transform: translateX(5px)
}
.csx-link::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px
}
/* CONTROLS */
.csx-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 34px
}
.csx-arw {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 14px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1)
}
.csx-arw:hover {
  background: #fff;
  border-color: #fff;
  color: #0d1f38;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3)
}
.csx-dots {
  display: flex;
  gap: 9px
}
.csx-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.csx-dot.is-on {
  width: 32px;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, .5)
}
/* CTA */
.csx-cta {
  text-align: center;
  margin-top: 40px
}
.csx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #0d1f38;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
  padding: 15px 32px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .3);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.csx-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .4)
}
.csx-btn i {
  transition: transform .3s
}
.csx-btn:hover i {
  transform: translateX(4px)
}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .csx-slide {
    flex: 0 0 calc((100% - 22px)/2)
  }
  .csx-track {
    gap: 22px
  }
}
@media (max-width:760px) {
  .csx-section {
    padding: 70px 0
  }
  .csx-wrap {
    padding: 0 18px
  }
  .csx-head {
    margin-bottom: 32px
  }
  .csx-slide {
    flex: 0 0 100%
  }
  .csx-track {
    gap: 18px
  }
  .csx-vis {
    height: 132px
  }
  .csx-vis i {
    font-size: 38px
  }
  .csx-arw {
    width: 42px;
    height: 42px;
    font-size: 13px
  }
  .csx-foot {
    gap: 16px;
    margin-top: 26px
  }
}
@media (max-width:400px) {
  .csx-wrap {
    padding: 0 14px
  }
  .csx-body {
    padding: 18px 16px 20px
  }
  .csx-res b {
    font-size: 20px
  }
}
/* ===== VIEWVISE LOADER ===== */
.vv-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  transition: opacity .55s ease, visibility .55s ease;
}
.vv-loader.vv-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.vv-loader-in {
  text-align: center;
  padding: 20px;
  animation: vvUp .6s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes vvUp {
  from {
    opacity: 0;
    transform: translateY(14px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
.vv-logo img {
  display: block;
  width: 260px;
  max-width: 62vw;
  height: auto;
  margin: 0 auto;
}
/* progress bar */
.vv-bar {
  width: 230px;
  max-width: 56vw;
  height: 3px;
  margin: 26px auto 0;
  border-radius: 3px;
  background: rgba(2, 46, 82, .12);
  overflow: hidden;
}
.vv-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 3px;

  background: linear-gradient(90deg, #022E52, #2f7df6);
  transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
/* loading text */
.vv-txt {
  margin: 16px 0 0;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: rgba(2, 46, 82, .55);
}
.vv-dot {
  animation: vvBlink 1.4s infinite
}
.vv-dot:nth-child(2) {
  animation-delay: .2s
}
.vv-dot:nth-child(3) {
  animation-delay: .4s
}
@keyframes vvBlink {
  0%, 100% {
    opacity: .25
  }
  50% {
    opacity: 1
  }
}
/* loader chalu hoy tyare page scroll band */
body.vv-lock {
  overflow: hidden
}
@media (max-width:480px) {
  .vv-bar {
    margin-top: 20px
  }
  .vv-txt {
    font-size: 11.5px;
    letter-spacing: 2px
  }
}
@media (prefers-reduced-motion:reduce) {
  .vv-loader-in {
    animation: none
  }
  .vv-dot {
    animation: none;
    opacity: .7
  }
}
/* ===== WHY CHOOSE US — VIEWVISE ===== */
.wc {
  --nv: #022E52;
  --nv2: #0a4d85;
  --sky: #2f7df6;
  --ink: rgba(2, 46, 82, .6);
  --ln: rgba(2, 46, 82, .12)
}
.wc, .wc * {
  box-sizing: border-box
}
.wc {
  position: relative;
  padding: 80px 0;
  background: #fff;
  overflow: hidden;
  font-family: 'Inter', sans-serif
}
.wc::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(2, 46, 82, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 46, 82, .04) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%)
}
.wc-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none
}
.wc-glow.g1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(47, 125, 246, .15), transparent 70%);
  top: -240px;
  right: -150px
}
.wc-glow.g2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(2, 46, 82, .1), transparent 70%);
  bottom: -230px;
  left: -140px
}
.wc-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px
}
/* ===== HEAD ===== */
.wc-head {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: end;
  margin-bottom: 48px
}
.wc-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--nv);
  background: rgba(2, 46, 82, .06);
  border: 1px solid var(--ln);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px
}
.wc-tag i {
  font-size: 6.5px;
  color: var(--sky);
  animation: wcPulse 2s ease-in-out infinite
}
@keyframes wcPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .25
  }
}
.wc-title {
  font-size: clamp(29px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1px;
  color: var(--nv);
  margin: 0
}
.wc-title span {
  position: relative;
  color: var(--sky)
}
.wc-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 9px;
  border-radius: 4px;
  background: rgba(47, 125, 246, .16);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .4s cubic-bezier(.22, 1, .36, 1)
}
.wc.in .wc-title span::after {
  transform: scaleX(1)
}
.wc-sub {
  font-size: 15.2px;
  line-height: 1.75;
  color: var(--ink);
  margin: 0;
  padding-bottom: 6px
}
/* ===== CARDS ===== */
.wc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px
}
.wc-card {
  position: relative;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 18px;
  padding: 28px 26px 26px;
  box-shadow: 0 10px 26px rgba(2, 46, 82, .05);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1), box-shadow .4s, border-color .4s
}
.wc.in .wc-card {
  opacity: 1;
  transform: none
}
.wc.in .wc-card:nth-child(1) {
  transition-delay: .05s
}
.wc.in .wc-card:nth-child(2) {
  transition-delay: .12s
}
.wc.in .wc-card:nth-child(3) {
  transition-delay: .19s
}
.wc.in .wc-card:nth-child(4) {
  transition-delay: .26s
}
.wc.in .wc-card:nth-child(5) {
  transition-delay: .33s
}
.wc.in .wc-card:nth-child(6) {
  transition-delay: .40s
}
.wc-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--nv), var(--sky));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1)
}
.wc-card:hover {
  transform: translateY(-7px);
  border-color: rgba(47, 125, 246, .4);
  box-shadow: 0 26px 50px rgba(2, 46, 82, .13)
}
.wc-card:hover::before {
  transform: scaleX(1)
}
.wc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px
}
.wc-ic {
  width: 54px;
  height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  font-size: 21px;
  background: rgba(2, 46, 82, .07);
  color: var(--nv);
  transition: all .4s cubic-bezier(.22, 1, .36, 1)
}
.wc-card:hover .wc-ic {
  background: linear-gradient(140deg, var(--nv), var(--nv2));
  color: #fff;
  box-shadow: 0 12px 26px rgba(2, 46, 82, .26);
  transform: translateY(-2px)
}
.wc-no {
  font-size: 34px;
  font-weight: 900;
  letter-spacing: -2px;
  color: rgba(2, 46, 82, .07);
  line-height: 1;
  transition: color .4s
}
.wc-card:hover .wc-no {
  color: rgba(47, 125, 246, .18)
}
.wc-card h3 {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: var(--nv);
  margin: 0 0 9px
}
.wc-card p {
  font-size: 13.7px;
  line-height: 1.68;
  color: var(--ink);
  margin: 0
}
/* ===== FOOT ===== */
.wc-foot {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 20px;
  margin-top: 22px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s .48s cubic-bezier(.22, 1, .36, 1), transform .8s .48s cubic-bezier(.22, 1, .36, 1)
}
.wc.in .wc-foot {
  opacity: 1;
  transform: none
}
.wc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 28px 24px;
  border: 1px solid var(--ln);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(2, 46, 82, .035), rgba(2, 46, 82, .01))
}
.wc-stats > div {
  position: relative;
  text-align: center
}
.wc-stats > div + div::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 14%;
  height: 72%;
  width: 1px;
  background: var(--ln)
}
.wc-stats b {
  display: block;
  font-size: clamp(24px, 2.6vw, 33px);
  font-weight: 900;
  letter-spacing: -1.2px;
  color: var(--nv);
  line-height: 1
}
.wc-stats small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--ink);
  margin-top: 8px;
  line-height: 1.4
}
.wc-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 26px 26px;
  border-radius: 18px;
  background: linear-gradient(150deg, var(--nv) 0%, var(--nv2) 100%);
  position: relative;
  overflow: hidden
}
.wc-cta::before {
  content: '';
  position: absolute;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .14), transparent 68%);
  top: -85px;
  right: -65px
}
.wc-cta-t {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px
}
.wc-cta-t i {
  font-size: 22px;
  color: #fff;
  opacity: .9
}
.wc-cta-t b {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .2px
}
.wc-cta-t small {
  display: block;
  font-size: 11.5px;
  color: rgba(255, 255, 255, .66);
  margin-top: 2px
}
.wc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--nv);
  font-size: 13.8px;
  font-weight: 800;
  padding: 13px 24px;
  border-radius: 50px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.wc-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .26)
}
.wc-btn i {
  transition: transform .3s
}
.wc-btn:hover i {
  transform: translateX(4px)
}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .wc-head {
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start
  }
  .wc-grid {
    grid-template-columns: repeat(2, 1fr)
  }
  .wc-foot {
    grid-template-columns: 1fr
  }
}
@media (max-width:680px) {
  .wc {
    padding: 72px 0
  }
  .wc-wrap {
    padding: 0 18px
  }
  .wc-head {
    margin-bottom: 34px
  }
  .wc-grid {
    grid-template-columns: 1fr;
    gap: 14px
  }
  .wc-card {
    padding: 24px 20px 22px;
    border-radius: 16px
  }
  .wc-ic {
    width: 48px;
    height: 48px;
    font-size: 19px;
    border-radius: 13px
  }
  .wc-no {
    font-size: 29px
  }
  .wc-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 12px;
    padding: 24px 18px
  }
  .wc-stats > div:nth-child(3)::before {
    display: none
  }
  .wc-cta {
    padding: 22px 20px
  }
  .wc-btn {
    width: 100%
  }
}
/* ===== CLIENT REVIEWS — SLIDER ===== */
.cr {
  --nv: #022E52;
  --nv2: #0a4d85;
  --sky: #4f9cf9;
  --ln: rgba(255, 255, 255, .14)
}
.cr, .cr * {
  box-sizing: border-box
}
.cr {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: radial-gradient(120% 90% at 50% -10%, #0d3a66 0%, #022E52 48%, #01213d 100%)
}
.cr::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 60px 60px
}
.cr-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none
}
.cr-glow.g1 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(79, 156, 249, .22), transparent 70%);
  top: -250px;
  left: -150px
}
.cr-glow.g2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, .1), transparent 70%);
  bottom: -240px;
  right: -140px
}
.cr-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px
}
/* ===== HEAD ===== */
.cr-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 44px
}
.cr-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--ln);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px
}
.cr-tag i {
  font-size: 6.5px;
  color: var(--sky);
  animation: crPulse 2s ease-in-out infinite
}
@keyframes crPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .25
  }
}
.cr-title {
  font-size: clamp(29px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 15px
}
.cr-title span {
  position: relative;
  color: var(--sky)
}
.cr-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 9px;
  border-radius: 4px;
  background: rgba(79, 156, 249, .22);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .4s cubic-bezier(.22, 1, .36, 1)
}
.cr.in .cr-title span::after {
  transform: scaleX(1)
}
.cr-sub {
  font-size: 15.3px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .65);
  margin: 0 0 26px
}
.cr-score {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ln);
  border-radius: 50px;
  padding: 9px 20px
}
.cr-score b {
  font-size: 19px;
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1;
  color: #fff
}
.cr-stars {
  display: flex;
  gap: 3px;
  color: #f5c451;
  font-size: 12.5px
}
.cr-score small {
  font-size: 11.8px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6)
}
/* ===== SLIDER ===== */
.cr-slider {
  position: relative;
  overflow: hidden;
  padding: 6px 0
}
.cr-track {
  display: flex;
  gap: 22px;
  transition: transform .7s cubic-bezier(.4, 0, .2, 1);
  will-change: transform
}
.cr-slide {
  flex: 0 0 calc((100% - 44px)/3);
  min-width: 0
}
.cr-card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--ln);
  border-radius: 18px;
  padding: 30px 26px 26px;
  backdrop-filter: blur(6px);
  transition: transform .4s cubic-bezier(.22, 1, .36, 1), background .4s, border-color .4s, box-shadow .4s
}
.cr-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--sky), #fff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1)
}
.cr-card:hover {
  transform: translateY(-7px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 26px 52px rgba(0, 0, 0, .32)
}
.cr-card:hover::before {
  transform: scaleX(1)
}
.cr-q {
  position: absolute;
  top: 22px;
  right: 24px;
  font-size: 38px;
  color: rgba(255, 255, 255, .09);
  transition: color .4s
}
.cr-card:hover .cr-q {
  color: rgba(79, 156, 249, .28)
}
.cr-r {
  display: flex;
  gap: 3px;
  color: #f5c451;
  font-size: 13px;
  margin-bottom: 16px
}
.cr-card p {
  position: relative;
  font-size: 14.2px;
  line-height: 1.78;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 24px;
  flex: 1
}
.cr-by {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}
.cr-av {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fff;
  background: linear-gradient(140deg, var(--c1), var(--c2));
  box-shadow: 0 8px 18px rgba(0, 0, 0, .25)
}
.cr-by b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 3px
}
.cr-by small {
  display: block;
  font-size: 11.8px;
  color: rgba(255, 255, 255, .55);
  line-height: 1.4
}
/* ===== CONTROLS ===== */
.cr-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 32px
}
.cr-arw {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ln);
  color: #fff;
  font-size: 13.5px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: all .3s cubic-bezier(.4, 0, .2, 1)
}
.cr-arw:hover {
  background: #fff;
  border-color: #fff;
  color: var(--nv);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .3)
}
.cr-dots {
  display: flex;
  justify-content: center;
  gap: 9px
}
.cr-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.cr-dot.is-on {
  width: 32px;
  border-radius: 50px;
  background: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, .5)
}
/* reveal */
.cr-head, .cr-slider, .cr-ctrl {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1)
}
.cr.in .cr-head {
  opacity: 1;
  transform: none
}
.cr.in .cr-slider {
  opacity: 1;
  transform: none;
  transition-delay: .14s
}
.cr.in .cr-ctrl {
  opacity: 1;
  transform: none;
  transition-delay: .22s
}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .cr-slide {
    flex: 0 0 calc((100% - 22px)/2)
  }
}
@media (max-width:760px) {
  .cr {
    padding: 72px 0
  }
  .cr-wrap {
    padding: 0 18px
  }
  .cr-head {
    margin-bottom: 32px
  }
  .cr-sub {
    font-size: 14.3px
  }
  .cr-slide {
    flex: 0 0 100%
  }
  .cr-track {
    gap: 16px
  }
  .cr-card {
    padding: 26px 22px 22px
  }
  .cr-arw {
    width: 42px;
    height: 42px;
    font-size: 12.5px
  }
  .cr-ctrl {
    gap: 14px
  }
}
@media (max-width:400px) {
  .cr-q {
    font-size: 31px
  }
  .cr-card p {
    font-size: 13.6px
  }
}
/* ===== FAQ ===== */
.fq {
  --nv: #022E52;
  --nv2: #0a4d85;
  --sky: #2f7df6;
  --ink: rgba(2, 46, 82, .6);
  --ln: rgba(2, 46, 82, .12)
}
.fq, .fq * {
  box-sizing: border-box
}
.fq {
  position: relative;
  padding: 80px 0;
  background: #fff;
  overflow: hidden;
  font-family: 'Inter', sans-serif
}
.fq::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(2, 46, 82, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 46, 82, .04) 1px, transparent 1px);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse at 50% 0%, #000, transparent 72%)
}
.fq-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none
}
.fq-glow.g1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(47, 125, 246, .15), transparent 70%);
  top: -240px;
  left: -160px
}
.fq-glow.g2 {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(2, 46, 82, .1), transparent 70%);
  bottom: -230px;
  right: -150px
}
.fq-wrap {
  position: relative;
  z-index: 2;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px
}
/* HEAD — center */
.fq-head {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 50px
}
.fq-head .fq-sub {
  margin: 0 auto;
  max-width: 560px
}
.fq-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: var(--nv);
  background: rgba(2, 46, 82, .06);
  border: 1px solid var(--ln);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 20px
}
.fq-tag i {
  font-size: 6.5px;
  color: var(--sky);
  animation: fqPulse 2s ease-in-out infinite
}
@keyframes fqPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .25
  }
}
.fq-title {
  font-size: clamp(29px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1px;
  color: var(--nv);
  margin: 0 0 15px
}
.fq-title span {
  position: relative;
  color: var(--sky)
}
.fq-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 9px;
  border-radius: 4px;
  background: rgba(47, 125, 246, .16);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .4s cubic-bezier(.22, 1, .36, 1)
}
.fq.in .fq-title span::after {
  transform: scaleX(1)
}
.fq-sub {
  font-size: 15.3px;
  line-height: 1.72;
  color: var(--ink);
  margin: 0
}
/* help strip */
.fq-help {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 26px 30px;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  background: linear-gradient(120deg, var(--nv) 0%, var(--nv2) 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .8s .42s cubic-bezier(.22, 1, .36, 1), transform .8s .42s cubic-bezier(.22, 1, .36, 1)
}
.fq.in .fq-help {
  opacity: 1;
  transform: none
}
.fq-help::before {
  content: '';
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .13), transparent 68%);
  top: -130px;
  right: 8%
}
.fq-help-l {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0
}
.fq-help-r {
  position: relative;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap
}
.fq-help-ic {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 20px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2)
}
.fq-help b {
  display: block;
  font-size: 17.5px;
  font-weight: 800;
  letter-spacing: -.3px;
  line-height: 1.3;
  margin-bottom: 5px
}
.fq-help p {
  font-size: 13.4px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  margin: 0;
  max-width: 430px
}
.fq-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  white-space: nowrap;
  background: #fff;
  color: var(--nv);
  font-size: 13.8px;
  font-weight: 800;
  padding: 13px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.fq-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .26)
}
.fq-btn i {
  transition: transform .3s
}
.fq-btn:hover i {
  transform: translateX(4px)
}
.fq-call {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 13.4px;
  font-weight: 700;
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .3s
}
.fq-call:hover {
  color: #fff
}
.fq-call i {
  font-size: 11px
}
/* ===== ACCORDION ===== */
/* be column: 1-4 daabi, 5-8 jamni. Ek khule to fakt e j column ma niche na khase. */
.fq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  gap: 14px;
  align-items: start;
  align-content: start
}
.fq-item {
  background: #fff;
  border: 1px solid var(--ln);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(2, 46, 82, .045);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1), border-color .35s, box-shadow .35s, background .35s
}
.fq.in .fq-item {
  opacity: 1;
  transform: none
}
.fq.in .fq-item:nth-child(1), .fq.in .fq-item:nth-child(2) {
  transition-delay: .05s
}
.fq.in .fq-item:nth-child(3), .fq.in .fq-item:nth-child(4) {
  transition-delay: .12s
}
.fq.in .fq-item:nth-child(5), .fq.in .fq-item:nth-child(6) {
  transition-delay: .19s
}
.fq.in .fq-item:nth-child(7), .fq.in .fq-item:nth-child(8) {
  transition-delay: .26s
}
.fq-item:hover {
  border-color: rgba(47, 125, 246, .35)
}
.fq-item.is-open {
  border-color: rgba(47, 125, 246, .42);
  box-shadow: 0 18px 40px rgba(2, 46, 82, .1)
}
.fq-q {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 19px 22px;
  cursor: pointer;
  font-family: inherit;
  transition: background .3s
}
.fq-q:hover {
  background: rgba(2, 46, 82, .025)
}
.fq-n {
  flex: 0 0 24px;
  width: 24px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1px;
  color: rgba(2, 46, 82, .28);
  transition: color .35s;
  font-variant-numeric: tabular-nums
}
.fq-item.is-open .fq-n {
  color: var(--sky)
}
.fq-t {
  flex: 1;
  min-width: 0;
  font-size: 15.3px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.2px;
  color: var(--nv);
  padding-right: 4px
}
/* plus / minus */
.fq-ic {
  flex: 0 0 32px;
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(2, 46, 82, .07);
  transition: all .4s cubic-bezier(.34, 1.4, .64, 1)
}
.fq-ic i {
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--nv);
  border-radius: 2px;
  transition: all .4s cubic-bezier(.34, 1.4, .64, 1)
}
.fq-ic i:nth-child(1) {
  width: 12px;
  height: 2px;
  transform: translate(-50%, -50%)
}
.fq-ic i:nth-child(2) {
  width: 2px;
  height: 12px;
  transform: translate(-50%, -50%)
}
.fq-item.is-open .fq-ic {
  background: var(--sky);
  transform: rotate(180deg)
}
.fq-item.is-open .fq-ic i {
  background: #fff
}
.fq-item.is-open .fq-ic i:nth-child(2) {
  height: 2px
}
/* answer */
.fq-a {
  height: 0;
  overflow: hidden;
  transition: height .42s cubic-bezier(.22, 1, .36, 1)
}
.fq-in {
  padding: 0 68px 21px 61px
}
.fq-in p {
  font-size: 13.9px;
  line-height: 1.78;
  color: var(--ink);
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .4s .1s ease, transform .4s .1s cubic-bezier(.22, 1, .36, 1)
}
.fq-item.is-open .fq-in p {
  opacity: 1;
  transform: none
}
/* ===== RESPONSIVE ===== */
@media (max-width:980px) {
  .fq-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
    gap: 12px
  }
  .fq-head {
    margin-bottom: 38px
  }
  .fq-help {
    padding: 24px;
    gap: 22px
  }
  .fq-help-r {
    width: 100%;
    justify-content: space-between
  }
}
@media (max-width:600px) {
  .fq {
    padding: 72px 0
  }
  .fq-wrap {
    padding: 0 18px
  }
  .fq-head {
    margin-bottom: 32px
  }
  .fq-q {
    padding: 16px 16px;
    gap: 12px
  }
  .fq-t {
    font-size: 14.5px
  }
  .fq-n {
    flex: 0 0 20px;
    width: 20px;
    font-size: 10.5px;
    letter-spacing: .8px
  }
  .fq-ic {
    flex: 0 0 28px;
    width: 28px;
    height: 28px
  }
  .fq-ic i:nth-child(1) {
    width: 10px
  }
  .fq-ic i:nth-child(2) {
    height: 10px
  }
  .fq-in {
    padding: 0 52px 17px 48px
  }
  .fq-in p {
    font-size: 13.4px
  }
  .fq-help {
    padding: 22px 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-top: 20px;
    border-radius: 17px
  }
  .fq-help-l {
    align-items: flex-start;
    gap: 14px
  }
  .fq-help-ic {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    font-size: 18px
  }
  .fq-help b {
    font-size: 16.5px
  }
  .fq-help p {
    font-size: 13px
  }
  .fq-help-r {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 100%
  }
  .fq-btn {
    width: 100%
  }
  .fq-call {
    justify-content: center
  }
}
@media (prefers-reduced-motion:reduce) {
  .fq-a {
    transition: none
  }
}
/* ===== BLOGS ===== */
.bl {
  --nv: #022E52;
  --nv2: #0a4d85;
  --sky: #4f9cf9;
  --ln: rgba(255, 255, 255, .14)
}
.bl, .bl * {
  box-sizing: border-box
}
.bl {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: radial-gradient(120% 90% at 50% -10%, #0d3a66 0%, #022E52 48%, #01213d 100%)
}
.bl::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 60px 60px
}
.bl-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none
}
.bl-glow.g1 {
  width: 540px;
  height: 540px;
  background: radial-gradient(circle, rgba(79, 156, 249, .22), transparent 70%);
  top: -250px;
  right: -150px
}
.bl-glow.g2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(255, 255, 255, .09), transparent 70%);
  bottom: -240px;
  left: -150px
}
.bl-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px
}
/* ===== HEAD ===== */
.bl-head {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 48px
}
.bl-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.7px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .1);
  border: 1px solid var(--ln);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 18px
}
.bl-tag i {
  font-size: 6.5px;
  color: var(--sky);
  animation: blPulse 2s ease-in-out infinite
}
@keyframes blPulse {
  0%, 100% {
    opacity: 1
  }
  50% {
    opacity: .25
  }
}
.bl-title {
  font-size: clamp(29px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 15px
}
.bl-title span {
  position: relative;
  color: var(--sky)
}
.bl-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 9px;
  border-radius: 4px;
  background: rgba(79, 156, 249, .22);
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s .4s cubic-bezier(.22, 1, .36, 1)
}
.bl.in .bl-title span::after {
  transform: scaleX(1)
}
.bl-sub {
  font-size: 15.3px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .65);
  margin: 0
}
/* ===== GRID ===== */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px
}
.bl-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
  border: 1px solid var(--ln);
  border-radius: 18px;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .5s cubic-bezier(.22, 1, .36, 1), background .4s, border-color .4s, box-shadow .4s
}
.bl.in .bl-card {
  opacity: 1;
  transform: none
}
.bl.in .bl-card:nth-child(1) {
  transition-delay: .06s
}
.bl.in .bl-card:nth-child(2) {
  transition-delay: .15s
}
.bl.in .bl-card:nth-child(3) {
  transition-delay: .24s
}
.bl-card:hover {
  transform: translateY(-8px);
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .34);
  box-shadow: 0 28px 56px rgba(0, 0, 0, .34)
}
/* ===== IMAGE ===== */
.bl-vis {
  position: relative;
  aspect-ratio: 16/10;
  overflow: hidden;
  background: rgba(2, 46, 82, .6)
}
.bl-vis img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1), filter .5s
}
.bl-card:hover .bl-vis img {
  transform: scale(1.07)
}
.bl-vis::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(2, 46, 82, .15) 0%, rgba(2, 46, 82, .05) 45%, rgba(1, 33, 61, .72) 100%)
}
.bl-shine {
  position: absolute;
  top: 0;
  left: -60%;
  width: 42%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent);
  transform: skewX(-18deg);
  transition: left .85s cubic-bezier(.22, 1, .36, 1)
}
.bl-card:hover .bl-shine {
  left: 135%
}
.bl-cat {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 3;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: var(--nv);
  background: #fff;
  padding: 6px 13px;
  border-radius: 50px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
  transition: all .35s
}
.bl-card:hover .bl-cat {
  background: var(--sky);
  color: #fff
}
/* ===== BODY ===== */
.bl-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 22px 20px
}
.bl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.6px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 12px
}
.bl-meta em {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3)
}
.bl-meta i {
  margin-right: 5px;
  font-size: 11px
}
.bl-card h3 {
  font-size: 16.4px;
  font-weight: 700;
  line-height: 1.42;
  letter-spacing: -.3px;
  color: #fff;
  margin: 0 0 20px;
  flex: 1;
  transition: color .3s
}
.bl-card:hover h3 {
  color: var(--sky)
}
.bl-more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 12.8px;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, .12)
}
.bl-more i {
  font-size: 11px;
  transition: transform .3s
}
.bl-card:hover .bl-more i {
  transform: translateX(5px)
}
/* ===== CTA ===== */
.bl-cta {
  text-align: center;
  margin-top: 42px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s .34s cubic-bezier(.22, 1, .36, 1), transform .7s .34s cubic-bezier(.22, 1, .36, 1)
}
.bl.in .bl-cta {
  opacity: 1;
  transform: none
}
.bl-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--nv);
  font-size: 14px;
  font-weight: 800;
  padding: 15px 32px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .26);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.bl-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 42px rgba(0, 0, 0, .34)
}
.bl-btn i {
  transition: transform .3s
}
.bl-btn:hover i {
  transform: translateX(4px)
}
/* ===== RESPONSIVE ===== */
@media (max-width:1024px) {
  .bl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px
  }
}
@media (max-width:660px) {
  .bl {
    padding: 72px 0
  }
  .bl-wrap {
    padding: 0 18px
  }
  .bl-head {
    margin-bottom: 36px
  }
  .bl-grid {
    grid-template-columns: 1fr;
    gap: 16px
  }
  .bl-body {
    padding: 20px 18px 18px
  }
  .bl-card h3 {
    font-size: 15.8px
  }
  .bl-btn {
    width: 100%;
    justify-content: center
  }
}
@media (prefers-reduced-motion:reduce) {
  .bl-shine {
    display: none
  }
  .bl-card:hover .bl-vis img {
    transform: none
  }
}
/* ===== CTA ===== */
.ct {
  --nv: #022E52;
  --nv2: #0a4d85;
  --sky: #4f9cf9;
  --soft: #cfe0f7
}
.ct, .ct * {
  box-sizing: border-box
}
.ct {
  position: relative;
  padding: 70px 0;
  background: #fff;
  font-family: 'Inter', sans-serif
}
.ct-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px
}
.ct-card {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  background: linear-gradient(120deg, #022E52 0%, #0a4d85 62%, #0d3a66 100%);
  box-shadow: 0 30px 64px rgba(2, 46, 82, .26);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .85s cubic-bezier(.22, 1, .36, 1), transform .85s cubic-bezier(.22, 1, .36, 1)
}
.ct.in .ct-card {
  opacity: 1;
  transform: none
}
/* soft circles */
.ct-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}
.ct-orb.o1 {
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, .06);
  top: -120px;
  right: -40px
}
.ct-orb.o2 {
  width: 230px;
  height: 230px;
  background: rgba(255, 255, 255, .05);
  bottom: -130px;
  left: -70px
}
.ct-in {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  padding: 46px 52px;
  color: #fff
}
/* ===== LEFT ===== */
.ct-left {
  max-width: 620px
}
.ct-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 9px 20px;
  border-radius: 50px;
  margin-bottom: 20px
}
.ct-title {
  font-size: clamp(27px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: -1.2px;
  color: #fff;
  margin: 0 0 14px
}
.ct-sub {
  font-size: 14.8px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .72);
  margin: 0;
  max-width: 560px
}
/* ===== RIGHT ===== */
.ct-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0
}
.ct-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  background: #fff;
  color: var(--nv);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: -.1px;
  padding: 17px 32px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .24);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.ct-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .32)
}
.ct-call {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: var(--soft);
  color: var(--nv);
  font-size: 14.5px;
  font-weight: 800;
  padding: 17px 30px;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(0, 0, 0, .2);
  transition: all .35s cubic-bezier(.4, 0, .2, 1)
}
.ct-call:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .3)
}
.ct-call i {
  font-size: 13px
}
/* ===== RESPONSIVE ===== */
@media (max-width:1080px) {
  .ct-in {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding: 42px 40px
  }
  .ct-left {
    max-width: none
  }
  .ct-sub {
    max-width: none
  }
}
@media (max-width:600px) {
  .ct {
    padding: 56px 0
  }
  .ct-wrap {
    padding: 0 18px
  }
  .ct-card {
    border-radius: 20px
  }
  .ct-in {
    padding: 32px 22px;
    gap: 26px
  }
  .ct-sub {
    font-size: 14px
  }
  .ct-right {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 12px
  }
  .ct-btn, .ct-call {
    width: 100%;
    padding: 15px 22px;
    font-size: 14px
  }
  .ct-call {
    justify-content: center
  }
}
.ft {
  --nv: #022E52;
  --nv2: #0a4d85;
  --sky: #4f9cf9;
  --ln: rgba(255, 255, 255, .13)
}
.ft, .ft * {
  box-sizing: border-box
}
.ft {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 72px 0 0;
  display: block;
  line-height: 1.5;
  font-family: 'Inter', sans-serif;
  color: #fff;
  background: radial-gradient(120% 100% at 15% -20%, #0d3a66 0%, #022E52 46%, #01213d 100%)
}
.ft ul {
  list-style: none !important;
  margin: 0;
  padding: 0
}
.ft a {
  text-decoration: none
}
.ft img {
  max-width: 100%;
  height: auto
}
.ft p {
  margin: 0
}
.ft h4 {
  margin: 0
}
.ft button {
  font-family: inherit
}
.ft-wrap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 30px
}
.ft-top {
  display: grid;
  grid-template-columns: 1.35fr .85fr 1.05fr 1fr;
  gap: 48px;
  padding-bottom: 52px
}
.ft-logo {
  display: inline-block;
  margin-bottom: 10px
}
.ft-logo img {
   
  width: auto;
  display: block
}
.ft-about {
  font-size: 13.8px;
  line-height: 1.78;
  color: rgba(255, 255, 255, .6);
  margin: 0 0 24px;
  max-width: 300px
}
.ft-social {
  display: flex;
  gap: 10px;
	margin-top: 15px;
}
.ft-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ln);
  transition: all .32s ease
}
.ft-social a:hover {
  background: #fff;
  border-color: #fff;
  color: var(--nv);
  transform: translateY(-3px)
}
.ft-col h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 20px;
  position: relative;
  padding-bottom: 12px
}
.ft-col h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 26px;
  height: 2px;
  border-radius: 2px;
  background: var(--sky)
}
.ft-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px
}
.ft-col ul a {
  font-size: 13.8px;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  transition: all .3s ease
}
.ft-col ul a:hover {
  color: #fff;
  padding-left: 8px
}
.ft-contact {
  display: flex;
  flex-direction: column;
  gap: 12px;
  
}
.ft-contact a, .ft-contact span {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .62);
  transition: color .3s ease
}
.ft-contact a:hover {
  color: #fff
}
.ft-contact i {
  flex: 0 0 15px;
  font-size: 12px;
  color: var(--sky);
  margin-top: 3px
}
.ft-portal {
  display: flex;
  flex-direction: column
}
.ft-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13.8px;
  font-weight: 800;
  padding: 14px 20px;
  border-radius: 11px;
  margin-bottom: 11px;
  color: #fff;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--ln);
  transition: all .35s ease
}
.ft-btn:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .34);
  transform: translateY(-2px)
}
.ft-btn.primary {
  background: linear-gradient(135deg, #4f9cf9, #0a4d85);
  border-color: transparent
}
.ft-btn.primary:hover {
  background: #fff;
  color: var(--nv)
}
.ft-admin {
  align-self: center;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .5);
  text-decoration: underline;
  margin-top: 4px;
  transition: color .3s ease
}
.ft-admin:hover {
  color: #fff
}
.ft-iso {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px
}
.ft-iso i {
  font-size: 18px;
  color: var(--sky)
}
.ft-iso b {
  display: block;
  font-size: 12.8px;
  font-weight: 800;
  color: #fff
}
.ft-iso small {
  display: block;
  font-size: 10.8px;
  color: rgba(255, 255, 255, .5);
  margin-top: 2px
}
.ft-bot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 24px 0 28px;
  border-top: 1px solid var(--ln)
}
.ft-bot p {
  font-size: 12.8px;
  color: rgba(255, 255, 255, .48)
}
.ft-by a {
  color: var(--sky);
  font-weight: 700;
  transition: color .3s ease
}
.ft-by a:hover {
  color: #fff
}
@media (max-width:1040px) {
  .ft-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 36px
  }
  .ft-about {
    max-width: none
  }
  .ft-portal {
    grid-column: 1 / -1
  }
  .ft-portal .ft-btn {
    max-width: 320px
  }
  .ft-iso {
    margin-top: 20px;
    padding-top: 0
  }
}
@media (max-width:640px) {
  .ft {
    padding-top: 56px
  }
  .ft-wrap {
    padding: 0 18px
  }
  .ft-top {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-bottom: 36px
  }
  .ft-portal .ft-btn {
    max-width: none
  }
  .ft-bot {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px
  }
}
/* ==========================================================
       HERO BREADCRUMB BANNER SECTION (WITH FIXED HEADER SPACER)
       ========================================================== 
       નોંધ (NOTE): જ્યારે વેબસાઈટનું Header "position: fixed;" કે "position: absolute;" હોય,
       ત્યારે Banner હેડરની નીચે ન ઘૂસી જાય તે માટે:
       1) padding-top: 140px થી 160px આપવું (જેથી ટાઇટલ હેડરની નીચે ન દબાય).
       2) અથવા margin-top: 80px (તમારા Header ની ઊંચાઈ જેટલું) આપવું.
       ========================================================== */
.hero-banner-section {
  position: relative;
  background: linear-gradient(135deg, #022E52 0%, #011C34 65%, #011425 100%);
  color: #ffffff;
  /* FIX #1: padding-top ને 150px કર્યું જેથી Fixed Header ની નીચે Content ક્યારેય ન ઘૂસે! */
  padding: 150px 0 105px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  min-height: 340px;
  border-bottom: 3px solid rgba(245, 179, 1, 0.4);
  font-family: 'Inter', sans-serif;
  z-index: 1; /* Navbar (z-index: 1000) ની નીચે બેકગ્રાઉન્ડ રહે પણ content સુરક્ષિત રહે */
}
/* 1. Subtle Square Grid / Tile Pattern */
.hero-banner-section .hero-bg-tiles {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.038) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.038) 1px, transparent 1px);
  background-size: 68px 68px;
  pointer-events: none;
  z-index: 1;
}
.hero-banner-section .hero-bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(1, 20, 37, 0.6) 100%);
  pointer-events: none;
  z-index: 2;
}
/* 2. Left / Bottom-Left Diagonal Geometric Network Graphic */
.hero-banner-section .hero-bg-network {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 580px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
}
.hero-banner-section .hero-bg-network svg {
  width: 100%;
  height: 100%;
}
/* Mirrored subtle network on top-right */
.hero-banner-section .hero-bg-network-right {
  position: absolute;
  right: 0;
  top: 0;
  width: 440px;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  opacity: 0.45;
  transform: scaleX(-1) scaleY(-1);
}
.hero-banner-section .hero-bg-network-right svg {
  width: 100%;
  height: 100%;
}
/* Glowing Node Animation */
.hero-banner-section .glow-node {
  animation: nodePulse 3.5s ease-in-out infinite;
}
.hero-banner-section .glow-node.d2 {
  animation-delay: 1.5s;
}
@keyframes nodePulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.25);
  }
}
/* 3. Main Content Wrapper */
.hero-banner-section .hero-content {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px;
}
/* Big Bold White Title */
.hero-banner-section .hero-banner-title {
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.6px;
  margin: 0 0 18px 0;
  text-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
/* Breadcrumb: "HOME  »  OUR ROAD MAP" */
.hero-banner-section .hero-breadcrumb-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin: 0;
}
.hero-banner-section .hero-breadcrumb-line a {
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.hero-banner-section .hero-breadcrumb-line a:hover {
  opacity: 0.8;
  text-decoration: underline;
}
.hero-banner-section .hero-breadcrumb-line .sep {
  color: rgba(255, 255, 255, 0.65);
  font-size: 15px;
  line-height: 1;
  margin: 0 2px;
}
.hero-banner-section .hero-breadcrumb-line .current-page {
  color: #F5B301;
}
/* ==========================================================
       RESPONSIVE (TABLET & MOBILE)
       ========================================================== */
@media (max-width: 768px) {
  .demo-navbar {
    padding: 0 20px;
    height: 70px;
  }
  .demo-navbar .nav-links {
    display: none; /* mobile menu simplicity in demo */
  }
  .hero-banner-section {
    padding: 130px 0 80px;
    min-height: 270px;
  }
  .hero-banner-section .hero-bg-network {
    width: 320px;
    opacity: 0.7;
  }
  .hero-banner-section .hero-bg-network-right {
    display: none;
  }
  .hero-banner-section .hero-banner-title {
    font-size: clamp(32px, 8vw, 42px);
    margin-bottom: 14px;
  }
  .hero-banner-section .hero-breadcrumb-line {
    font-size: 12px;
    gap: 8px;
  }
}
@media (max-width: 480px) {
  .hero-banner-section {
    padding: 110px 0 65px;
    min-height: 240px;
  }
  .hero-banner-section .hero-content {
    padding: 0 16px;
  }
}
/* ==========================================================
       WHO WE ARE SECTION (#022E52 & #F5B301 VIEWVISE THEME)
       ========================================================== */
.vv-who-section {
  position: relative;
  padding: 80px 0 80px;
  background: #ffffff;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
/* Subtle background grid pattern */
.vv-who-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(2, 46, 82, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(2, 46, 82, 0.04) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
}
/* Ambient Glow Orbs */
.vv-who-section .glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(130px);
  pointer-events: none;
  z-index: 1;
}
.vv-who-section .glow-orb.g1 {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(2, 46, 82, 0.08), transparent 70%);
  top: -120px;
  left: -120px;
}
.vv-who-section .glow-orb.g2 {
  width: 550px;
  height: 550px;
  background: radial-gradient(circle, rgba(245, 179, 1, 0.12), transparent 70%);
  bottom: -150px;
  right: -100px;
}
/* CONTAINER WRAPPER */
.vv-who-wrap {
  position: relative;
  z-index: 5;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 30px;
}
/* ==========================================================
       1. CENTERED SECTION TITLE & SUBTITLE AT THE TOP
       ========================================================== */
.vv-who-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 65px;
}
.vv-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #022E52;
  background: rgba(2, 46, 82, 0.08);
  padding: 8px 18px;
  border-radius: 50px;
  margin-bottom: 20px;
}
.vv-tag i {
  font-size: 8px;
  color: #F5B301;
  animation: vvPulse 2s ease-in-out infinite;
}
@keyframes vvPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.4);
  }
}
.vv-who-title {
  font-size: clamp(34px, 4.2vw, 48px);
  font-weight: 800;
  line-height: 1.18;
  color: #022E52;
  margin-bottom: 20px;
  letter-spacing: -0.6px;
}
.vv-who-title span {
  position: relative;
  color: #022E52;
  display: inline-block;
}
.vv-who-title span::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 10px;
  background: rgba(245, 179, 1, 0.35);
  border-radius: 6px;
  z-index: -1;
}
.vv-who-sub {
  font-size: clamp(16px, 1.8vw, 18px);
  line-height: 1.7;
  color: rgba(2, 46, 82, 0.72);
  max-width: 700px;
  margin: 0 auto;
}
/* ==========================================================
       2. 2-COLUMN CONTENT (LEFT: ARCH COLLAGE | RIGHT: NARRATIVE + FACTS LINE)
       ========================================================== */
.vv-who-grid {
  display: grid;
  grid-template-columns: 1fr 1.08fr;
  gap: 70px;
  align-items: center;
}
/* ----------------------------------------------------------
       LEFT SIDE: CREATIVE ARCH COLLAGE + ROTATING STAMP
       ---------------------------------------------------------- */
.vv-collage-wrap {
  position: relative;
  padding: 20px 20px 50px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.vv-arch-img {
  position: relative;
  width: 82%;
  max-width: 420px;
  height: 480px;
  border-radius: 140px 140px 28px 28px;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(2, 46, 82, 0.18);
  border: 4px solid #ffffff;
  z-index: 2;
}
.vv-arch-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.vv-collage-wrap:hover .vv-arch-img img {
  transform: scale(1.07);
}
.vv-overlap-img {
  position: absolute;
  right: 0px;
  bottom: 15px;
  width: 220px;
  height: 190px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(2, 46, 82, 0.25);
  border: 5px solid #ffffff;
  z-index: 4;
  transition: transform 0.4s ease;
}
.vv-collage-wrap:hover .vv-overlap-img {
  transform: translateY(-8px) scale(1.03);
}
.vv-overlap-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Rotating Experience Stamp */
.vv-stamp-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 120px;
  height: 120px;
  z-index: 5;
  display: grid;
  place-items: center;
  background: #022E52;
  border-radius: 50%;
  box-shadow: 0 12px 30px rgba(2, 46, 82, 0.25);
  border: 3px solid #ffffff;
}
.vv-stamp-badge svg {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: stampRotate 18s linear infinite;
}
@keyframes stampRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.vv-stamp-badge .center-ic {
  position: relative;
  z-index: 2;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #F5B301;
  color: #022E52;
  display: grid;
  place-items: center;
  font-size: 20px;
}
.vv-collage-dots {
  position: absolute;
  top: 50px;
  right: 25px;
  width: 140px;
  height: 140px;
  background-image: radial-gradient(#022E52 2.5px, transparent 2.5px);
  background-size: 16px 16px;
  opacity: 0.22;
  z-index: 1;
}
/* ----------------------------------------------------------
       RIGHT SIDE: NARRATIVE + FACTS LINE
       ---------------------------------------------------------- */
.vv-who-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.vv-story-heading {
  font-size: 26px;
  font-weight: 800;
  color: #022E52;
  margin-bottom: 16px;
  line-height: 1.3;
}
.vv-who-lead {
  font-size: 17px;
  line-height: 1.75;
  color: rgba(2, 46, 82, 0.78);
  margin-bottom: 18px;
}
.vv-who-lead strong {
  color: #022E52;
  font-weight: 700;
}
.vv-who-desc {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(2, 46, 82, 0.72);
  margin-bottom: 36px;
}
/* ==========================================================
       FACTS & FIGURES LINE — ROTATING / COUNT-UP WHEN SEEN ("DEKHAY PACHI")
       ========================================================== */
.vv-facts-line {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  background: rgba(2, 46, 82, 0.035);
  border: 1px solid rgba(2, 46, 82, 0.1);
  border-radius: 20px;
  padding: 28px 24px;
  position: relative;
  transition: all 0.35s ease;
  box-shadow: 0 8px 24px rgba(2, 46, 82, 0.04);
}
.vv-facts-line:hover {
  background: #022E52;
  border-color: #022E52;
  box-shadow: 0 20px 45px rgba(2, 46, 82, 0.18);
}
.vv-fact-item {
  text-align: center;
  position: relative;
  padding: 4px 10px;
}
.vv-fact-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 15%;
  height: 70%;
  width: 1px;
  background: rgba(2, 46, 82, 0.12);
  transition: background 0.35s ease;
}
.vv-facts-line:hover .vv-fact-item:not(:last-child)::after {
  background: rgba(255, 255, 255, 0.15);
}
/* ROTATING COUNTER NUMBER STYLES */
.vv-fact-num {
  font-size: clamp(32px, 3.5vw, 44px);
  font-weight: 800;
  color: #022E52;
  line-height: 1.1;
  margin-bottom: 6px;
  transition: color 0.35s ease, transform 0.3s ease;
  display: inline-block;
}
.vv-facts-line:hover .vv-fact-num {
  color: #F5B301;
}
/* When counting up ("dekhay pachi"), add a subtle 3D flip/rotator effect */
.vv-fact-num.is-counting {
  animation: numRotateTick 0.18s ease-in-out infinite;
}
@keyframes numRotateTick {
  0% {
    transform: translateY(0px) rotateX(0deg);
  }
  50% {
    transform: translateY(-2px) rotateX(15deg);
  }
  100% {
    transform: translateY(0px) rotateX(0deg);
  }
}
.vv-fact-lbl {
  font-size: 13px;
  font-weight: 700;
  color: rgba(2, 46, 82, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  line-height: 1.35;
  transition: color 0.35s ease;
}
.vv-facts-line:hover .vv-fact-lbl {
  color: rgba(255, 255, 255, 0.88);
}
/* ==========================================================
       RESPONSIVE DESIGN (TABLET & MOBILE)
       ========================================================== */
@media (max-width: 1024px) {
  .vv-who-grid {
    grid-template-columns: 1fr;
    gap: 54px;
  }
  .vv-arch-img {
    height: 420px;
  }
}
@media (max-width: 640px) {
  .vv-who-section {
    padding: 70px 0 80px;
  }
  .vv-who-wrap {
    padding: 0 18px;
  }
  .vv-who-title {
    font-size: clamp(28px, 7vw, 36px);
  }
  .vv-arch-img {
    width: 92%;
    height: 380px;
    border-radius: 90px 90px 22px 22px;
  }
  .vv-overlap-img {
    width: 170px;
    height: 140px;
    right: 0px;
    bottom: 0px;
  }
  .vv-stamp-badge {
    width: 95px;
    height: 95px;
    top: 0px;
    left: 0px;
  }
  .vv-stamp-badge .center-ic {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  /* Facts & Figures Responsive */
  .vv-facts-line {
    grid-template-columns: 1fr;
    gap: 22px;
    padding: 24px 18px;
  }
  .vv-fact-item:not(:last-child)::after {
    display: none;
  }
  .vv-fact-item:not(:last-child) {
    border-bottom: 1px solid rgba(2, 46, 82, 0.1);
    padding-bottom: 20px;
  }
}
.vv-mvv {
  position: relative;
  padding: 80px 20px 80px;
  background: linear-gradient(180deg, #0B2238 0%, #061726 100%);
  color: #fff;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
/* Subtle Square Grid BG (Screenshot Style) */
.vv-mvv::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.vv-wrap {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
}
/* 1. CENTER HEADER (White Title + Bright Blue #3B82F6 Highlight) */
.vv-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 60px;
}
.vv-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  padding: 7px 20px;
  border-radius: 50px;
  margin-bottom: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vv-title {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 16px;
}
.vv-title span {
  color: #3B82F6; /* Bright Blue exactly like 'Our Impact' in screenshot */
}
.vv-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
}
/* 2. THREE-COLUMN CARDS WITH RESTORED CREATIVE ANIMATION */
.vv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  align-items: stretch;
}
.mvv-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 22px;
  padding: 40px 32px 42px;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  transition: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
}
/* RESTORED ANIMATION 1: SWEEPING SCANNER LIGHT ON TOP BORDER (BRIGHT BLUE) */
.mvv-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, transparent, #3B82F6, transparent);
  animation: sweepLight 4s linear infinite;
}
.mvv-card:nth-child(2)::before {
  animation-delay: 1.3s;
}
.mvv-card:nth-child(3)::before {
  animation-delay: 2.6s;
}
@keyframes sweepLight {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
/* RESTORED ANIMATION 2: HOVER BOTTOM-BORDER EXPANSION (BRIGHT BLUE) + 3D LIFT */
.mvv-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 3.5px;
  background: #3B82F6;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.mvv-card:hover::after {
  width: 100%;
}
.mvv-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-12px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35), 0 0 30px rgba(59, 130, 246, 0.15);
}
/* RESTORED ANIMATION 3: LIVE PULSING RIPPLE BEHIND ICON */
.mvv-ic {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(59, 130, 246, 0.14);
  color: #3B82F6;
  display: grid;
  place-items: center;
  font-size: 24px;
  margin-bottom: 26px;
  transition: 0.4s ease;
}
.mvv-ic::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 18px;
  border: 2px solid rgba(59, 130, 246, 0.35);
  animation: pulseAura 2.5s ease-out infinite;
}
@keyframes pulseAura {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  100% {
    transform: scale(1.35);
    opacity: 0;
  }
}
.mvv-card:hover .mvv-ic {
  background: #3B82F6;
  color: #fff;
  transform: translateY(-4px) scale(1.08);
}
.mvv-card h3 {
  font-size: 25px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
}
.mvv-card p {
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, .78);
}
/* Core Values Clean List */
.mvv-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.mvv-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, .86);
  font-weight: 500;
}
.mvv-list li i {
  color: #E6A817; /* Yellow used only on checkmarks */ font-size: 14px;
}
/* 3. MOBILE RESPONSIVE (~10 LINES) */
@media (max-width: 960px) {
  .vv-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .mvv-card {
    padding: 32px 24px;
  }
  .vv-head {
    margin-bottom: 44px;
  }
}
/* ==========================================================
       FOUNDER & MANAGING DIRECTOR — BOARDROOM PROFILE ("DIRECTOR JEVU")
       WHITE BG + RICH BLUE BOARDROOM DECK + DIRECTOR'S STATEMENT
       MINIMUM CLEAN CSS (~78 LINES)
       ========================================================== */
.vv-director {
  position: relative;
  padding: 90px 20px 90px;
  background: #ffffff;
  color: #022E52;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
/* Subtle Architectural Dot Grid */
.vv-director::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 46, 82, 0.08) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  pointer-events: none;
}
.vv-wrap {
  position: relative;
  z-index: 5;
  max-width: 1240px;
  margin: 0 auto;
}
/* 1. CENTER HEADER */
.vv-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 55px;
}
.vv-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(2, 46, 82, .06);
  border: 1px solid rgba(2, 46, 82, .14);
  padding: 7px 20px;
  border-radius: 50px;
  margin-bottom: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vv-title {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  color: #022E52;
  line-height: 1.2;
  margin-bottom: 14px;
}
.vv-title span {
  color: #3B82F6;
}
.vv-sub {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(2, 46, 82, .72);
}
/* 2. THE BOARDROOM EXECUTIVE DECK (RICH DARK NAVY BLUE CARD) */
.boardroom-deck {
  background: linear-gradient(150deg, #022E52 0%, #051F38 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 28px;
  padding: 48px 46px 52px;
  box-shadow: 0 25px 60px rgba(2, 46, 82, 0.18);
  display: grid;
  grid-template-columns: 0.88fr 1.32fr;
  gap: 56px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
/* Scanner metallic blue line on top border */
.boardroom-deck::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, transparent, #3B82F6, #E6A817, transparent);
  animation: sweepDir 5s linear infinite;
}
@keyframes sweepDir {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
/* LEFT: DIRECTOR'S PORTRAIT MONUMENT & NAME PLATE */
.director-monument {
  position: relative;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
}
.d-photo-wrap {
  position: relative;
  width: 100%;
  height: 420px;
  border-radius: 18px;
  overflow: hidden;
  border: 3px solid #ffffff;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  background: #022E52;
}
.d-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.director-monument:hover .d-photo-wrap img {
  transform: scale(1.07);
}
/* Executive Emblem Badge on Top Corner of Photo */
.d-emblem {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  background: rgba(11, 34, 56, 0.92);
  border: 1px solid rgba(230, 168, 23, 0.6);
  backdrop-filter: blur(10px);
  padding: 6px 14px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 800;
  color: #E6A817;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 7px;
}
/* Director's Official Name Plate Below Photo */
.d-nameplate {
  padding: 22px 14px 10px;
  text-align: center;
}
.d-nameplate h3 {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.d-nameplate p {
  font-size: 14px;
  font-weight: 700;
  color: #3B82F6;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.d-socials {
  display: flex;
  justify-content: center;
  gap: 10px;
}
.d-socials a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 15px;
  transition: 0.3s;
}
.d-socials a:hover {
  background: #3B82F6;
  color: #ffffff;
  transform: translateY(-3px);
}
/* RIGHT: FROM THE DIRECTOR'S DESK (AUTHORITATIVE STATEMENT) */
.director-desk {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.desk-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  color: #E6A817;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  margin-bottom: 14px;
}
.director-desk h3 {
  font-size: clamp(28px, 3.3vw, 36px);
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 22px;
  line-height: 1.25;
  letter-spacing: -0.6px;
}
.director-desk h3 span {
  color: #3B82F6;
}
/* Executive Statement Paragraphs */
.desk-statement {
  font-size: 16.5px;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.84);
  margin-bottom: 18px;
}
.desk-statement strong {
  color: #ffffff;
  font-weight: 700;
}
/* Director's Official Seal & 3 Boardroom Metrics Bar */
.director-seal-bar {
  margin-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.seal-emblem {
  display: flex;
  align-items: center;
  gap: 12px;
}
.seal-emblem .s-ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(230, 168, 23, 0.18);
  color: #E6A817;
  display: grid;
  place-items: center;
  font-size: 22px;
}
.seal-emblem .s-txt h4 {
  font-size: 14.5px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.8px;
}
.seal-emblem .s-txt p {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.board-metrics {
  display: flex;
  gap: 28px;
}
.b-item {
  text-align: center;
}
.b-item .num {
  font-size: 24px;
  font-weight: 800;
  color: #3B82F6;
  line-height: 1.1;
  margin-bottom: 3px;
}
.b-item .lbl {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.7px;
}
/* 3. MOBILE RESPONSIVE (~10 LINES) */
@media (max-width: 960px) {
  .boardroom-deck {
    grid-template-columns: 1fr;
    gap: 45px;
    padding: 36px 28px;
  }
  .d-photo-wrap {
    height: 420px;
  }
  .director-seal-bar {
    flex-direction: column;
    align-items: flex-start;
  }
  .vv-head {
    margin-bottom: 40px;
  }
}
@media (max-width: 480px) {

  .vv-director {
    padding: 80px 18px 90px;
  }
  .boardroom-deck {
    padding: 28px 20px;
  }
  .d-photo-wrap {
    height: 360px;
  }
  .board-metrics {
    width: 100%;
    justify-content: space-between;
  }
}
/* ==========================================================
       THE TEAM SECTION — 100% UNIQUE SCOPED CLASS NAMES ("VVX-TEAM-")
       PREVENTS ANY CSS MERGING OR CLASHING WITH OTHER SECTIONS
       MINIMUM CLEAN CSS (~75 LINES)
       ========================================================== */
.vvx-team-section {
  position: relative;
  padding: 110px 20px 125px;
  background: linear-gradient(180deg, #0B2238 0%, #061726 100%);
  color: #ffffff;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.vvx-team-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}
.vvx-team-wrap {
  position: relative;
  z-index: 5;
  max-width: 1260px;
  margin: 0 auto;
}
/* CENTER HEADER */
.vvx-team-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 65px;
}
.vvx-team-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 7px 20px;
  border-radius: 50px;
  margin-bottom: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vvx-team-title {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 16px;
}
.vvx-team-title span {
  color: #3B82F6;
}
.vvx-team-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .75);
}
/* 3x3 EXECUTIVE GRID */
.vvx-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.vvx-team-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 4px solid #3B82F6;
  border-radius: 22px;
  padding: 24px 24px 28px;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.vvx-team-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, transparent, #3B82F6, #E6A817, transparent);
  animation: vvxSweep 5s linear infinite;
}
.vvx-team-card:nth-child(2)::before, .vvx-team-card:nth-child(5)::before, .vvx-team-card:nth-child(8)::before {
  animation-delay: 1.3s;
}
.vvx-team-card:nth-child(3)::before, .vvx-team-card:nth-child(6)::before, .vvx-team-card:nth-child(9)::before {
  animation-delay: 2.6s;
}
@keyframes vvxSweep {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
.vvx-team-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(59, 130, 246, 0.5);
  border-left-color: #E6A817;
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 30px rgba(59, 130, 246, 0.15);
}
.vvx-team-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.vvx-team-avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(59, 130, 246, 0.4);
  background: #022E52;
  flex-shrink: 0;
  transition: 0.3s;
}
.vvx-team-card:hover .vvx-team-avatar {
  border-color: #E6A817;
  transform: scale(1.08);
}
.vvx-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.vvx-team-initials {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: #3B82F6;
  background: rgba(59, 130, 246, 0.15);
}
.vvx-team-card:hover .vvx-team-initials {
  color: #E6A817;
  background: rgba(230, 168, 23, 0.2);
}
.vvx-team-name {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 3px;
}
.vvx-team-designation {
  font-size: 12.5px;
  font-weight: 700;
  color: #3B82F6;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.vvx-team-desc {
  font-size: 14px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 22px;
  flex: 1;
}
.vvx-team-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 16px;
}
.vvx-team-badge {
  font-size: 11px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(230, 168, 23, 0.12);
  padding: 4px 12px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.vvx-team-socials {
  display: flex;
  gap: 8px;
}
.vvx-team-socials a {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 14px;
  transition: 0.3s;
}
.vvx-team-socials a:hover {
  background: #3B82F6;
  color: #ffffff;
  transform: translateY(-3px);
}
/* MOBILE RESPONSIVE (~10 LINES) */
@media (max-width: 1024px) {
  .vvx-team-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
}
@media (max-width: 640px) {
  .vvx-team-section {
    padding: 80px 18px 90px;
  }
  .vvx-team-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .vvx-team-header {
    margin-bottom: 45px;
  }
}
/* ==========================================================
       CAREERS — SEARCH YOUR POSITION + APPLY NOW POPUP MODAL
       100% UNIQUE SCOPED CLASS NAMES ("VVX-CAREER-", "VVX-MODAL-")
       WHITE BG + RICH BLUE EXECUTIVE CARDS
       MINIMUM CLEAN CSS (~95 LINES)
       ========================================================== */
.vvx-career-section {
  position: relative;
  padding: 80px 20px 80px;
  background: #ffffff;
  color: #022E52;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
}
.vvx-career-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 46, 82, 0.08) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  pointer-events: none;
}
.vvx-career-wrap {
  position: relative;
  z-index: 5;
  max-width: 1180px;
  margin: 0 auto;
}
/* CENTER HEADER */
.vvx-career-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}
.vvx-career-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(2, 46, 82, .06);
  border: 1px solid rgba(2, 46, 82, .14);
  padding: 7px 20px;
  border-radius: 50px;
  margin-bottom: 18px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vvx-career-title {
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 800;
  color: #022E52;
  line-height: 1.2;
  margin-bottom: 14px;
}
.vvx-career-title span {
  color: #3B82F6;
}
.vvx-career-subtitle {
  font-size: 16px;
  line-height: 1.7;
  color: rgba(2, 46, 82, .72);
}
/* SEARCH & FILTER BAR */
.vvx-career-controls {
  background: #022E52;
  border-radius: 24px;
  padding: 24px 28px;
  margin-bottom: 40px;
  box-shadow: 0 16px 36px rgba(2, 46, 82, 0.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.vvx-career-search-box {
  position: relative;
  flex: 1;
  min-width: 280px;
}
.vvx-career-search-box i {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
}
.vvx-career-search-input {
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  padding: 13px 18px 13px 48px;
  font-size: 15px;
  color: #ffffff;
  outline: none;
  transition: 0.3s;
  font-family: 'Inter', sans-serif;
}
.vvx-career-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.vvx-career-search-input:focus {
  border-color: #3B82F6;
  background: rgba(255, 255, 255, 0.14);
}
.vvx-career-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vvx-career-tab {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  padding: 9px 18px;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s ease;
}
.vvx-career-tab:hover, .vvx-career-tab.active {
  background: #3B82F6;
  color: #ffffff;
  border-color: #3B82F6;
  box-shadow: 0 6px 16px rgba(59, 130, 246, 0.3);
}
/* OPEN POSITIONS CARDS */
.vvx-career-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.vvx-career-card {
  background: linear-gradient(150deg, #022E52 0%, #051F38 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 22px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px rgba(2, 46, 82, 0.12);
  position: relative;
  overflow: hidden;
}
.vvx-career-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 3.5px;
  background: linear-gradient(90deg, transparent, #3B82F6, #E6A817, transparent);
  animation: vvxSweepCar 5s linear infinite;
}
.vvx-career-card:nth-child(2)::before {
  animation-delay: 1s;
}
.vvx-career-card:nth-child(3)::before {
  animation-delay: 2s;
}
@keyframes vvxSweepCar {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}
.vvx-career-card:hover {
  transform: translateY(-6px);
  background: linear-gradient(150deg, #05335E 0%, #082846 100%);
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 20px 45px rgba(2, 46, 82, 0.25), 0 0 25px rgba(59, 130, 246, 0.15);
}
.vvx-career-info {
  flex: 1;
}
.vvx-career-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.vvx-career-cat {
  background: rgba(59, 130, 246, 0.18);
  border: 1px solid rgba(59, 130, 246, 0.35);
  color: #3B82F6;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}
.vvx-career-loc {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  gap: 6px;
}
.vvx-career-loc i {
  color: #E6A817;
}
.vvx-career-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
}
.vvx-career-card p {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 720px;
}
/* APPLY NOW BUTTON */
.vvx-career-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #3B82F6;
  color: #ffffff;
  border: 1px solid #3B82F6;
  padding: 12px 24px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  flex-shrink: 0;
  cursor: pointer;
}
.vvx-career-btn:hover {
  background: #E6A817;
  border-color: #E6A817;
  color: #022E52;
  transform: translateX(4px);
  box-shadow: 0 8px 20px rgba(230, 168, 23, 0.35);
}
.vvx-career-empty {
  display: none;
  text-align: center;
  padding: 60px 20px;
  font-size: 17px;
  font-weight: 600;
  color: rgba(2, 46, 82, 0.6);
}
/* ==========================================================
       POPUP MODAL FORM STYLES ("APPLY NOW PR CLICK KARO TO FORM")
       ========================================================== */
.vvx-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 30, 53, 0.75);
  backdrop-filter: blur(8px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: vvxModalBg 0.3s ease;
}
@keyframes vvxModalBg {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.vvx-modal-box {
  background: linear-gradient(150deg, #022E52 0%, #051F38 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 26px;
  width: 100%;
  max-width: 580px;
  padding: 36px 36px 40px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  position: relative;
  animation: vvxModalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  max-height: 90vh;
  overflow-y: auto;
}
@keyframes vvxModalPop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.vvx-modal-close {
  position: absolute;
  top: 22px;
  right: 24px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #ffffff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: 0.3s;
}
.vvx-modal-close:hover {
  background: #E6A817;
  color: #022E52;
  transform: rotate(90deg);
}
.vvx-modal-header {
  margin-bottom: 24px;
}
.vvx-modal-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  color: #E6A817;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 6px;
}
.vvx-modal-title {
  font-size: 23px;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.25;
}
.vvx-modal-title span {
  color: #3B82F6;
}
/* Application Form Fields */
.vvx-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.vvx-form-col-span {
  grid-column: span 2;
}
.vvx-field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.vvx-field-group label {
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
.vvx-input, .vvx-select, .vvx-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: #ffffff;
  outline: none;
  transition: 0.3s;
  font-family: 'Inter', sans-serif;
}
.vvx-input::placeholder, .vvx-textarea::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.vvx-input:focus, .vvx-select:focus, .vvx-textarea:focus {
  border-color: #3B82F6;
  background: rgba(255, 255, 255, 0.12);
}
.vvx-select option {
  background: #022E52;
  color: #fff;
}
.vvx-file-drop {
  border: 2px dashed rgba(59, 130, 246, 0.45);
  border-radius: 14px;
  padding: 18px;
  text-align: center;
  cursor: pointer;
  background: rgba(59, 130, 246, 0.06);
  transition: 0.3s;
}
.vvx-file-drop:hover {
  border-color: #E6A817;
  background: rgba(230, 168, 23, 0.08);
}
.vvx-file-drop i {
  font-size: 24px;
  color: #3B82F6;
  margin-bottom: 6px;
  display: block;
}
.vvx-file-drop span {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
}
.vvx-submit-btn {
  width: 100%;
  background: #3B82F6;
  color: #ffffff;
  border: none;
  padding: 14px 24px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}
.vvx-submit-btn:hover {
  background: #E6A817;
  color: #022E52;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(230, 168, 23, 0.35);
}
/* Success confirmation state */
.vvx-success-box {
  display: none;
  text-align: center;
  padding: 30px 20px 10px;
}
.vvx-success-box i {
  font-size: 52px;
  color: #E6A817;
  margin-bottom: 16px;
  display: block;
}
.vvx-success-box h3 {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
}
.vvx-success-box p {
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 24px;
}
/* RESPONSIVE */
@media (max-width: 960px) {
  .vvx-career-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .vvx-career-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px;
  }
  .vvx-career-btn {
    width: 100%;
    justify-content: center;
  }
}
@media (max-width: 640px) {
  .vvx-career-section {
    padding: 80px 18px 80px;
  }
  .vvx-form-grid {
    grid-template-columns: 1fr;
  }
  .vvx-form-col-span {
    grid-column: span 1;
  }
  .vvx-modal-box {
    padding: 28px 20px;
  }
}
/* ==========================================================
       EMPLOYEE BENEFITS — SHORT & CLEAN EDITION ("PLAIN BLUE BG")
       ZERO BACKGROUND LINE / GRID ELEMENTS — 100% PLAIN ROYAL BLUE
       MINIMUM CLEAN CSS (~50 LINES)
       ========================================================== */
.vvx-ben-section {
  position: relative;
  padding: 95px 20px 105px;
  /* 100% PLAIN BLUE BACKGROUND — NO LINES OR GRID PATTERNS */
  background: linear-gradient(180deg, #0B2238 0%, #061726 100%);
  color: #ffffff;
  font-family: 'Inter', sans-serif;
}
.vvx-ben-wrap {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}
/* 1. SHORT CENTER HEADER */
.vvx-ben-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 50px;
}
.vvx-ben-tag {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vvx-ben-title {
  font-size: clamp(32px, 3.8vw, 42px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin-bottom: 12px;
}
.vvx-ben-title span {
  color: #3B82F6;
}
.vvx-ben-sub {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .72);
}
/* 2. 4 COMPACT CARDS IN 1 ROW (NO CLUTTER) */
.vvx-ben-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
  margin-bottom: 40px;
}
.vvx-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 28px 24px 30px;
  transition: all 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
/* Top blue accent bar */
.vvx-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3.5px;
  background: #3B82F6;
  transition: 0.35s;
}
.vvx-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.vvx-card:hover::before {
  background: #E6A817;
}
.vvx-ic {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #3B82F6;
  display: grid;
  place-items: center;
  font-size: 20px;
  margin-bottom: 20px;
  transition: 0.35s;
}
.vvx-card:hover .vvx-ic {
  background: #3B82F6;
  color: #ffffff;
  transform: scale(1.08);
}
.vvx-card .num {
  font-size: 11.5px;
  font-weight: 800;
  color: #E6A817;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vvx-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 10px;
  line-height: 1.3;
}
.vvx-card p {
  font-size: 14px;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
/* 3. SHORT CENTER CTA BUTTON */
.vvx-cta-wrap {
  text-align: center;
}
.vvx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #3B82F6;
  color: #ffffff;
  padding: 13px 28px;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: 0.3s;
}
.vvx-btn:hover {
  background: #E6A817;
  color: #022E52;
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(230, 168, 23, 0.35);
}
/* MOBILE RESPONSIVE (~10 LINES) */
@media (max-width: 960px) {
  .vvx-ben-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (max-width: 640px) {
  .vvx-ben-section {
    padding: 75px 18px 85px;
  }
  .vvx-ben-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .vvx-card {
    padding: 26px 22px;
  }
}
.vvx-ben-section /* =====================================================================
       SECTION 07 // WORK CULTURE (#WORK-CULTURE) — WHITE BG (#FFFFFF)
       100% WORK CULTURE SCOPED CLASS NAMES ("VVX-WORKCULTURE-")
       PERFECT TOP/BOTTOM SPACING (85PX / 95PX) & BALANCED HEADER GAP (40PX)
       ALL MODAL IMAGES & TEXT CONTROLLED DIRECTLY IN HTML DATA ATTRIBUTES
       ===================================================================== */
/* 1. MAIN SECTION WRAPPER (!IMPORTANT SO NO THEME CAN OVERRIDE IT) */
.vvx-workculture-section {
  position: relative !important;
  padding: 85px 0 95px !important;
  background: #ffffff !important;
  color: #022E52 !important;
  overflow: hidden !important;
  font-family: 'Inter', sans-serif !important;
}
.vvx-workculture-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(2, 46, 82, 0.08) 1.5px, transparent 1.5px);
  background-size: 32px 32px;
  pointer-events: none;
}
.vvx-workculture-wrap {
  position: relative;
  z-index: 5;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 30px;
}
/* 2. CENTER HEADER (PERFECT 40PX BOTTOM MARGIN - NO HUGE EMPTY GAP) */
.vvx-workculture-head {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}
.vvx-workculture-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #E6A817;
  background: rgba(2, 46, 82, 0.06);
  border: 1px solid rgba(2, 46, 82, 0.14);
  padding: 7px 20px;
  border-radius: 50px;
  margin-bottom: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.vvx-workculture-title {
  font-size: clamp(32px, 3.8vw, 42px);
  font-weight: 800;
  color: #022E52;
  line-height: 1.2;
  margin-bottom: 10px;
}
.vvx-workculture-title span {
  color: #3B82F6;
}
.vvx-workculture-subtitle {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(2, 46, 82, 0.75);
}
/* 3. CAROUSEL CONTAINER WITH ARROWS FLOATING ON IMAGE EDGES */
.vvx-workculture-carousel {
  position: relative;
  width: 100%;
}
/* LEFT & RIGHT ARROWS ON IMAGES */
.vvx-workculture-arrow {
  position: absolute;
  top: 50%;
  margin-top: -27px; /* Center vertically on 360px photo cards */
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(2, 46, 82, 0.9);
  border: 2px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 19px;
  cursor: pointer;
  transition: all 0.35s ease;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(12px);
  z-index: 50;
}
.vvx-workculture-arrow.arr-left {
  left: 16px;
}
.vvx-workculture-arrow.arr-right {
  right: 16px;
}
.vvx-workculture-arrow:hover {
  background: #E6A817;
  color: #022E52;
  border-color: #E6A817;
  transform: scale(1.15);
  box-shadow: 0 18px 40px rgba(230, 168, 23, 0.55);
}
/* 4. COMPACT VIEWPORT & INFINITE TRACK */
.vvx-workculture-viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 6px 0 12px;
}
.vvx-workculture-track {
  display: flex;
  gap: 24px;
  transition: transform 0.65s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}
/* 5. COMPACT EXECUTIVE IMAGE CARDS (320PX WIDE x 360PX HEIGHT) */
.vvx-workculture-card {
  position: relative;
  flex: 0 0 320px;
  height: 360px;
  border-radius: 22px;
  overflow: hidden;
  border: 2.5px solid rgba(255, 255, 255, 0.18);
  background: #022E52;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(2, 46, 82, 0.2);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.vvx-workculture-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
  z-index: 1;
}
.vvx-workculture-card:hover img {
  transform: scale(1.12);
}
.vvx-workculture-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(2, 46, 82, 0.95) 0%, rgba(2, 46, 82, 0.35) 45%, transparent 100%);
  z-index: 2;
  opacity: 0.88;
  transition: 0.4s ease;
}
.vvx-workculture-card:hover .vvx-workculture-gradient {
  opacity: 0.96;
  background: linear-gradient(0deg, rgba(2, 46, 82, 0.98) 0%, rgba(59, 130, 246, 0.35) 60%, transparent 100%);
}
.vvx-workculture-card:hover {
  border-color: #E6A817;
  transform: translateY(-8px);
  box-shadow: 0 24px 50px rgba(2, 46, 82, 0.35), 0 0 30px rgba(230, 168, 23, 0.25);
}
.vvx-workculture-caption {
  position: relative;
  z-index: 3;
  padding: 20px 20px;
  transition: transform 0.4s ease;
}
.vvx-workculture-card:hover .vvx-workculture-caption {
  transform: translateY(-4px);
}
.vvx-workculture-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(230, 168, 23, 0.18);
  border: 1px solid rgba(230, 168, 23, 0.45);
  color: #E6A817;
  padding: 5px 12px;
  border-radius: 50px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 10px;
  transition: 0.3s;
}
.vvx-workculture-card:hover .vvx-workculture-badge {
  background: #3B82F6;
  color: #ffffff;
  border-color: #3B82F6;
}
.vvx-workculture-card h3 {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
  line-height: 1.25;
}
.vvx-workculture-card p {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
.vvx-workculture-viewbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  transition: 0.3s;
}
.vvx-workculture-card:hover .vvx-workculture-viewbtn {
  background: #E6A817;
  color: #022E52;
  border-color: #E6A817;
}
.vvx-workculture-zoomicon {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  background: rgba(2, 46, 82, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-size: 14px;
  z-index: 4;
  transition: 0.3s;
  opacity: 0;
}
.vvx-workculture-card:hover .vvx-workculture-zoomicon {
  opacity: 1;
  transform: scale(1.1);
  background: #3B82F6;
}
/* 6. LIGHTBOX MODAL (FULL SCREEN HIGH RES VIEW) */
.vvx-workculture-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(2, 46, 82, 0.95);
  backdrop-filter: blur(14px);
  z-index: 100000;
  align-items: center;
  justify-content: center;
  padding: 25px;
}
.vvx-workculture-modal-box {
  background: #0B2238;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 28px;
  max-width: 960px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.75);
  display: flex;
  flex-direction: column;
  position: relative;
  animation: workCultureModalPop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes workCultureModalPop {
  0% {
    transform: scale(0.92);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
.vvx-workculture-modal-image {
  position: relative;
  width: 100%;
  height: 520px;
  background: #022E52;
}
.vvx-workculture-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vvx-workculture-modal-details {
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: #061726;
}
.vvx-workculture-modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(2, 46, 82, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 18px;
  z-index: 10;
  transition: 0.3s;
}
.vvx-workculture-modal-close:hover {
  background: #E6A817;
  color: #022E52;
  transform: rotate(90deg);
}
.vvx-workculture-modal-nav {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
  transition: 0.3s;
}
.vvx-workculture-modal-nav:hover {
  background: #3B82F6;
  color: #fff;
}
/* 7. RESPONSIVE FOR MOBILE (MAX-WIDTH 640PX) */
@media (max-width: 640px) {
  .vvx-workculture-section {
    padding: 65px 0 75px !important;
  }
  .vvx-workculture-wrap {
    padding: 0 18px;
  }
  .vvx-workculture-card {
    flex: 0 0 280px;
    height: 340px;
  }
  .vvx-workculture-modal-image {
    height: 320px;
  }
  .vvx-workculture-arrow {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .vvx-workculture-arrow.arr-left {
    left: 8px;
  }
  .vvx-workculture-arrow.arr-right {
    right: 8px;
  }
}
</style > .em-road-map {
  height: 595px;
  position: relative;
  max-width: 1450px;
  margin: auto
}
.em-road-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible
}
.em-road-step {
  position: absolute;
  z-index: 4;
  width: 218px
}
.em-road-pin {
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: var(--rmp-navy);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 14px;
  border: 5px solid #fff;
  box-shadow: 0 6px 20px #022e5240;
  margin: auto;
  position: relative;
  z-index: 2
}
.em-road-step:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 22px;
  background: #9dbaca;
  left: 50%;
  top: 43px
}
.em-road-car {
  position: absolute;
  z-index: 8;
  width: 90px;
  height: 60px;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 8px 6px #022e5233)
}
.em-defender-visual {
  position: relative;
  width: 100%;
  height: 100%;
  display: block
}
.em-road-car img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  transform: scaleX(-1)
}
.em-defender-headlight {
  position: absolute;
  z-index: 2;
  width: 7px;
  height: 6px;
  border-radius: 50%;
  background: #fffbe5;
  box-shadow: 0 0 5px 2px #fff4aa, 0 0 14px 5px #ffe477;
  animation: defender-blink 1.15s ease-in-out infinite
}
.em-light-left {
  right: 8px;
  top: 22%
}
.em-light-right {
  right: 8px;
  bottom: 22%;
  animation-delay: .08s
}
@keyframes defender-blink {
  0%, 100% {
    opacity: .38;
    filter: brightness(1)
  }
  45% {
    opacity: 1;
    filter: brightness(1.8)
  }
}
.em-road-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none
}
.em-road-glow.em-glow-1 {
  width: 250px;
  height: 250px;
  background: #a6d9f044;
  top: -80px;
  left: -80px
}
.em-road-glow.em-glow-2 {
  width: 300px;
  height: 300px;
  background: #f5b82e1b;
  right: -100px;
  bottom: -120px
}
@media(max-width:900px) {
  #rmp-roadmap {
    padding: 70px 15px
  }
  .em-road-map {
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding: 12px 0
  }
  .em-road-line {
    display: none
  }
  .em-road-step, .m1, .m2, .m3, .m4, .m5 {
    position: relative;
    inset: auto;
    width: 100%;
    top: auto;
    left: auto;
    right: auto
  }
  .em-road-step:after {
    display: none
  }
  .em-road-car {
    display: none
  }
  .em-road-card {
    margin-top: 13px
  }
  .em-road-pin {
    margin: 0 auto
  }
}
@media(max-width:530px) {
  .em-road-map {
    grid-template-columns: 1fr;
    gap: 18px
  }
  .em-road-title {
    letter-spacing: -1px
  }
  .em-road-sub {
    font-size: 14px
  }
}
/* Defender ને completely straight રાખવા માટે */
.rmp-walker .w-body, .rmp-walker .wk-peg, .rmp-walker .defender-visual {

  rotate: none !important;
  transform: none !important;
}
.rmp-walker img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: contain !important;
  /* માત્ર direction flip, rotation નહીં */
  transform: scaleX(-1) !important;
  rotate: none !important;
}
.vvx-talent-section {
  position: relative;
  overflow: hidden;
  padding: 100px 20px;
  background: #fff;
  color: #022E52;
  font-family: Inter, Arial, sans-serif
}
.vvx-talent-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 68%, #f8fbff 68%);
  pointer-events: none
}
.vvx-talent-bg:after {
  content: "";
  position: absolute;
  right: 7%;
  top: 10%;
  width: 170px;
  height: 170px;
  border: 1px solid #d9e2ea;
  border-radius: 50%;
  box-shadow: 0 0 0 28px #fff, 0 0 0 29px #d9e2ea, 0 0 0 58px #fff, 0 0 0 59px #edf0f3;
  opacity: .8
}
.vvx-talent-container {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: auto
}
.vvx-talent-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 55px;
  animation: talentIn .8s ease both
}
.vvx-talent-label {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #d9e2ea;
  border-radius: 30px;
  color: #3b82f6;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px
}
.vvx-talent-heading h2 {
  margin: 18px 0 14px;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.08;
  letter-spacing: -2px
}
.vvx-talent-heading h2 em {
  font-style: normal;
  color: #3b82f6
}
.vvx-talent-heading p {
  margin: auto;
  color: #5b7fa3;
  font-size: 16px;
  line-height: 1.7
}
.vvx-talent-layout {
  display: grid;
  grid-template-columns: 1fr 1.65fr;
  gap: 22px
}
.vvx-talent-main-card {
  padding: 34px;
  border-radius: 16px;
  background: #022e52;
  color: #fff;
  box-shadow: 0 20px 40px rgba(2, 46, 82, .14);
  animation: talentCard .8s .15s ease both
}
.vvx-talent-main-top {
  display: flex;
  justify-content: space-between;
  color: #9db5c9;
  font-size: 11px;
  letter-spacing: 1px
}
.vvx-talent-main-top b {
  color: #3b82f6;
  font-size: 10px
}
.vvx-talent-symbol {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 48px 0 24px;
  border-radius: 50%;
  background: #3b82f6;
  font-size: 25px
}
.vvx-talent-main-card h3 {
  margin: 0 0 14px;
  font-size: 30px;
  line-height: 1.08
}
.vvx-talent-main-card p {
  color: #b7cad9;
  line-height: 1.65;
  font-size: 14px
}
.vvx-talent-main-card a {
  display: inline-flex;
  gap: 17px;
  align-items: center;
  margin-top: 24px;
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700
}
.vvx-talent-main-card a strong {
  color: #3b82f6;
  font-size: 22px
}
.vvx-talent-list {
  display: flex;
  flex-direction: column;
  gap: 14px
}
.vvx-talent-list article {
  display: grid;
  grid-template-columns: 42px 1fr 28px;
  align-items: center;
  gap: 18px;
  padding: 24px 26px;
  border: 1px solid #d9e2ea;
  border-radius: 12px;
  background: #fff;
  transition: .25s;
  animation: talentCard .7s ease both
}
.vvx-talent-list article:nth-child(1) {
  animation-delay: .25s
}
.vvx-talent-list article:nth-child(2) {
  animation-delay: .4s
}
.vvx-talent-list article:nth-child(3) {
  animation-delay: .55s
}
.vvx-talent-list article:hover {
  border-color: #3b82f6;
  background: #f8fbff;
  transform: translateX(7px)
}
.vvx-talent-list article > span {
  color: #3b82f6;
  font-weight: 800;
  font-size: 14px
}
.vvx-talent-list h3 {
  margin: 0 0 7px;
  font-size: 19px
}
.vvx-talent-list p {
  margin: 0;
  color: #5b7fa3;
  font-size: 13px;
  line-height: 1.55
}
.vvx-talent-list article > b {
  color: #3b82f6;
  font-size: 21px
}
.vvx-talent-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 28px;
  color: #5b7fa3;
  font-size: 14px;
  animation: talentIn .8s .7s ease both
}
.vvx-talent-footer > b, .vvx-talent-footer span > b {
  color: #3b82f6
}
.vvx-talent-footer div {
  display: flex;
  gap: 8px
}
.vvx-talent-footer i {
  font-style: normal;
  padding: 8px 13px;
  border: 1px solid #d9e2ea;
  border-radius: 3px;
  font-size: 11px
}
.vvx-talent-footer span b {
  font-weight: 800
}
@keyframes talentIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes talentCard {
  from {
    opacity: 0;
    transform: translateY(28px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@media(max-width:800px) {
  .vvx-talent-layout {
    grid-template-columns: 1fr
  }
  .vvx-talent-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px
  }
}
@media(max-width:520px) {
  .vvx-talent-section {
    padding: 70px 18px
  }
  .vvx-talent-heading h2 {
    letter-spacing: -1px
  }
  .vvx-talent-main-card {
    padding: 27px
  }
  .vvx-talent-list article {
    grid-template-columns: 30px 1fr 20px;
    padding: 20px 17px;
    gap: 10px
  }
}
/* =========================================================
   RECRUITMENT & TALENT ACQUISITION — SERVICE OVERVIEW
   WHITE BACKGROUND + BLUE THEME | scoped with vvx-recruit-
========================================================= */
/* Section Base */
.vvx-recruit-service-overview {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 80px;
  background: #ffffff;
  color: #0b2b4a;
  font-family: Inter, Arial, sans-serif;
  animation: recruitSectionReveal .9s ease both
}
.vvx-recruit-service-overview:before {
  content: "";
  position: absolute;
  right: -160px;
  top: -180px;
  width: 500px;
  height: 500px;
  border: 1px solid #e6eef8;
  border-radius: 50%;
  box-shadow: 0 0 0 35px #fff, 0 0 0 36px #e6eef8, 0 0 0 75px #fff, 0 0 0 76px #f2f7fe;
  animation: recruitOrbit 18s linear infinite
}
.vvx-recruit-overview-wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: auto
}
.vvx-recruit-overview-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 55px;
  animation: recruitOverviewIn .8s ease both
}
.vvx-recruit-overview-label {
  display: inline-block;
  padding: 8px 17px;
  border: 1px solid #bcd3f5;
  border-radius: 30px;
  color: #2563eb;
  background: #f2f7ff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px
}
.vvx-recruit-overview-heading h2 {
  margin: 18px 0 12px;
  font-size: clamp(34px, 5vw, 57px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: #1e3a8a
}
.vvx-recruit-overview-heading h2 span {
  color: #2563eb
}
.vvx-recruit-overview-heading p {
  margin: 0;
  color: #5b7fa3;
  font-size: 16px;
  line-height: 1.7
}
.vvx-recruit-overview-content {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 54px;
  align-items: center
}
/* Right column: 4 boxes + small stats band */
.vvx-recruit-overview-side {
  display: flex;
  flex-direction: column;
  gap: 16px
}
/* Intro card — white with blue accents */
.vvx-recruit-overview-intro {
  padding: 38px;
  border-radius: 14px;
  background: #f5f9ff;
  border: 1px solid #dbe8ff;
  color: #0b2b4a;
  box-shadow: 0 20px 40px rgba(37, 99, 235, .10);
  animation: recruitOverviewCard .8s .15s ease both;
  transition: transform .35s ease, box-shadow .35s ease
}
.vvx-recruit-overview-intro:hover {
  transform: translateY(-8px);
  box-shadow: 0 28px 48px rgba(37, 99, 235, .18)
}
.vvx-recruit-overview-image {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: 9px;
  margin-bottom: 27px;
  background: #dbe8ff;
  transition: transform .35s ease, filter .35s ease;
  animation: recruitImageAutoJump 3.2s ease-in-out infinite
}
.vvx-recruit-overview-intro:hover .vvx-recruit-overview-image {
  animation: recruitImageBounce .7s ease;
  filter: brightness(1.04);
  transform: scale(1.03)
}
.vvx-recruit-overview-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 30px;
  border-radius: 50%;
  background: #2563eb;
  color: #fff;
  font-size: 23px
}
.vvx-recruit-overview-intro h3 {
  margin: 0 0 18px;
  font-size: 27px;
  line-height: 1.2;
  color: #0b2b4a
}
.vvx-recruit-overview-intro h3 strong {
  color: #2563eb
}
.vvx-recruit-overview-intro p {
  margin: 0;
  color: #5b7fa3;
  font-size: 14px;
  line-height: 1.7
}
.vvx-recruit-overview-intro a {
  display: inline-flex;
  gap: 15px;
  align-items: center;
  margin-top: 28px;
  color: #2563eb;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700
}
.vvx-recruit-overview-intro a b {
  color: #2563eb;
  font-size: 21px
}
/* 4-Step Service Boxes */
.vvx-recruit-overview-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  align-items: stretch
}
.vvx-recruit-overview-points article {
  position: relative;
  overflow: hidden;
  min-height: 150px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 13px;
  padding: 22px 18px;
  border: 1px solid #c3d8f2;
  border-radius: 10px;
  background: #ffffff;
  align-content: center;
  animation: recruitOverviewCard .7s ease both;
  transition: .3s ease
}
.vvx-recruit-overview-points article::after {
  content: '';
  position: absolute;
  right: -22px;
  bottom: -28px;
  width: 82px;
  height: 82px;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 50%;
  box-shadow: 0 0 0 12px rgba(37, 99, 235, .05)
}
.vvx-recruit-overview-points article:nth-child(1) {
  animation-delay: .25s
}
.vvx-recruit-overview-points article:nth-child(2) {
  animation-delay: .35s
}
.vvx-recruit-overview-points article:nth-child(3) {
  animation-delay: .45s
}
.vvx-recruit-overview-points article:nth-child(4) {
  animation-delay: .55s
}
.vvx-recruit-overview-points article > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #eef4ff;
  color: #2563eb;
  font-size: 12px;
  font-weight: 800;
  transition: transform .3s ease, background .3s ease, color .3s ease
}
.vvx-recruit-overview-points article:hover {
  padding-left: 26px;
  background: #f5f9ff;
  border-color: #2563eb;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(37, 99, 235, .10)
}
.vvx-recruit-overview-points article:hover > span {
  transform: scale(1.25) rotate(-8deg);
  background: #2563eb;
  color: #fff
}
.vvx-recruit-overview-points h4 {
  margin: 0 0 7px;
  font-size: 18px;
  color: #0b2b4a
}
.vvx-recruit-overview-points p {
  margin: 0;
  color: #5b7fa3;
  font-size: 13px;
  line-height: 1.6
}
/* Bottom strip */
.vvx-recruit-overview-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin-top: 48px;
  color: #5b7fa3;
  font-size: 13px;
  font-weight: 700
}
.vvx-recruit-overview-bottom i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #2563eb
}
/* =========================================================
   STATS BAND — small navy band, right below the 4 boxes
========================================================= */
.vvx-recruit-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 14px;
  background: #102040;
  border-radius: 12px
}
.vvx-recruit-stats article {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 10px;
  background: #182848;
  border: 1px solid #24385c;
  border-radius: 10px;
  text-align: center;
  transition: border-color .3s ease, transform .3s ease
}
.vvx-recruit-stats article:hover {
  border-color: #d9a441;
  transform: translateY(-3px)
}
.vvx-recruit-stats h4 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: #ffffff
}
.vvx-recruit-stats h4 span {
  color: #d9a441;
  font-size: 18px
}
.vvx-recruit-stats p {
  margin: 0;
  color: #c6d4e6;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .2px
}
/* Rolling number (odometer) */
.vvx-recruit-stats h4 b {
  display: inline-flex;
  align-items: flex-end;
  font-variant-numeric: tabular-nums
}
.vvx-odom-wrap {
  display: inline-flex
}
.vvx-odom-col {
  display: inline-block;
  height: 22px;
  overflow: hidden
}
.vvx-odom-inner {
  display: inline-flex;
  flex-direction: column;
  will-change: transform
}
.vvx-odom-digit {
  display: block;
  height: 22px;
  line-height: 22px;
  text-align: center
}
/* Entrance Animations */
@keyframes recruitSectionReveal {
  from {
    opacity: 0;
    transform: scale(.98)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes recruitImageAutoJump {
  0%, 78%, 100% {
    transform: translateY(0) scale(1)
  }
  84% {
    transform: translateY(-10px) scale(1.025)
  }
  90% {
    transform: translateY(2px) scale(1.01)
  }
  95% {
    transform: translateY(-4px) scale(1.015)
  }
}
@keyframes recruitOrbit {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
@keyframes recruitImageBounce {
  0%, 100% {
    transform: scale(1.03) translateY(0)
  }
  30% {
    transform: scale(1.05) translateY(-9px)
  }
  55% {
    transform: scale(1.03) translateY(3px)
  }
  75% {
    transform: scale(1.04) translateY(-3px)
  }
}
@keyframes recruitOverviewIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes recruitOverviewCard {
  from {
    opacity: 0;
    transform: translateY(25px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
/* Responsive */
@media(max-width:800px) {
  .vvx-recruit-overview-content {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .vvx-recruit-overview-points {
    grid-template-columns: 1fr 1fr
  }
}
@media(max-width:520px) {
  .vvx-recruit-service-overview {
    padding: 70px 18px
  }
  .vvx-recruit-overview-heading h2 {
    letter-spacing: -1px
  }
  .vvx-recruit-overview-intro {
    padding: 28px
  }
  .vvx-recruit-overview-points {
    grid-template-columns: 1fr
  }
  .vvx-recruit-overview-bottom {
    flex-wrap: wrap;
    gap: 10px
  }
}
/* =========================================================
   CSS END
========================================================= */
/* =========================================================
   RECRUITMENT — 6 CHALLENGES SECTION
   BLUE BACKGROUND + WHITE TEXT | scoped with vvx-challenges-
========================================================= */
.vvx-challenges {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 80px;
  background: #102343;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  animation: vvxChallengesReveal .9s ease both
}
.vvx-challenges:before {
  content: "";
  position: absolute;
  right: -180px;
  top: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .02), 0 0 0 41px rgba(255, 255, 255, .06), 0 0 0 90px rgba(255, 255, 255, .02), 0 0 0 91px rgba(255, 255, 255, .05);
  animation: vvxChallengesOrbit 22s linear infinite
}
.vvx-challenges:after {
  content: "";
  position: absolute;
  left: -140px;
  bottom: -260px;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%
}
.vvx-challenges-wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: auto
}
.vvx-challenges-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
  animation: vvxChallengesIn .8s ease both
}
.vvx-challenges-label {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: #2e3644;
  color: #e9c77e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px
}
.vvx-challenges-heading h2 {
  margin: 20px 0 14px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: #ffffff
}
.vvx-challenges-heading h2 span {
  color: #4184f4
}
.vvx-challenges-heading p {
  margin: 0;
  color: #acb3bf;
  font-size: 16px;
  line-height: 1.7
}
.vvx-challenges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px
}
.vvx-challenges-grid article {
  position: relative;
  padding: 30px 26px 30px;
  border-radius: 14px;
  background: linear-gradient(180deg, #26334a 0%, #1c2e4a 100%);
  border: 1px solid #344460;
  overflow: hidden;
  animation: vvxChallengesCard .7s ease both;
  transition: transform .35s ease, background .35s ease, border-color .35s ease
}
.vvx-challenges-grid article::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -34px;
  width: 96px;
  height: 96px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 50%;
  box-shadow: 0 0 0 14px rgba(255, 255, 255, .03)
}
.vvx-challenges-grid article:nth-child(1) {
  animation-delay: .10s
}
.vvx-challenges-grid article:nth-child(2) {
  animation-delay: .18s
}
.vvx-challenges-grid article:nth-child(3) {
  animation-delay: .26s
}
.vvx-challenges-grid article:nth-child(4) {
  animation-delay: .34s
}
.vvx-challenges-grid article:nth-child(5) {
  animation-delay: .42s
}
.vvx-challenges-grid article:nth-child(6) {
  animation-delay: .50s
}
.vvx-challenges-grid article:hover {
  transform: translateY(-8px);
  background: #22355a;
  border-color: #d9a441
}
.vvx-challenges-num {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 12px;
  font-weight: 800;
  color: #e9c77e;
  letter-spacing: 1px;
  opacity: .95
}
.vvx-challenges-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 22px;
  border-radius: 14px;
  background: #2e3644;
  color: #e9c77e
}
.vvx-challenges-grid article:hover .vvx-challenges-icon {
  background: #d9a441;
  color: #102343
}
.vvx-challenges-grid h3 {
  margin: 0 0 10px;
  font-size: 20px;
  color: #ffffff;
  letter-spacing: -.2px
}
.vvx-challenges-grid p {
  margin: 0;
  color: #acb3bf;
  font-size: 14px;
  line-height: 1.65
}
@keyframes vvxChallengesReveal {
  from {
    opacity: 0;
    transform: scale(.98)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes vvxChallengesIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes vvxChallengesCard {
  from {
    opacity: 0;
    transform: translateY(26px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes vvxChallengesOrbit {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
@media(max-width:900px) {
  .vvx-challenges-grid {
    grid-template-columns: 1fr 1fr
  }
}
@media(max-width:560px) {
  .vvx-challenges {
    padding: 72px 18px
  }
  .vvx-challenges-grid {
    grid-template-columns: 1fr
  }
  .vvx-challenges-heading h2 {
    letter-spacing: -1px
  }
}
/* =========================================================
   CSS END — 6 Challenges Section
========================================================= */
/* =========================================================
   RECRUITMENT — 6 SOLUTIONS SECTION
   WHITE BG + BLUE | 3 LEFT / 3 RIGHT + CENTER SYMBOL
========================================================= */
.vvx-solutions {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 80px;
  background: #ffffff;
  color: #0b2b4a;
  font-family: Inter, Arial, sans-serif;
  animation: vvxSolutionsReveal .9s ease both
}
.vvx-solutions:before {
  content: "";
  position: absolute;
  right: -180px;
  top: -220px;
  width: 520px;
  height: 520px;
  border: 1px solid #e6eef8;
  border-radius: 50%;
  box-shadow: 0 0 0 40px #fff, 0 0 0 41px #e6eef8, 0 0 0 90px #fff, 0 0 0 91px #f2f7fe;
  animation: vvxSolutionsOrbit 22s linear infinite
}
.vvx-solutions-wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: auto
}
.vvx-solutions-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 60px;
  animation: vvxSolutionsIn .8s ease both
}
.vvx-solutions-label {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: #f2f7ff;
  border: 1px solid #bcd3f5;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px
}
.vvx-solutions-heading h2 {
  margin: 20px 0 14px;
  font-size: clamp(32px, 5vw, 54px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: #1e3a8a
}
.vvx-solutions-heading h2 span {
  color: #2563eb
}
.vvx-solutions-heading p {
  margin: 0;
  color: #5b7fa3;
  font-size: 16px;
  line-height: 1.7
}
/* Split layout */
.vvx-solutions-split {
  display: grid;
  grid-template-columns: 1fr 200px 1fr;
  gap: 0;
  align-items: center
}
.vvx-solutions-col {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.vvx-solutions-col article {
  display: grid;
  grid-template-columns: 36px 54px 1fr;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: #f5f9ff;
  border: 1px solid #dbe8ff;
  border-radius: 14px;
  animation: vvxSolutionsCard .7s ease both;
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease
}
.vvx-solutions-left article {
  animation-delay: .10s
}
.vvx-solutions-right article {
  animation-delay: .30s
}
.vvx-solutions-col article:hover {
  transform: translateX(6px);
  border-color: #2563eb;
  box-shadow: 0 12px 26px rgba(37, 99, 235, .12)
}
.vvx-solutions-right article:hover {
  transform: translateX(-6px)
}
.vvx-solutions-num {
  font-size: 26px;
  font-weight: 800;
  color: #c9dcff;
  letter-spacing: -1px;
  line-height: 1;
  transition: color .3s ease
}
.vvx-solutions-col article:hover .vvx-solutions-num {
  color: #2563eb
}
.vvx-solutions-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #eef4ff;
  border: 1px solid #dbe8ff;
  color: #2563eb;
  transition: background .3s ease, color .3s ease
}
.vvx-solutions-col article:hover .vvx-solutions-icon {
  background: #2563eb;
  color: #ffffff
}
.vvx-solutions-body h3 {
  margin: 0 0 5px;
  font-size: 18px;
  color: #0b2b4a;
  letter-spacing: -.2px
}
.vvx-solutions-body p {
  margin: 0;
  color: #5b7fa3;
  font-size: 13.5px;
  line-height: 1.55
}
/* Center circle */
.vvx-solutions-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  position: relative;
  z-index: 3
}
.vvx-solutions-circle {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  color: #ffffff;
  box-shadow: 0 0 0 10px #eef4ff, 0 0 0 11px #c9dcff, 0 20px 40px rgba(37, 99, 235, .30)
}
.vvx-solutions-circle svg {
  width: 46px;
  height: 46px
}
.vvx-solutions-center-text {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #2563eb;
  line-height: 1.5
}
@keyframes vvxSolutionsPulse {
  0%, 100% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.07)
  }
}
@keyframes vvxSolutionsReveal {
  from {
    opacity: 0;
    transform: scale(.98)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes vvxSolutionsIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes vvxSolutionsCard {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes vvxSolutionsOrbit {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
@media(max-width:820px) {
  .vvx-solutions {
    padding: 72px 18px
  }
  .vvx-solutions-split {
    grid-template-columns: 1fr;
    gap: 30px
  }
  .vvx-solutions-center {
    flex-direction: row;
    justify-content: center
  }
  .vvx-solutions-circle {
    width: 110px;
    height: 110px
  }
  .vvx-solutions-circle svg {
    width: 34px;
    height: 34px
  }
  .vvx-solutions-col article:hover, .vvx-solutions-right article:hover {
    transform: none
  }
  .vvx-solutions-heading h2 {
    letter-spacing: -1px
  }
}
@media(max-width:520px) {
  .vvx-solutions-col article {
    grid-template-columns: 30px 46px 1fr;
    gap: 12px;
    padding: 16px 14px
  }
  .vvx-solutions-num {
    font-size: 22px
  }
  .vvx-solutions-icon {
    width: 46px;
    height: 46px
  }
}
/* =========================================================
   CSS END — 6 Solutions Section
========================================================= */
/* =========================================================
   RECRUITMENT — OUR PROCESS SECTION
   BLUE BG + WHITE | ZIGZAG TIMELINE
========================================================= */
.vvx-process {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 90px;
  background: #102343;
  color: #ffffff;
  font-family: Inter, Arial, sans-serif;
  animation: vvxProcessReveal .9s ease both
}
.vvx-process:before {
  content: "";
  position: absolute;
  right: -160px;
  top: -200px;
  width: 480px;
  height: 480px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 50%;
  box-shadow: 0 0 0 40px rgba(255, 255, 255, .02), 0 0 0 41px rgba(255, 255, 255, .05);
  animation: vvxProcessOrbit 22s linear infinite
}
.vvx-process-wrap {
  position: relative;
  z-index: 1;
  max-width: 1140px;
  margin: auto
}
.vvx-process-heading {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 40px;
  animation: vvxProcessIn .8s ease both
}
.vvx-process-label {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 30px;
  background: #2e3644;
  color: #e9c77e;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px
}
.vvx-process-heading h2 {
  margin: 16px 0 12px;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: #ffffff
}
.vvx-process-heading h2 span {
  color: #4184f4
}
.vvx-process-heading p {
  margin: 0;
  color: #acb3bf;
  font-size: 15.5px;
  line-height: 1.7
}
/* Zigzag timeline */
.vvx-process-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px
}
.vvx-process-steps:before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 150px;
  height: 2px;
  background: linear-gradient(90deg, #4184f4 0%, #93c5fd 50%, #4184f4 100%);
  opacity: .5
}
.vvx-process-steps article {
  position: relative;
  height: 330px
}
.vvx-process-card {
  position: absolute;
  left: 0;
  right: 0;
  padding: 22px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #26334a 0%, #1c2e4a 100%);
  border: 1px solid #344460;
  text-align: center;
  animation: vvxProcessCard .7s ease both;
  transition: transform .3s ease, border-color .3s ease
}
.vvx-process-up .vvx-process-card {
  top: 0
}
.vvx-process-down .vvx-process-card {
  bottom: 0
}
.vvx-process-steps article:hover .vvx-process-card {
  transform: translateY(-6px);
  border-color: #d9a441
}
.vvx-process-down:hover .vvx-process-card {
  transform: translateY(6px)
}
.vvx-process-card:nth-of-type(1) {
  animation-delay: .08s
}
.vvx-process-icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #2563eb;
  color: #ffffff;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .35)
}
.vvx-process-steps article:hover .vvx-process-icon {
  background: #d9a441;
  color: #102343
}
.vvx-process-card h3 {
  margin: 0 0 7px;
  font-size: 18px;
  color: #ffffff;
  letter-spacing: -.2px
}
.vvx-process-card p {
  margin: 0;
  color: #acb3bf;
  font-size: 12.5px;
  line-height: 1.55
}
@keyframes vvxProcessReveal {
  from {
    opacity: 0;
    transform: scale(.98)
  }
  to {
    opacity: 1;
    transform: scale(1)
  }
}
@keyframes vvxProcessIn {
  from {
    opacity: 0;
    transform: translateY(22px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes vvxProcessCard {
  from {
    opacity: 0;
    transform: translateY(26px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@keyframes vvxProcessOrbit {
  from {
    transform: rotate(0deg)
  }
  to {
    transform: rotate(360deg)
  }
}
@media(max-width:900px) {
  .vvx-process-steps {
    grid-template-columns: 1fr 1fr;
    gap: 20px
  }
  .vvx-process-steps:before {
    display: none
  }
  .vvx-process-steps article {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 12px
  }
  .vvx-process-card, .vvx-process-up .vvx-process-card, .vvx-process-down .vvx-process-card {
    position: static
  }
}
@media(max-width:560px) {
  .vvx-process {
    padding: 60px 18px 70px
  }
  .vvx-process-steps {
    grid-template-columns: 1fr
  }
  .vvx-process-heading h2 {
    letter-spacing: -1px
  }
}
/* =========================================================
   CSS END — Our Process Section
========================================================= */
/* =========================================================
   OUR CLIENTS — LOGO SLIDER (WHITE BG + BLUE)
   scoped with vvx-client-
========================================================= */
.vvx-client-section {
  position: relative;
  overflow: hidden;
  padding: 80px 20px 80px;
  background: #ffffff;
  color: #0b2b4a;
  font-family: Inter, Arial, sans-serif
}
.vvx-client-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none
}
.vvx-client-glow.g1 {
  width: 420px;
  height: 420px;
  top: -140px;
  left: -120px;
  background: rgba(37, 99, 235, .14)
}
.vvx-client-glow.g2 {
  width: 420px;
  height: 420px;
  bottom: -140px;
  right: -120px;
  background: rgba(37, 99, 235, .12)
}
.vvx-client-wrap {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: auto
}
.vvx-client-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 46px
}
.vvx-client-tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
  border-radius: 30px;
  background: #f2f7ff;
  border: 1px solid #bcd3f5;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.6px
}
.vvx-client-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .2)
}
.vvx-client-title {
  margin: 18px 0 12px;
  font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.1;
  letter-spacing: -2px;
  color: #1e3a8a
}
.vvx-client-title span {
  color: #2563eb
}
.vvx-client-sub {
  margin: 0;
  color: #5b7fa3;
  font-size: 15.5px;
  line-height: 1.7
}
/* Slider */
.vvx-client-slider {
  position: relative;
  overflow: hidden;
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)
}
.vvx-client-track {
  display: flex;
  width: max-content;
  animation: vvxClientSlide 30s linear infinite
}
.vvx-client-slider:hover .vvx-client-track {
  animation-play-state: paused
}
.vvx-client-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 30px;
  margin: 0 10px;
  border-radius: 12px;
  background: #f7faff;
  border: 1px solid #e3edf7;
  color: #3b5b86;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .3px;
  white-space: nowrap;
  transition: color .3s ease, border-color .3s ease, transform .3s ease
}
.vvx-client-logo:hover {
  color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-3px)
}
.vvx-client-badge {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #e8f1ff;
  color: #2563eb;
  flex: 0 0 auto
}
@keyframes vvxClientSlide {
  from {
    transform: translateX(0)
  }
  to {
    transform: translateX(-50%)
  }
}
@media(max-width:560px) {
  .vvx-client-section {
    padding: 60px 18px 68px
  }
  .vvx-client-title {
    letter-spacing: -1px
  }
  .vvx-client-logo {
    font-size: 15px;
    padding: 13px 20px
  }
}
/* ========================================================= */
  

 
 
    .vvx-services {
        position: relative;
        overflow: visible;
        background: #0d1b2a;
        height: 300vh;
        font-family: Inter, Arial, sans-serif;
        animation: vvxServicesReveal .9s ease both;
    }

    @keyframes vvxServicesReveal {
        from { opacity: 0; }
        to { opacity: 1; }
    }

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

    /* ✅ FIXED: Sticky wrapper properly structured */
    .vvx-services__sticky {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* ✅ Changed from center */
        padding: 80px 20px;
    }

    .vvx-services__sticky::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(ellipse at 20% 30%, rgba(74, 144, 226, 0.08) 0%, transparent 50%),
            radial-gradient(ellipse at 80% 70%, rgba(212, 160, 23, 0.08) 0%, transparent 50%);
        pointer-events: none;
    }

    /* ✅ FIXED: Header without padding-top */
    .vvx-services__header {
        text-align: center;
        margin-bottom: 50px;
        position: relative;
        z-index: 5;
        flex-shrink: 0;
        width: 100%;
    }

    .vvx-services__tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(212, 160, 23, 0.1);
        border: 1px solid rgba(212, 160, 23, 0.3);
        color: #d4a017;
        padding: 8px 20px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 20px;
        text-transform: uppercase;
        line-height: 1;
    }

    .vvx-services__tag i {
        animation: vvxSpin 4s linear infinite;
    }

    @keyframes vvxSpin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    .vvx-services__title {
        font-size: 44px;
        color: #ffffff;
        font-weight: 800;
        letter-spacing: -1.5px;
        line-height: 1.1;
        margin: 0;
        padding: 0;
    }

    .vvx-services__title span {
        background: linear-gradient(135deg, #d4a017, #4a90e2);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    /* ✅ FIXED: Stage with proper flex */
    .vvx-services__stage {
        position: relative;
        width: 100%;
        max-width: 1300px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 0;
    }

    .vvx-services__set {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.8);
        width: 100%;
        padding: 0 20px;
        opacity: 0;
        transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .vvx-services__set.is-active {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    .vvx-services__set.is-past {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }

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

    .vvx-services__card {
        background: linear-gradient(135deg, #1b263b, #172033);
        border-radius: 20px;
        padding: 25px;
        border: 1px solid rgba(255,255,255,0.05);
        position: relative;
        overflow: hidden;
        transition: all 0.4s ease;
        min-height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .vvx-services__card:hover {
        transform: translateY(-10px);

        border-color: rgba(212, 160, 23, 0.3);
        box-shadow: 0 20px 40px rgba(212, 160, 23, 0.15);
    }

    .vvx-services__card::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -30%;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle, rgba(212, 160, 23, 0.1) 0%, transparent 70%);
        border-radius: 50%;
        transition: all 0.5s ease;
    }

    .vvx-services__card:hover::before {
        background: radial-gradient(circle, rgba(212, 160, 23, 0.2) 0%, transparent 70%);
    }

    .vvx-services__card-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
    }

    /* ✅ FIXED: Icon with proper visible display */
    .vvx-services__icon {
        width: 50px;
        height: 50px;
        background: rgba(212, 160, 23, 0.15);
        border: 1px solid rgba(212, 160, 23, 0.3);
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #d4a017;
        font-size: 20px;
        transition: all 0.4s ease;
    }

    .vvx-services__icon i {
        display: inline-block;
    }

    .vvx-services__card:hover .vvx-services__icon {
        background: #d4a017;
        color: #0d1b2a;
        transform: rotate(-10deg) scale(1.1);
    }

    .vvx-services__num {
        font-size: 50px;
        font-weight: 900;
        color: rgba(212, 160, 23, 0.2);
        line-height: 1;
    }

    .vvx-services__card-body {
        position: relative;
        z-index: 2;
    }

    .vvx-services__card-body h3 {
        font-size: 18px;
        color: #ffffff;
        font-weight: 700;
        margin: 0 0 10px 0;
        padding: 0;
        letter-spacing: -0.5px;
        line-height: 1.3;
    }

    .vvx-services__card-body p {
        color: #b0b8c1;
        font-size: 13px;
        line-height: 1.6;
        margin: 0 0 15px 0;
        padding: 0;
    }

    .vvx-services__btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #d4a017;
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: all 0.3s ease;
    }

    .vvx-services__btn:hover {
        gap: 14px;
        color: #d4a017;
    }

    /* ✅ FIXED: Progress bar properly positioned */
    .vvx-services__progress {
        margin-top: 40px;
        display: flex;
        align-items: center;
        gap: 15px;
        position: relative;
        z-index: 10;
        flex-wrap: wrap;
        justify-content: center;
        flex-shrink: 0;
        padding: 15px 25px;
        background: rgba(13, 27, 42, 0.6);
        backdrop-filter: blur(10px);
        border-radius: 30px;
        border: 1px solid rgba(255,255,255,0.05);
    }

    .vvx-services__dot {
        width: 40px;
        height: 4px;
        background: rgba(255,255,255,0.1);
        border-radius: 2px;
        transition: all 0.4s ease;
        cursor: pointer;
        border: none;
        padding: 0;
    }

    .vvx-services__dot.is-active {
        background: linear-gradient(90deg, #d4a017, #4a90e2);
        width: 60px;
    }

    .vvx-services__counter {
        color: #8a94a3;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        margin-left: 10px;
    }

    .vvx-services__counter span {
        color: #d4a017;
        font-weight: 800;
    }

    /* Tablet */
    @media (max-width: 1024px) {
        .vvx-services__title { font-size: 34px; }
        .vvx-services__grid { 
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
        }
        .vvx-services__card { min-height: 280px; padding: 20px; }
        .vvx-services__icon { width: 45px; height: 45px; font-size: 18px; }
        .vvx-services__num { font-size: 40px; }
        .vvx-services__card-body h3 { font-size: 16px; }
        .vvx-services__card-body p { font-size: 12px; }
    }

    /* Mobile */
    @media (max-width: 768px) {
        .vvx-services { 
            height: auto !important;
            padding: 0 15px;
        }
        .vvx-services__sticky {
            position: relative !important;
            height: auto !important;
            padding: 60px 0;
            overflow: visible;
        }
        .vvx-services__header { margin-bottom: 30px; }
        .vvx-services__title { font-size: 26px; }
        .vvx-services__tag { font-size: 10px; padding: 6px 16px; }
        .vvx-services__stage { 
            position: relative; 
            display: block; 
            width: 100%; 
        }
        .vvx-services__set {
            position: relative !important;
            top: auto !important;
            left: auto !important;
            transform: none !important;
            opacity: 1 !important;
            margin-bottom: 15px;
            padding: 0;
        }
        .vvx-services__set.is-past,
        .vvx-services__set.is-active {
            transform: none !important;
            opacity: 1 !important;
        }
        .vvx-services__grid { grid-template-columns: 1fr; gap: 15px; }
        .vvx-services__card { min-height: auto; padding: 25px 20px; }
        .vvx-services__card-head { margin-bottom: 20px; }
        .vvx-services__icon { width: 50px; height: 50px; font-size: 20px; }
        .vvx-services__num { font-size: 44px; }
        .vvx-services__card-body h3 { font-size: 18px; margin-bottom: 10px; }
        .vvx-services__card-body p { font-size: 13px; margin-bottom: 15px; }
        .vvx-services__btn { font-size: 12px; }
        .vvx-services__progress { display: none; }
    }

    /* Small Mobile */
    @media (max-width: 480px) {
        .vvx-services { padding: 0 12px; }
        .vvx-services__sticky { padding: 40px 0; }
        .vvx-services__title { font-size: 22px; }
        .vvx-services__tag { font-size: 9px; letter-spacing: 1.5px; padding: 6px 14px; }
        .vvx-services__card { padding: 20px 18px; border-radius: 16px; }
        .vvx-services__icon { width: 45px; height: 45px; font-size: 18px; }
        .vvx-services__num { font-size: 38px; }
        .vvx-services__card-body h3 { font-size: 16px; }
        .vvx-services__card-body p { font-size: 12px; line-height: 1.5; }
    }


 
/* ===========================================================
       INDUSTRY OVERVIEW SECTION
       Colors inlined per-class (NO :root tokens) — drops straight
       into your existing stylesheet. Palette from the design shot:
       navy #102040, accent blue #2060E0, bg #F0F0F0.
       =========================================================== */
 
.wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}
img {
	max-width: 100%;
	display: block;
}
/* ---------------- INDUSTRY OVERVIEW ---------------- */
.industry-overview {
	padding: 56px 0 64px;
	position: relative;
}
/* soft decorative blobs in the section background */
.industry-overview::before, .industry-overview::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	filter: blur(70px);
	opacity: 0.16;
	pointer-events: none;
}
.industry-overview::before {
	width: 300px;
	height: 300px;
	background: #2060E0;
	top: 20px;
	right: -110px;
}
.industry-overview::after {
	width: 280px;
	height: 280px;
	background: #102040;
	bottom: 40px;
	left: -130px;
}
.industry-overview > .wrap {
	position: relative;
	z-index: 1;
}
/* Centered header */
.section-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 44px;
}
.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2060E0;
	background: #FFFFFF;
	border: 1px solid rgba(16, 32, 64, 0.10);
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(16, 32, 64, 0.08);
}
.section-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: #2060E0;
	border-radius: 2px;
}
.section-title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.12;
	margin: 16px 0 12px;
	color: #102040;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.section-lead {
	font-size: 16.5px;
	color: #404040;
	margin: 0 auto;
}
/* Two-column overview — IMAGE LEFT, TEXT RIGHT */
.overview-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 52px;
}
/* Left: attractive image with floating badge */
.overview-media {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 22px 50px rgba(16, 32, 64, 0.18);
	transform: translateY(0);
	transition: transform .35s ease, box-shadow .35s ease;
}
.overview-media:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px rgba(16, 32, 64, 0.24);
}
.overview-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 4.4;
}
.overview-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16,32,64,0) 55%, rgba(16,32,64,0.45) 100%);
}
.media-badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 2;
	background: #FFFFFF;
	color: #102040;
	border-radius: 14px;
	padding: 14px 18px;
	box-shadow: 0 12px 30px rgba(16,32,64,0.22);
	display: flex;
	align-items: baseline;
	gap: 8px;
	animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}
.media-badge .b-num {
	font-size: 26px;
	font-weight: 800;
	color: #2060E0;
	line-height: 1;
}
.media-badge .b-label {
	font-size: 12.5px;
	font-weight: 600;
	color: #404040;
	max-width: 120px;
}
/* Right: text + capabilities */
.overview-body h3 {
	color: #102040;
	font-size: 22px;
	margin: 0 0 10px;
	font-weight: 800;
}
.overview-body > p {
	color: #202020;
	margin: 0 0 14px;
}
.feature-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}
.feature-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid rgba(16, 32, 64, 0.10);
}
.feature-list li:first-child {
	border-top: 0;
}
.feature-list .ic {
	flex: 0 0 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, #E0F0F0, #C0D0F0);
	color: #2060E0;
	transition: transform .25s ease, background .25s ease;
}
.feature-list li:hover .ic {
	transform: scale(1.1) rotate(-5deg);
}
.feature-list .ic svg {
	width: 20px;
	height: 20px;
}
.feature-list .ft-title {
	font-weight: 700;
	color: #102040;
}
.feature-list .ft-desc {
	font-size: 14.5px;
	color: #404040;
}
/* ---------- FACTS & FIGURES (integrated, light) ---------- */
.facts-figures {
	margin-top: 4px;
}
.facts-head {
	text-align: center;
	margin-bottom: 28px;
}
.facts-head .eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #2060E0;
}
.facts-head h3 {
	color: #102040;
	font-size: clamp(22px, 3vw, 30px);
	margin: 8px 0 0;
	font-weight: 800;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.stat-card {
	background: #FFFFFF;
	border: 1px solid rgba(16, 32, 64, 0.10);
	border-radius: 18px;
	padding: 26px 20px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(16, 32, 64, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(16, 32, 64, 0.14);
}
/* inner wrapper carries the up/down bob so it never clashes
       with the card's hover-lift or the scroll reveal */
.stat-inner {
	animation: bob 3.5s ease-in-out infinite;
}
.stat-num {
	font-size: clamp(32px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1;
	color: #102040;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}
.stat-num .unit {
	color: #2060E0;
	font-size: 0.6em;
	font-weight: 800;
}
.stat-label {
	margin-top: 12px;
	color: #404040;
	font-size: 14px;
	letter-spacing: 0.02em;
}
@keyframes bob {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-9px);
}
}
/* staggered so the four boxes move in a 1-2-3-4 wave */
.stat-card:nth-child(1) .stat-inner {
	animation-delay: 0s;
}
.stat-card:nth-child(2) .stat-inner {
	animation-delay: .35s;
}
.stat-card:nth-child(3) .stat-inner {
	animation-delay: .70s;
}
.stat-card:nth-child(4) .stat-inner {
	animation-delay: 1.05s;
}
/* =================== SCROLL REVEAL ANIMATION =================== */
    /* Only active when JS is on (.js is added in <head>), so content
       stays visible if JavaScript is disabled. */
.js .reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* image fades in without transform (keeps its hover transform clean) */
.js .reveal--fade {
	opacity: 0;
	transform: none;
	transition: opacity .7s ease;
}
.js .reveal--fade.is-visible {
	opacity: 1;
}
/* fact boxes fade in (stagger), the bob lives on .stat-inner */
.js .stat-card {
	opacity: 0;
}
.js .stat-card.is-visible {
	animation: fadeIn .6s ease forwards;
}
.stat-card:nth-child(1).is-visible {
	animation-delay: 0s;
}
.stat-card:nth-child(2).is-visible {
	animation-delay: .1s;
}
.stat-card:nth-child(3).is-visible {
	animation-delay: .2s;
}
.stat-card:nth-child(4).is-visible {
	animation-delay: .3s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.js .reveal, .js .reveal--fade, .js .stat-card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}
.stat-inner {
	animation: none !important;
	transform: none !important;
}
.media-badge {
	animation: none !important;
}
}

/* Responsive */
@media (max-width: 900px) {
.overview-grid {
	grid-template-columns: 1fr;
	gap: 32px;
}
.overview-media img {
	aspect-ratio: 16 / 10;
}
.stats-grid {
	grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 520px) {
.stats-grid {
	grid-template-columns: 1fr;
}
.industry-overview {
	padding: 44px 0 52px;
}
}
 


 
/* ===========================================================
       INDUSTRY OVERVIEW SECTION
       Colors inlined per-class (NO :root tokens) — drops straight
       into your existing stylesheet. Palette from the design shot:
       navy #102040, accent blue #2060E0, bg #F0F0F0.
       =========================================================== */
 
.wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}
img {
	max-width: 100%;
	display: block;
}
/* ---------------- INDUSTRY OVERVIEW ---------------- */
.industry-overview {
	padding: 56px 0 64px;
	position: relative;
}
/* soft decorative blobs in the section background */
.industry-overview::before, .industry-overview::after {
	content: "";
	position: absolute;
	border-radius: 50%;
	z-index: 0;
	filter: blur(70px);
	opacity: 0.16;
	pointer-events: none;
}
.industry-overview::before {
	width: 300px;
	height: 300px;
	background: #2060E0;
	top: 20px;
	right: -110px;
}
.industry-overview::after {
	width: 280px;
	height: 280px;
	background: #102040;
	bottom: 40px;
	left: -130px;
}
.industry-overview > .wrap {
	position: relative;
	z-index: 1;
}
/* Centered header */
.section-header {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 44px;
}
.section-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #2060E0;
	background: #FFFFFF;
	border: 1px solid rgba(16, 32, 64, 0.10);
	padding: 8px 16px;
	border-radius: 999px;
	box-shadow: 0 10px 30px rgba(16, 32, 64, 0.08);
}
.section-eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: #2060E0;
	border-radius: 2px;
}
.section-title {
	font-size: clamp(28px, 4vw, 42px);
	line-height: 1.12;
	margin: 16px 0 12px;
	color: #102040;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.section-lead {
	font-size: 16.5px;
	color: #404040;
	margin: 0 auto;
}
/* Two-column overview — IMAGE LEFT, TEXT RIGHT */
.overview-grid {
	display: grid;
	grid-template-columns: 0.95fr 1.05fr;
	gap: 40px;
	align-items: center;
	margin-bottom: 52px;
}
/* Left: attractive image with floating badge */
.overview-media {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	box-shadow: 0 22px 50px rgba(16, 32, 64, 0.18);
	transform: translateY(0);
	transition: transform .35s ease, box-shadow .35s ease;
}
.overview-media:hover {
	transform: translateY(-6px);
	box-shadow: 0 30px 60px rgba(16, 32, 64, 0.24);
}
.overview-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 4.4;
}
.overview-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(16,32,64,0) 55%, rgba(16,32,64,0.45) 100%);
}
.media-badge {
	position: absolute;
	left: 18px;
	bottom: 18px;
	z-index: 2;
	background: #FFFFFF;
	color: #102040;
	border-radius: 14px;
	padding: 14px 18px;
	box-shadow: 0 12px 30px rgba(16,32,64,0.22);
	display: flex;
	align-items: baseline;
	gap: 8px;
	animation: floaty 3.6s ease-in-out infinite;
}
@keyframes floaty {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-7px);
}
}
.media-badge .b-num {
	font-size: 26px;
	font-weight: 800;
	color: #2060E0;
	line-height: 1;
}
.media-badge .b-label {
	font-size: 12.5px;
	font-weight: 600;
	color: #404040;
	max-width: 120px;
}
/* Right: text + capabilities */
.overview-body h3 {
	color: #102040;
	font-size: 22px;
	margin: 0 0 10px;
	font-weight: 800;
}
.overview-body > p {
	color: #202020;
	margin: 0 0 14px;
}
.feature-list {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
}
.feature-list li {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: 12px 0;
	border-top: 1px solid rgba(16, 32, 64, 0.10);
}
.feature-list li:first-child {
	border-top: 0;
}
.feature-list .ic {
	flex: 0 0 40px;
	height: 40px;
	border-radius: 12px;
	display: grid;
	place-items: center;
	background: linear-gradient(160deg, #E0F0F0, #C0D0F0);
	color: #2060E0;
	transition: transform .25s ease, background .25s ease;
}
.feature-list li:hover .ic {
	transform: scale(1.1) rotate(-5deg);
}
.feature-list .ic svg {
	width: 20px;
	height: 20px;
}
.feature-list .ft-title {
	font-weight: 700;
	color: #102040;
}
.feature-list .ft-desc {
	font-size: 14.5px;
	color: #404040;
}
/* ---------- FACTS & FIGURES (integrated, light) ---------- */
.facts-figures {
	margin-top: 4px;
}
.facts-head {
	text-align: center;
	margin-bottom: 28px;
}
.facts-head .eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #2060E0;
}
.facts-head h3 {
	color: #102040;
	font-size: clamp(22px, 3vw, 30px);
	margin: 8px 0 0;
	font-weight: 800;
}
.stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.stat-card {
	background: #FFFFFF;
	border: 1px solid rgba(16, 32, 64, 0.10);
	border-radius: 18px;
	padding: 26px 20px;
	text-align: center;
	box-shadow: 0 10px 30px rgba(16, 32, 64, 0.08);
	transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(16, 32, 64, 0.14);
}
/* inner wrapper carries the up/down bob so it never clashes
       with the card's hover-lift or the scroll reveal */
.stat-inner {
	animation: bob 3.5s ease-in-out infinite;
}
.stat-num {
	font-size: clamp(32px, 3.6vw, 44px);
	font-weight: 800;
	line-height: 1;
	color: #102040;
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}
.stat-num .unit {
	color: #2060E0;
	font-size: 0.6em;
	font-weight: 800;
}
.stat-label {
	margin-top: 12px;
	color: #404040;
	font-size: 14px;
	letter-spacing: 0.02em;
}
@keyframes bob {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-9px);
}
}
/* staggered so the four boxes move in a 1-2-3-4 wave */
.stat-card:nth-child(1) .stat-inner {
	animation-delay: 0s;
}
.stat-card:nth-child(2) .stat-inner {
	animation-delay: .35s;
}
.stat-card:nth-child(3) .stat-inner {
	animation-delay: .70s;
}
.stat-card:nth-child(4) .stat-inner {
	animation-delay: 1.05s;
}
/* =================== SCROLL REVEAL ANIMATION =================== */
    /* Only active when JS is on (.js is added in <head>), so content
       stays visible if JavaScript is disabled. */
.js .reveal {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js .reveal.is-visible {
	opacity: 1;
	transform: none;
}
/* image fades in without transform (keeps its hover transform clean) */
.js .reveal--fade {
	opacity: 0;
	transform: none;
	transition: opacity .7s ease;
}
.js .reveal--fade.is-visible {
	opacity: 1;
}
/* fact boxes fade in (stagger), the bob lives on .stat-inner */
.js .stat-card {
	opacity: 0;
}
.js .stat-card.is-visible {
	animation: fadeIn .6s ease forwards;
}
.stat-card:nth-child(1).is-visible {
	animation-delay: 0s;
}
.stat-card:nth-child(2).is-visible {
	animation-delay: .1s;
}
.stat-card:nth-child(3).is-visible {
	animation-delay: .2s;
}
.stat-card:nth-child(4).is-visible {
	animation-delay: .3s;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.js .reveal, .js .reveal--fade, .js .stat-card {
	opacity: 1 !important;
	transform: none !important;
	animation: none !important;
	transition: none !important;
}
.stat-inner {
	animation: none !important;
	transform: none !important;
}
.media-badge {
	animation: none !important;
}
}

/* Responsive */
@media (max-width: 900px) {
.overview-grid {
	grid-template-columns: 1fr;
	gap: 32px;
}
.overview-media img {
	aspect-ratio: 16 / 10;
}
.stats-grid {
	grid-template-columns: repeat(2, 1fr);
}
}

@media (max-width: 520px) {
.stats-grid {
	grid-template-columns: 1fr;
}
.industry-overview {
	padding: 44px 0 52px;
}
}
 
 
    /* ===========================================================
       WHO WE ARE SECTION  (SEPARATE / STANDALONE — REDESIGNED)
       New concept: PHOTO COLLAGE / MOSAIC
         • one real industrial photo tile
         • two branded navy panels (icon + label)
         • one wide statement tile
       Navy gradient bg + #4090F0 accent (from screenshot).
       Colors inlined per-class (NO :root tokens).
       =========================================================== */
 
    .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
    img { max-width: 100%; display: block; }

    /* ---------------- WHO WE ARE ---------------- */
    .who-we-are {
      background: linear-gradient(135deg, #002040 0%, #003050 55%, #002238 100%);
      padding: 80px 0;
      position: relative;
      overflow: hidden;
    }
    .who-we-are > .wrap { position: relative; z-index: 1; }
    .who-we-are::after {
      content: ""; position: absolute; right: -120px; bottom: -120px;
      width: 380px; height: 380px; border-radius: 50%;
      background: radial-gradient(circle, rgba(64,144,240,0.16), transparent 70%);
      pointer-events: none;
    }

    .who-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
    .who-eyebrow {
      display: inline-flex; align-items: center; gap: 10px;
      font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: #4090F0;
    }
    .who-eyebrow::before { content: ""; width: 22px; height: 2px; background: #4090F0; border-radius: 2px; }
    .who-title {
      font-size: clamp(28px, 4vw, 44px);
      line-height: 1.1; margin: 16px 0 12px;
      color: #FFFFFF; font-weight: 800; letter-spacing: -0.01em;
    }
    .who-lead { font-size: 17px; color: rgba(255, 255, 255, 0.80); margin: 0; }

    /* mosaic collage */
    .who-collage {
      display: grid;
      grid-template-columns: 1.3fr 1fr 1fr;
      grid-template-rows: 200px 200px;
      gap: 18px;
    }
    .tile { border-radius: 20px; overflow: hidden; }

    .t-photo { grid-column: 1; grid-row: 1 / span 2; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
    .t-photo img { width: 100%; height: 100%; object-fit: cover; }

    .t-panel {
      background: rgba(255, 255, 255, 0.06);
      border: 1px solid rgba(255, 255, 255, 0.12);
      padding: 22px 24px;
      display: flex; flex-direction: column; justify-content: center;
      transition: transform .25s ease, background .25s ease;
    }
    .t-panel:hover { transform: translateY(-5px); background: rgba(255, 255, 255, 0.10); }
    .t-panel .ic {
      width: 44px; height: 44px; border-radius: 12px;
      display: grid; place-items: center; margin-bottom: 12px;
      background: rgba(64, 144, 240, 0.18); color: #4090F0;
      transition: transform .25s ease;
    }
    .t-panel:hover .ic { transform: scale(1.08) rotate(-5deg); }
    .t-panel .ic svg { width: 22px; height: 22px; }
    .t-panel h3 { color: #FFFFFF; font-size: 17px; margin: 0 0 4px; font-weight: 700; }
    .t-panel p { color: rgba(255, 255, 255, 0.72); font-size: 14px; margin: 0; }

    .t-statement {
      grid-column: 2 / span 2; grid-row: 2;
      background: linear-gradient(135deg, rgba(64,144,240,0.20), rgba(64,144,240,0.06));
      border: 1px solid rgba(64, 144, 240, 0.30);
      border-radius: 20px; padding: 22px 26px;
      display: flex; align-items: center;
    }
    .t-statement p {
      margin: 0; font-size: clamp(16px, 2vw, 20px); font-weight: 700;
      color: #FFFFFF; line-height: 1.3;
    }
    .t-statement .hl { color: #4090F0; }

    /* =================== SCROLL REVEAL =================== */
    .js .reveal {
      opacity: 0; transform: translateY(30px);
      transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
    }
    .js .reveal.is-visible { opacity: 1; transform: none; }
    .js .reveal--fade { opacity: 0; transform: none; transition: opacity .7s ease; }
    .js .reveal--fade.is-visible { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .js .reveal, .js .reveal--fade {
        opacity: 1 !important; transform: none !important;
        animation: none !important; transition: none !important;
      }
    }

    @media (max-width: 820px) {
      .who-collage {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 200px 200px 160px;
      }
      .t-photo { grid-column: 1 / span 2; grid-row: 1; }
      .t-statement { grid-column: 1 / span 2; grid-row: 3; }
    }
    @media (max-width: 520px) {
      .who-we-are { padding: 56px 0; }
      .who-collage { grid-template-columns: 1fr; grid-template-rows: none; gap: 14px; }
      .t-photo, .t-panel, .t-statement { grid-column: auto; grid-row: auto; min-height: 150px; }
    }
 

 
    .ch-section{
      --navy:#13294b;
      --blue:#2563eb;
      --blue-soft:#e8f1fe;
      --gray:#64748b;
      --line:#e6ecf4;
      --card:#ffffff;
      font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
      background:
        radial-gradient(1200px 500px at 85% -10%, #eaf2fc 0%, rgba(234,242,252,0) 60%),
        linear-gradient(180deg,#eef4fb 0%, #f7fafd 45%, #ffffff 100%);
      color:var(--navy);
      padding:80px 24px;
      overflow:hidden;
    }
    .ch-wrap{max-width:1120px;margin:0 auto;}

    .ch-head{
      text-align:center;max-width:760px;margin:0 auto 56px;
      opacity:0;transform:translateY(30px);transition:all .8s ease-out;
    }
    .ch-head.reveal{opacity:1;transform:translateY(0);}
    .ch-badge{
      display:inline-flex;align-items:center;gap:10px;
      background:var(--blue-soft);color:var(--blue);
      font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
      padding:8px 16px;border-radius:999px;
    }
    .ch-badge::before{content:"";width:18px;height:2px;background:var(--blue);border-radius:2px;}
    .ch-title{font-size:40px;line-height:1.15;font-weight:800;margin:22px 0 18px;letter-spacing:-.02em;}
    .ch-sub{font-size:16px;line-height:1.7;color:var(--gray);margin:0 auto;max-width:640px;}

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

    /* ===== CARD + HIGHLIGHT ===== */
    .ch-card{
      position:relative;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:18px;
      padding:28px 26px;
      box-shadow:0 10px 30px rgba(19,41,75,.06);
      opacity:0;
      transform:translateY(40px);
      transition:transform .4s cubic-bezier(.165,.84,.44,1), box-shadow .4s ease, border-color .4s ease;
      overflow:hidden;
      z-index:1;
    }
    .ch-card.reveal{opacity:1;transform:translateY(0);}

    /* glowing border sweep */
    .ch-card::before{
      content:"";
      position:absolute;inset:0;
      border-radius:18px;
      padding:1.5px;
      background:linear-gradient(120deg, transparent 30%, rgba(37,99,235,.55), transparent 70%);
      background-size:250% 250%;
      -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite:xor;
      mask-composite:exclude;
      animation:borderSweep 4.5s linear infinite;
      opacity:.55;
      pointer-events:none;
      transition:opacity .35s ease;
    }

    /* shine light across card */
    .ch-card::after{
      content:"";
      position:absolute;top:0;left:-90%;
      width:55%;height:100%;
      background:linear-gradient(100deg, transparent, rgba(37,99,235,.10), transparent);
      transform:skewX(-22deg);
      animation:shineMove 5.5s ease-in-out infinite;
      pointer-events:none;
    }

    /* HIGHLIGHT state (auto tour + hover) */
    .ch-card:hover,
    .ch-card.is-highlight{
      transform:translateY(-10px) scale(1.025);
      border-color:rgba(37,99,235,.5);
      box-shadow:
        0 0 0 1px rgba(37,99,235,.12),
        0 20px 44px rgba(37,99,235,.18),
        0 0 50px rgba(37,99,235,.12);
      z-index:2;
    }
    .ch-card:hover::before,
    .ch-card.is-highlight::before{
      opacity:1;
      animation-duration:1.6s;
      background:linear-gradient(120deg, rgba(37,99,235,.05), rgba(37,99,235,.85), rgba(37,99,235,.05));
      background-size:250% 250%;
    }
    .ch-card:hover::after,
    .ch-card.is-highlight::after{
      animation-duration:1.5s;
      background:linear-gradient(100deg, transparent, rgba(37,99,235,.18), transparent);
    }

    @keyframes borderSweep{
      0%{background-position:0% 50%;}
      100%{background-position:250% 50%;}
    }
    @keyframes shineMove{
      0%{left:-90%;}
      45%,100%{left:150%;}
    }

    .ch-ico{
      width:46px;height:46px;border-radius:12px;background:var(--blue-soft);
      display:flex;align-items:center;justify-content:center;color:var(--blue);margin-bottom:18px;
      transition:all .35s ease;
    }
    .ch-card:hover .ch-ico,
    .ch-card.is-highlight .ch-ico{
      background:var(--blue);color:#fff;
      transform:scale(1.12) rotate(6deg);
      box-shadow:0 10px 22px rgba(37,99,235,.35);
    }
    .ch-ico svg{width:24px;height:24px;}
    .ch-card h3{font-size:18px;font-weight:700;margin:0 0 10px;color:var(--navy);}
    .ch-card p{font-size:14.5px;line-height:1.65;color:var(--gray);margin:0;}
    .ch-tag{
      display:inline-block;margin-top:16px;font-size:12px;font-weight:700;color:var(--blue);
      background:var(--blue-soft);padding:5px 12px;border-radius:999px;
      transition:all .3s ease;
    }
    .ch-card:hover .ch-tag,
    .ch-card.is-highlight .ch-tag{
      background:var(--blue);color:#fff;
    }

    /* stats */
    .ch-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px;}
    .ch-stat{
      background:var(--card);border:1px solid var(--line);border-radius:16px;
      text-align:center;padding:26px 16px;box-shadow:0 8px 24px rgba(19,41,75,.05);
      opacity:0;transform:translateY(20px);transition:all .6s ease-out;
    }
    .ch-stat.reveal{opacity:1;transform:translateY(0);}
    .ch-num{font-size:34px;font-weight:800;color:var(--navy);letter-spacing:-.02em;}
    .ch-num span{color:var(--blue);font-size:22px;font-weight:800;}
    .ch-stat p{font-size:13px;color:var(--gray);margin:8px 0 0;line-height:1.5;}

    @media(max-width:900px){
      .ch-grid{grid-template-columns:repeat(2,1fr);}
      .ch-stats{grid-template-columns:repeat(2,1fr);}
      .ch-title{font-size:32px;}
    }
    @media(max-width:560px){
      .ch-grid{grid-template-columns:1fr;}
      .ch-stats{grid-template-columns:1fr 1fr;}
      .ch-title{font-size:27px;}
    }
 
 
    /* Scoped Box-Sizing */
    .ind-solutions-section,
    .ind-solutions-section * {
      box-sizing: border-box;
    }

    /* Main Container with Relative Positioning for Ambient Lights */
    .ind-solutions-section {
      font-family: 'Inter', sans-serif;
      background-color: #02182B;
      color: #ffffff;
      padding: 80px 20px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Ambient Background Glow Effect */
    .ind-solutions-section .bg-glow-orb {
      position: absolute;
      width: 500px;
      height: 500px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(2, 24, 43, 0) 70%);
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGlow 10s ease-in-out infinite alternate;
    }

    .ind-solutions-section .glow-top-left {
      top: -100px;
      left: -100px;
    }

    .ind-solutions-section .glow-bottom-right {
      bottom: -100px;
      right: -100px;
      animation-delay: -5s;
    }

    .ind-solutions-section .container {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Header Area with Fade-In Animation */
    .ind-solutions-section .header-area {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 56px auto;
      animation: fadeInUp 0.8s ease-out forwards;
    }

    .ind-solutions-section .subtitle-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .ind-solutions-section .sub-line {
      width: 20px;
      height: 2px;
      background-color: #3B82F6;
      box-shadow: 0 0 8px #3B82F6;
    }

    .ind-solutions-section .subtitle {
      color: #3B82F6;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .ind-solutions-section .main-title {
      font-size: 42px;
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 16px 0;
      letter-spacing: -0.5px;
      line-height: 1.2;
    }

    .ind-solutions-section .description {
      color: #A0AEC0;
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
    }

    /* Solutions 2x2 Grid */
    .ind-solutions-section .solutions-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-bottom: 32px;
    }

    /* Individual Solution Card with Glassmorphism & Hover Animations */
    .ind-solutions-section .solution-card {
      background: rgba(7, 37, 63, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 20px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      overflow: hidden;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out forwards;
      transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* Animation Delays for Sequential Entrance */
    .ind-solutions-section .card-1 { animation-delay: 0.2s; }
    .ind-solutions-section .card-2 { animation-delay: 0.3s; }
    .ind-solutions-section .card-3 { animation-delay: 0.4s; }
    .ind-solutions-section .card-4 { animation-delay: 0.5s; }

    /* Card Hover States */
    .ind-solutions-section .solution-card:hover {
      transform: translateY(-8px);
      border-color: rgba(59, 130, 246, 0.5);
      background: rgba(7, 37, 63, 0.95);
      box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(59, 130, 246, 0.15);
    }

    /* Top Subtle Glow Line on Hover */
    .ind-solutions-section .solution-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent, #3B82F6, transparent);
      opacity: 0;
      transition: opacity 0.4s ease;
    }

    .ind-solutions-section .solution-card:hover::before {
      opacity: 1;
    }

    .ind-solutions-section .card-top {
      margin-bottom: 20px;
    }

    /* Animated Icon Box */
    .ind-solutions-section .icon-box {
      width: 50px;
      height: 50px;
      border-radius: 12px;
      background-color: #0E3558;
      border: 1px solid rgba(59, 130, 246, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #3B82F6;
      margin-bottom: 22px;
      transition: all 0.4s ease;
    }

    .ind-solutions-section .solution-card:hover .icon-box {
      background-color: #3B82F6;
      color: #ffffff;
      transform: scale(1.1) rotate(6deg);
      box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
    }

    .ind-solutions-section .icon-box svg {
      width: 24px;
      height: 24px;
      transition: transform 0.4s ease;
    }

    .ind-solutions-section .card-title {
      font-size: 20px;
      font-weight: 700;
      color: #ffffff;
      margin: 0 0 10px 0;
      transition: color 0.3s ease;
    }

    .ind-solutions-section .card-text {
      color: #A0AEC0;
      font-size: 14px;
      line-height: 1.6;
      margin: 0;
    }

    /* Card List Items Animation */
    .ind-solutions-section .solution-list {
      list-style: none;
      padding: 0;
      margin: 20px 0 0 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
      border-top: 1px solid rgba(255, 255, 255, 0.06);
      padding-top: 16px;
    }

    .ind-solutions-section .list-item {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: #D1D5DB;
      transition: transform 0.3s ease;
    }

    .ind-solutions-section .solution-card:hover .list-item {
      transform: translateX(4px);
    }

    .ind-solutions-section .check-icon {
      color: #3B82F6;
      flex-shrink: 0;
      font-weight: bold;
    }

    /* Bottom Highlight Banner with Pulse Border */
    .ind-solutions-section .banner-card {
      background: linear-gradient(135deg, #07253F 0%, #0C385E 100%);
      border: 1px solid rgba(59, 130, 246, 0.3);
      border-radius: 20px;
      padding: 32px;
      text-align: center;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out 0.6s forwards;
      transition: all 0.3s ease;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .ind-solutions-section .banner-card:hover {
      border-color: rgba(59, 130, 246, 0.7);
      box-shadow: 0 15px 35px rgba(59, 130, 246, 0.2);
    }

    .ind-solutions-section .banner-text {
      font-size: 22px;
      font-weight: 700;
      color: #ffffff;
      line-height: 1.4;
      margin: 0;
    }

    .ind-solutions-section .text-blue {
      color: #3B82F6;
    }

    /* Keyframe Animations */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes floatGlow {
      0% {
        transform: translate(0, 0) scale(1);
      }
      100% {
        transform: translate(40px, 30px) scale(1.1);
      }
    }

    /* Responsive (Mobile/Tablet) */
    @media (max-width: 991px) {
      .ind-solutions-section .solutions-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .ind-solutions-section .main-title {
        font-size: 32px;
      }
      .ind-solutions-section .banner-text {
        font-size: 18px;
      }
      .ind-solutions-section {
        padding: 60px 16px;
      }
    }
 

 
    /* Scoped Box-Sizing for Process Section */
    .ind-process-section,
    .ind-process-section * {
      box-sizing: border-box;
    }

    /* Main Section Container */
    .ind-process-section {
      font-family: 'Inter', sans-serif;
      background-color: #f4f6f9;
      color: #0f172a;
      padding: 90px 20px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Ambient Soft Blue Moving Corner Glows */
    .ind-process-section .bg-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGlow 10s ease-in-out infinite alternate;
    }

    .ind-process-section .glow-top-right {
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.8) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-process-section .glow-bottom-left {
      bottom: -150px;
      left: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.6) 0%, rgba(244, 246, 249, 0) 70%);
      animation-delay: -5s;
    }

    .ind-process-section .container {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Top Header Area Animation */
    .ind-process-section .header-area {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 50px auto;
      animation: fadeInUp 0.8s ease-out forwards;
    }

    .ind-process-section .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      padding: 6px 18px;
      border-radius: 30px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
      transition: transform 0.3s ease;
    }

    .ind-process-section .pill-badge:hover {
      transform: translateY(-2px);
    }

    .ind-process-section .pill-line {
      width: 14px;
      height: 2px;
      background-color: #2563eb;
      box-shadow: 0 0 6px #2563eb;
    }

    .ind-process-section .main-title {
      font-size: 44px;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 16px 0;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }

    .ind-process-section .description {
      color: #64748b;
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
    }

    /* Middle Content Grid */
    .ind-process-section .content-grid {
      display: grid;
      grid-template-columns: 5fr 7fr;
      gap: 48px;
      align-items: center;
      margin-bottom: 50px;
    }

    /* Left Side Image Container with Gloss/Shine Animation */
    .ind-process-section .image-wrapper {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.15);
      min-height: 440px;
      animation: fadeInUp 0.8s ease-out 0.2s forwards;
      opacity: 0;
    }

    .ind-process-section .image-wrapper img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    }

    .ind-process-section .image-wrapper:hover img {
      transform: scale(1.06);
    }

    /* Gloss Pass Line Effect on Hover */
    .ind-process-section .image-wrapper::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -60%;
      width: 50%;
      height: 200%;
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0) 100%
      );
      transform: rotate(30deg);
      transition: all 0.8s ease;
      pointer-events: none;
    }

    .ind-process-section .image-wrapper:hover::after {
      left: 130%;
    }

    /* Levitating Floating White Badge on Image */
    .ind-process-section .floating-badge {
      position: absolute;
      bottom: 24px;
      left: 24px;
      background: #ffffff;
      padding: 14px 20px;
      border-radius: 14px;
      box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
      display: flex;
      align-items: center;
      gap: 12px;
      animation: levitate 4s ease-in-out infinite;
      z-index: 2;
    }

    .ind-process-section .floating-badge .big-num {
      font-size: 26px;
      font-weight: 800;
      color: #2563eb;
      line-height: 1;
    }

    .ind-process-section .floating-badge .badge-text {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      line-height: 1.35;
      max-width: 130px;
    }

    /* Right Column Process Steps */
    .ind-process-section .process-column {
      display: flex;
      flex-direction: column;
      animation: fadeInUp 0.8s ease-out 0.3s forwards;
      opacity: 0;
    }

    .ind-process-section .process-title {
      font-size: 24px;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 12px 0;
      letter-spacing: -0.4px;
    }

    .ind-process-section .process-desc {
      color: #64748b;
      font-size: 14px;
      line-height: 1.6;
      margin: 0 0 24px 0;
    }

    /* Process Step List */
    .ind-process-section .process-list {
      display: flex;
      flex-direction: column;
    }

    .ind-process-section .process-item {
      display: flex;
      gap: 18px;
      align-items: flex-start;
      padding: 18px 0;
      border-top: 1px solid #e2e8f0;
      transition: all 0.3s ease;
      cursor: pointer;
    }

    .ind-process-section .process-item:hover {
      transform: translateX(8px);
    }

    /* Step Number Square with Pulsing Glow on Hover */
    .ind-process-section .icon-sq {
      width: 44px;
      height: 44px;
      border-radius: 12px;
      background: #eff6ff;
      border: 1px solid #dbeafe;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #2563eb;
      font-weight: 800;
      font-size: 14px;
      flex-shrink: 0;
      transition: all 0.3s ease;
    }

    .ind-process-section .process-item:hover .icon-sq {
      background: #2563eb;
      color: #ffffff;
      border-color: #2563eb;
      box-shadow: 0 0 15px rgba(37, 99, 235, 0.4);
      transform: scale(1.08);
    }

    .ind-process-section .item-head {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 4px 0;
      transition: color 0.3s ease;
    }

    .ind-process-section .process-item:hover .item-head {
      color: #2563eb;
    }

    .ind-process-section .item-sub {
      font-size: 13px;
      color: #64748b;
      margin: 0;
      line-height: 1.45;
    }

    /* Bottom 4 Process Step Cards Row */
    .ind-process-section .steps-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }

    .ind-process-section .step-card {
      background: #ffffff;
      border-radius: 16px;
      padding: 24px 20px;
      text-align: left;
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
      border: 1px solid #f1f5f9;
      position: relative;
      overflow: hidden;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out forwards;
      transition: all 0.3s ease;
    }

    .ind-process-section .step-card-1 { animation-delay: 0.4s; }
    .ind-process-section .step-card-2 { animation-delay: 0.5s; }
    .ind-process-section .step-card-3 { animation-delay: 0.6s; }
    .ind-process-section .step-card-4 { animation-delay: 0.7s; }

    /* Top Glowing Blue Bar on Hover */
    .ind-process-section .step-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: #2563eb;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: scaleX(0);
    }

    .ind-process-section .step-card:hover {
      transform: translateY(-6px);
      box-shadow: 0 15px 30px rgba(37, 99, 235, 0.12);
      border-color: #dbeafe;
    }

    .ind-process-section .step-card:hover::before {
      opacity: 1;
      transform: scaleX(1);
    }

    .ind-process-section .step-num {
      font-size: 12px;
      font-weight: 800;
      color: #2563eb;
      letter-spacing: 1px;
      margin-bottom: 8px;
      display: block;
    }

    .ind-process-section .step-title {
      font-size: 16px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 6px 0;
    }

    .ind-process-section .step-lbl {
      font-size: 12px;
      color: #64748b;
      margin: 0;
      line-height: 1.4;
    }

    /* KEYFRAME ANIMATIONS */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes levitate {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-8px);
      }
    }

    @keyframes floatGlow {
      0% {
        transform: translate(0, 0) scale(1);
      }
      100% {
        transform: translate(40px, 30px) scale(1.1);
      }
    }

    /* Responsive Breakdown */
    @media (max-width: 991px) {
      .ind-process-section .content-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .ind-process-section .image-wrapper {
        min-height: 320px;
      }
      .ind-process-section .image-wrapper img {
        position: relative;
        height: 320px;
      }
      .ind-process-section .steps-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 600px) {
      .ind-process-section .main-title {
        font-size: 32px;
      }
      .ind-process-section .steps-grid {
        grid-template-columns: 1fr;
      }
      .ind-process-section {
        padding: 60px 16px;
      }
    }


 
    /* ========================================================= */
    /* ================= START: CLIENT VIDEOS CSS ============== */
    /* ========================================================= */
    
    /* Scoped Box-Sizing for Client Videos Section */
    .ind-video-section,
    .ind-video-section * {
      box-sizing: border-box;
    }

    /* Main Section Container (White Theme) */
    .ind-video-section {
      font-family: 'Inter', sans-serif;
      background-color: #f4f6f9;
      color: #0f172a;
      padding: 90px 20px;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
    }

    /* Ambient Soft Blue Moving Corner Glows */
    .ind-video-section .bg-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
      animation: floatGlow 10s ease-in-out infinite alternate;
    }

    .ind-video-section .glow-top-left {
      top: -150px;
      left: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.8) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-video-section .glow-bottom-right {
      bottom: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.6) 0%, rgba(244, 246, 249, 0) 70%);
      animation-delay: -5s;
    }

    .ind-video-section .container {
      
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Top Header Area */
    .ind-video-section .header-area {
      text-align: center;
      max-width: 780px;
      margin: 0 auto 56px auto;
      animation: fadeInUp 0.8s ease-out forwards;
    }

    .ind-video-section .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      padding: 6px 18px;
      border-radius: 30px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08);
      transition: transform 0.3s ease;
    }

    .ind-video-section .pill-badge:hover {
      transform: translateY(-2px);
    }

    .ind-video-section .pill-line {
      width: 14px;
      height: 2px;
      background-color: #2563eb;
      box-shadow: 0 0 6px #2563eb;
    }

    .ind-video-section .main-title {
      font-size: 44px;
      font-weight: 800;
      color: #0f172a;
      margin: 0 0 16px 0;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }

    .ind-video-section .description {
      color: #64748b;
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
    }

    /* 3 Video Cards Grid Layout */
    .ind-video-section .video-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px;
    }

    /* Individual Video Card */
    .ind-video-section .video-card {
      background: #ffffff;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
      border: 1px solid #e2e8f0;
      display: flex;
      flex-direction: column;
      position: relative;
      opacity: 0;
      animation: fadeInUp 0.8s ease-out forwards;
      transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .ind-video-section .card-1 { animation-delay: 0.2s; }
    .ind-video-section .card-2 { animation-delay: 0.4s; }
    .ind-video-section .card-3 { animation-delay: 0.6s; }

    /* Top Glowing Blue Border Effect on Hover */
    .ind-video-section .video-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: #2563eb;
      opacity: 0;
      transition: opacity 0.3s ease, transform 0.3s ease;
      transform: scaleX(0);
      z-index: 3;
    }

    .ind-video-section .video-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 35px rgba(37, 99, 235, 0.12);
      border-color: #dbeafe;
    }

    .ind-video-section .video-card:hover::before {
      opacity: 1;
      transform: scaleX(1);
    }

    /* Responsive 16:9 Video Container */
    .ind-video-section .iframe-wrapper {
      position: relative;
      padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
      height: 0;
      overflow: hidden;
      background-color: #0f172a;
    }

    .ind-video-section .iframe-wrapper iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    /* Video Info Body */
    .ind-video-section .card-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .ind-video-section .client-tag {
      display: inline-block;
      font-size: 11px;
      font-weight: 800;
      color: #2563eb;
      background: #eff6ff;
      padding: 4px 10px;
      border-radius: 6px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 12px;
      width: fit-content;
    }

    .ind-video-section .client-quote {
      font-size: 15px;
      font-weight: 700;
      color: #0f172a;
      line-height: 1.45;
      margin: 0 0 16px 0;
    }

    .ind-video-section .client-meta {
      margin-top: auto;
      padding-top: 14px;
      border-top: 1px solid #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .ind-video-section .client-name {
      font-size: 14px;
      font-weight: 700;
      color: #0f172a;
      margin: 0;
    }

    .ind-video-section .client-role {
      font-size: 12px;
      color: #64748b;
      margin: 0;
    }

    .ind-video-section .play-icon-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #eff6ff;
      color: #2563eb;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease, color 0.3s ease;
    }

    .ind-video-section .video-card:hover .play-icon-badge {
      background: #2563eb;
      color: #ffffff;
    }

    /* Keyframe Animations */
    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes floatGlow {
      0% { transform: translate(0, 0) scale(1); }
      100% { transform: translate(40px, 30px) scale(1.1); }
    }

    /* Responsive Breakdown */
    @media (max-width: 991px) {
      .ind-video-section .video-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
    }

    @media (max-width: 600px) {
      .ind-video-section .main-title {
        font-size: 32px;
      }
      .ind-video-section {
        padding: 60px 16px;
      }
    }

    /* ========================================================= */
    /* ================== END: CLIENT VIDEOS CSS =============== */
    /* ========================================================= */
 
 
   /* ========================================================= */
    /* ================= START: CLIENTS CSS ==================== */
    /* ========================================================= */

    .ind-clients-section,
    .ind-clients-section * {
      box-sizing: border-box;
    }

    .ind-clients-section {
      font-family: 'Inter', sans-serif;
      background-color: #02182B;
      color: #ffffff;
      padding: 90px 20px;
      position: relative;
      overflow: hidden;
    }

    .ind-clients-section .bg-glow {
      position: absolute;
      width: 520px;
      height: 520px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }

    .ind-clients-section .glow-top-left {
      top: -160px;
      left: -120px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.16) 0%, rgba(2, 24, 43, 0) 70%);
    }

    .ind-clients-section .glow-bottom-right {
      bottom: -160px;
      right: -120px;
      background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, rgba(2, 24, 43, 0) 70%);
    }

    .ind-clients-section .container {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .ind-clients-section .header-area {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 48px auto;
    }

    .ind-clients-section .subtitle-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .ind-clients-section .sub-line {
      width: 20px;
      height: 2px;
      background-color: #3B82F6;
    }

    .ind-clients-section .subtitle {
      color: #3B82F6;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .ind-clients-section .main-title {
      font-size: 42px;
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 16px 0;
      letter-spacing: -0.5px;
      line-height: 1.2;
    }

    .ind-clients-section .description {
      color: #A0AEC0;
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
    }

    .ind-clients-section .gallery-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 16px;
    }

    .ind-clients-section .gallery-item {
      position: relative;
      display: block;
      height: 220px;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.08);
      background: #07253F;
      text-decoration: none;
    }

    .ind-clients-section .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }

    .ind-clients-section .gallery-item:hover img {
      transform: scale(1.1);
    }

    .ind-clients-section .gallery-overlay {
      position: absolute;
      inset: 0;
      background: rgba(2, 24, 43, 0.45);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .ind-clients-section .gallery-item:hover .gallery-overlay {
      opacity: 1;
    }

    .ind-clients-section .zoom-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      background: #3B82F6;
      color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: scale(0.7);
      opacity: 0;
      transition: all 0.3s ease;
      box-shadow: 0 8px 20px rgba(59, 130, 246, 0.45);
    }

    .ind-clients-section .gallery-item:hover .zoom-btn {
      transform: scale(1);
      opacity: 1;
    }

    .ind-clients-section .zoom-btn svg {
      width: 22px;
      height: 22px;
    }

    .ind-clients-section .client-zoom {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      padding: 20px;
    }

    .ind-clients-section .client-zoom:target {
      display: flex;
    }

    .ind-clients-section .zoom-bg {
      position: absolute;
      inset: 0;
      background: rgba(2, 24, 43, 0.92);
    }

    .ind-clients-section .client-zoom img {
      position: relative;
      z-index: 2;
      max-width: 90%;
      max-height: 85vh;
      border-radius: 16px;
      object-fit: contain;
      border: 1px solid rgba(59, 130, 246, 0.3);
    }

    .ind-clients-section .zoom-close {
      position: absolute;
      top: 24px;
      right: 28px;
      z-index: 3;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: #07253F;
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22px;
      line-height: 1;
    }

    @media (max-width: 991px) {
      .ind-clients-section .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 600px) {
      .ind-clients-section {
        padding: 60px 16px;
      }

      .ind-clients-section .main-title {
        font-size: 32px;
      }

      .ind-clients-section .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .ind-clients-section .gallery-item {
        height: 170px;
      }
    }

    /* ========================================================= */
    /* ================== END: CLIENTS CSS ===================== */
    /* ========================================================= */
 
 
    /* ========================================================= */
    /* ============== START: REVIEW VIDEOS CSS ================= */
    /* ========================================================= */

    .ind-reviews-section,
    .ind-reviews-section * {
      box-sizing: border-box;
    }

    .ind-reviews-section {
      font-family: 'Inter', sans-serif;
      background-color: #f4f6f9;
      color: #0f172a;
      padding: 80px 20px;
      position: relative;
      overflow: hidden;
    }

    .ind-reviews-section .bg-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }

    .ind-reviews-section .glow-top-right {
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.85) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-reviews-section .glow-bottom-left {
      bottom: -150px;
      left: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.6) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-reviews-section .container {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    .ind-reviews-section .header-area {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 48px auto;
    }

    .ind-reviews-section .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      padding: 6px 18px;
      border-radius: 30px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.05);
    }

    .ind-reviews-section .pill-line {
      width: 14px;
      height: 2px;
      background-color: #2563eb;
    }

    .ind-reviews-section .main-title {
      font-size: 44px;
      font-weight: 800;
      color: #2563eb;
      margin: 0 0 16px 0;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }

    .ind-reviews-section .description {
      color: #64748b;
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
    }

    .ind-reviews-section .reels-row {
      display: flex;
      justify-content: center;
      gap: 22px;
      flex-wrap: wrap;
    }

    .ind-reviews-section .reel-card {
      width: 250px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .ind-reviews-section .reel-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 18px 40px rgba(37, 99, 235, 0.14);
    }

    .ind-reviews-section .reel-frame {
      position: relative;
      width: 100%;
      aspect-ratio: 9 / 16;
      background: #0f172a;
      overflow: hidden;
    }

    .ind-reviews-section .reel-frame iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .ind-reviews-section .reel-badge {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      background: rgba(37, 99, 235, 0.92);
      color: #ffffff;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 5px 10px;
      border-radius: 999px;
      pointer-events: none;
    }

    .ind-reviews-section .reel-caption {
      padding: 14px 16px 18px;
    }

    .ind-reviews-section .reel-name {
      font-size: 15px;
      font-weight: 700;
      margin: 0 0 4px 0;
      color: #0f172a;
    }

    .ind-reviews-section .reel-role {
      font-size: 12px;
      color: #64748b;
      margin: 0;
    }

    @media (max-width: 600px) {
      .ind-reviews-section {
        padding: 60px 16px;
      }

      .ind-reviews-section .main-title {
        font-size: 32px;
      }

      .ind-reviews-section .reel-card {
        width: 220px;
      }
    }

    /* ========================================================= */
    /* =============== END: REVIEW VIDEOS CSS ================== */
    /* ========================================================= */
 
 
 
    /* ========================================================= */
    /* =================== START: BLOG CSS ====================== */
    /* ========================================================= */

    .ind-blog-section,
    .ind-blog-section * {
      box-sizing: border-box;
    }

    .ind-blog-section {
      font-family: 'Inter', sans-serif;
      background-color: #f4f6f9;
      color: #0f172a;
      padding: 90px 20px;
      position: relative;
      overflow: hidden;
    }

    .ind-blog-section .bg-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }

    .ind-blog-section .glow-top-right {
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.85) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-blog-section .glow-bottom-left {
      bottom: -150px;
      left: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.6) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-blog-section .container {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Header */
    .ind-blog-section .header-area {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 50px auto;
    }

    .ind-blog-section .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      padding: 6px 18px;
      border-radius: 30px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.05);
    }

    .ind-blog-section .pill-line {
      width: 14px;
      height: 2px;
      background-color: #2563eb;
    }

    .ind-blog-section .main-title {
      font-size: 44px;
      font-weight: 800;
      color: #2563eb;
      margin: 0 0 16px 0;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }

    .ind-blog-section .description {
      color: #64748b;
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
    }

    /* Blog Grid - Exactly 3 Cards Per Row */
    .ind-blog-section .blog-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
      align-items: stretch;
    }

    .ind-blog-section .blog-card {
      width: 100%;
      min-width: 0;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
      transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .ind-blog-section .blog-card:hover {
      transform: translateY(-10px);
      box-shadow: 0 20px 40px rgba(37, 99, 235, 0.16);
      border-color: #dbeafe;
    }

    .ind-blog-section .blog-image {
      position: relative;
      height: 200px;
      overflow: hidden;
    }

    .ind-blog-section .blog-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s ease;
    }

    .ind-blog-section .blog-card:hover .blog-image img {
      transform: scale(1.1);
    }

    .ind-blog-section .blog-image::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(15, 23, 42, 0) 55%, rgba(15, 23, 42, 0.55) 100%);
      opacity: 0;
      transition: opacity 0.35s ease;
    }

    .ind-blog-section .blog-card:hover .blog-image::after {
      opacity: 1;
    }

    .ind-blog-section .blog-category {
      position: absolute;
      top: 14px;
      left: 14px;
      z-index: 2;
      background: #ffffff;
      color: #2563eb;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 999px;
      box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
      transition: all 0.3s ease;
    }

    .ind-blog-section .blog-card:hover .blog-category {
      background: #2563eb;
      color: #ffffff;
    }

    .ind-blog-section .blog-body {
      padding: 24px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .ind-blog-section .blog-meta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 12px;
      color: #94a3b8;
      margin-bottom: 12px;
    }

    .ind-blog-section .blog-meta .dot {
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: #94a3b8;
      flex-shrink: 0;
    }

    .ind-blog-section .blog-title {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      margin: 0 0 10px 0;
      line-height: 1.4;
      transition: color 0.3s ease;
    }

    .ind-blog-section .blog-card:hover .blog-title {
      color: #2563eb;
    }

    .ind-blog-section .blog-excerpt {
      font-size: 13.5px;
      color: #64748b;
      line-height: 1.6;
      margin: 0 0 20px 0;
      flex-grow: 1;
    }

    .ind-blog-section .blog-link {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      font-weight: 700;
      color: #2563eb;
      text-decoration: none;
      width: fit-content;
      position: relative;
    }

    .ind-blog-section .blog-link::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 2px;
      background: #2563eb;
      transition: width 0.3s ease;
    }

    .ind-blog-section .blog-card:hover .blog-link::after {
      width: 100%;
    }

    .ind-blog-section .blog-link svg {
      width: 14px;
      height: 14px;
      transition: transform 0.3s ease;
    }

    .ind-blog-section .blog-card:hover .blog-link svg {
      transform: translateX(5px);
    }

    /* ===================== Bottom CTA (Proper Centered) ===================== */
    .ind-blog-section .bottom-cta {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 48px;
    }

    .ind-blog-section .view-all-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #2563eb;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 15px 34px;
      border-radius: 50px;
      text-decoration: none;
      white-space: nowrap;
      box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
      transition: all 0.3s ease;
    }

    .ind-blog-section .view-all-btn:hover {
      background: #1d4ed8;
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
    }

    .ind-blog-section .view-all-btn svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .ind-blog-section .view-all-btn:hover svg {
      transform: translateX(4px);
    }

    /* Responsive Blog Grid */
    @media (max-width: 900px) {
      .ind-blog-section .blog-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
      }
    }

    @media (max-width: 600px) {
      .ind-blog-section .blog-row {
        grid-template-columns: 1fr;
        gap: 18px;
      }

      .ind-blog-section {
        padding: 60px 16px;
      }

      .ind-blog-section .main-title {
        font-size: 32px;
      }

      .ind-blog-section .view-all-btn {
        width: 100%;
        padding: 15px 20px;
      }
    }

    /* ========================================================= */
    /* ==================== END: BLOG CSS ======================= */
    /* ========================================================= */


 
    /* ========================================================= */
    /* ================= START: CONTACT CSS ===================== */
    /* ========================================================= */

    .ind-contact-section,
    .ind-contact-section * {
      box-sizing: border-box;
    }

    .ind-contact-section {
      font-family: 'Inter', sans-serif;
      background-color: #f4f6f9;
      color: #0f172a;
      padding: 90px 20px;
      position: relative;
      overflow: hidden;
    }

    .ind-contact-section .bg-glow {
      position: absolute;
      width: 500px;
      height: 500px;
      border-radius: 50%;
      pointer-events: none;
      z-index: 1;
    }

    .ind-contact-section .glow-top-right {
      top: -150px;
      right: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.85) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-contact-section .glow-bottom-left {
      bottom: -150px;
      left: -100px;
      background: radial-gradient(circle, rgba(219, 234, 254, 0.6) 0%, rgba(244, 246, 249, 0) 70%);
    }

    .ind-contact-section .container {
      max-width: 1180px;
      width: 100%;
      margin: 0 auto;
      position: relative;
      z-index: 2;
    }

    /* Header */
    .ind-contact-section .header-area {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 50px auto;
    }

    .ind-contact-section .pill-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: #ffffff;
      border: 1px solid #dbeafe;
      padding: 6px 18px;
      border-radius: 30px;
      color: #2563eb;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 16px;
      box-shadow: 0 2px 10px rgba(37, 99, 235, 0.05);
    }

    .ind-contact-section .pill-line {
      width: 14px;
      height: 2px;
      background-color: #2563eb;
    }

    .ind-contact-section .main-title {
      font-size: 44px;
      font-weight: 800;
      color: #2563eb;
      margin: 0 0 16px 0;
      letter-spacing: -0.8px;
      line-height: 1.2;
    }

    .ind-contact-section .description {
      color: #64748b;
      font-size: 15px;
      line-height: 1.65;
      margin: 0;
    }

    /* Main Grid */
    .ind-contact-section .contact-grid {
      display: grid;
      grid-template-columns: 4fr 8fr;
      gap: 32px;
      align-items: stretch;
    }

    /* Left Info Panel */
    .ind-contact-section .info-panel {
      background: linear-gradient(160deg, #2563eb 0%, #1d4ed8 100%);
      border-radius: 24px;
      padding: 40px 32px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: #ffffff;
      position: relative;
      overflow: hidden;
    }

    .ind-contact-section .info-panel::before {
      content: '';
      position: absolute;
      top: -60px;
      right: -60px;
      width: 200px;
      height: 200px;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 50%;
    }

    .ind-contact-section .info-panel::after {
      content: '';
      position: absolute;
      bottom: -80px;
      left: -60px;
      width: 220px;
      height: 220px;
      background: rgba(255, 255, 255, 0.06);
      border-radius: 50%;
    }

    .ind-contact-section .info-title {
      font-size: 22px;
      font-weight: 800;
      margin: 0 0 12px 0;
      position: relative;
      z-index: 2;
    }

    .ind-contact-section .info-desc {
      font-size: 14px;
      line-height: 1.65;
      color: #dbeafe;
      margin: 0 0 32px 0;
      position: relative;
      z-index: 2;
    }

    .ind-contact-section .info-list {
      display: flex;
      flex-direction: column;
      gap: 20px;
      position: relative;
      z-index: 2;
      margin-bottom: 32px;
    }

    .ind-contact-section .info-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;

    }

    .ind-contact-section .info-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .ind-contact-section .info-icon svg {
      width: 18px;
      height: 18px;
      color: #ffffff;
    }

    .ind-contact-section .info-label {
      font-size: 12px;
      color: #bfdbfe;
      margin: 0 0 3px 0;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .ind-contact-section .info-value {
      font-size: 14px;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
    }

    .ind-contact-section .social-row {
      display: flex;
      gap: 10px;
      position: relative;
      z-index: 2;
    }

    .ind-contact-section .social-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.15);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .ind-contact-section .social-icon:hover {
      background: #ffffff;
      color: #2563eb;
      transform: translateY(-3px);
    }

    .ind-contact-section .social-icon svg {
      width: 16px;
      height: 16px;
    }

    /* Right Form Panel */
    .ind-contact-section .form-panel {
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 24px;
      padding: 40px;
      box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
    }

    .ind-contact-section .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-bottom: 20px;
    }

    .ind-contact-section .form-group {
      display: flex;
      flex-direction: column;
      margin-bottom: 20px;
    }

    .ind-contact-section .form-group.full {
      grid-column: span 2;
    }

    .ind-contact-section label {
      font-size: 13px;
      font-weight: 700;
      color: #0f172a;
      margin-bottom: 8px;
    }

    .ind-contact-section input,
    .ind-contact-section select,
    .ind-contact-section textarea {
      width: 100%;
      background: #f8fafc;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 13px 16px;
      font-size: 14px;
      font-family: 'Inter', sans-serif;
      color: #0f172a;
      outline: none;
      transition: all 0.3s ease;
    }

    .ind-contact-section input::placeholder,
    .ind-contact-section textarea::placeholder {
      color: #94a3b8;
    }

    .ind-contact-section input:focus,
    .ind-contact-section select:focus,
    .ind-contact-section textarea:focus {
      border-color: #2563eb;
      background: #ffffff;
      box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    }

    .ind-contact-section textarea {
      resize: none;
      min-height: 130px;
    }

    .ind-contact-section .submit-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: #2563eb;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700;
      padding: 15px 34px;
      border: none;
      border-radius: 50px;
      cursor: pointer;
      box-shadow: 0 10px 24px rgba(37, 99, 235, 0.28);
      transition: all 0.3s ease;
      width: 100%;
    }

    .ind-contact-section .submit-btn:hover {
      background: #1d4ed8;
      transform: translateY(-3px);
      box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
    }

    .ind-contact-section .submit-btn svg {
      width: 16px;
      height: 16px;
      transition: transform 0.3s ease;
    }

    .ind-contact-section .submit-btn:hover svg {
      transform: translateX(4px);
    }

    /* Responsive */
    @media (max-width: 991px) {
      .ind-contact-section .contact-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 600px) {
      .ind-contact-section {
        padding: 60px 16px;
      }

      .ind-contact-section .main-title {
        font-size: 32px;
      }

      .ind-contact-section .form-panel {
        padding: 28px 20px;
      }

      .ind-contact-section .form-row {
        grid-template-columns: 1fr;
      }

      .ind-contact-section .form-group.full {
        grid-column: span 1;
      }
    }

    /* ========================================================= */
    /* ================== END: CONTACT CSS ======================= */
    /* ========================================================= */
 
 
    /* ========================================================= */
    /* =================== START: MAP CSS ======================== */
    /* ========================================================= */

    .ind-map-section,
    .ind-map-section * {
      box-sizing: border-box;
    }

    .ind-map-section {
      font-family: 'Inter', sans-serif;
      background-color: #02182B;
      padding: 90px 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .ind-map-section .header-area {
      text-align: center;
      max-width: 700px;
      margin: 0 auto 40px auto;
    }

    .ind-map-section .subtitle-wrapper {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 14px;
    }

    .ind-map-section .sub-line {
      width: 20px;
      height: 2px;
      background-color: #3B82F6;
    }

    .ind-map-section .subtitle {
      color: #3B82F6;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
    }

    .ind-map-section .main-title {
      font-size: 42px;
      font-weight: 800;
      color: #ffffff;
      margin: 0 0 16px 0;
      letter-spacing: -0.5px;
      line-height: 1.2;
    }

    .ind-map-section .description {
      color: #A0AEC0;
      font-size: 15px;
      line-height: 1.6;
      margin: 0;
    }

    .ind-map-section .map-wrap {
      width: 70%;
      border-radius: 20px;
      overflow: hidden;
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
    }

    .ind-map-section .map-wrap iframe {
      width: 100%;
      height: 450px;
      display: block;
      border: 0;
    }

    /* Responsive */
    @media (max-width: 991px) {
      .ind-map-section .map-wrap {
        width: 90%;
      }
    }

    @media (max-width: 600px) {
      .ind-map-section {
        padding: 60px 16px;
      }

      .ind-map-section .main-title {
        font-size: 32px;
      }

      .ind-map-section .map-wrap {
        width: 100%;
      }

      .ind-map-section .map-wrap iframe {
        height: 320px;
      }
    }

    /* ========================================================= */
    /* ==================== END: MAP CSS ========================= */
    /* ========================================================= */

 #training-service-overview .vvx-recruit-overview-points{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

#training-service-overview .vvx-recruit-overview-points article{
  grid-column: span 3;
}

#training-service-overview .vvx-recruit-overview-points article:nth-child(3),
#training-service-overview .vvx-recruit-overview-points article:nth-child(4),
#training-service-overview .vvx-recruit-overview-points article:nth-child(5){
  grid-column: span 2;
}

@media (max-width: 767px){
  #training-service-overview .vvx-recruit-overview-points{
    grid-template-columns: 1fr;
  }

  #training-service-overview .vvx-recruit-overview-points article,
  #training-service-overview .vvx-recruit-overview-points article:nth-child(3),
  #training-service-overview .vvx-recruit-overview-points article:nth-child(4),
  #training-service-overview .vvx-recruit-overview-points article:nth-child(5){
    grid-column: span 1;
  }
}



/* HR Policy Overview: top 2 boxes + bottom 3 boxes */
#hr-policy-service-overview .vvx-recruit-overview-points{
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 14px;
}

#hr-policy-service-overview .vvx-recruit-overview-points article:nth-child(1),
#hr-policy-service-overview .vvx-recruit-overview-points article:nth-child(2){
  grid-column: span 3 !important;
}

#hr-policy-service-overview .vvx-recruit-overview-points article:nth-child(3),
#hr-policy-service-overview .vvx-recruit-overview-points article:nth-child(4),
#hr-policy-service-overview .vvx-recruit-overview-points article:nth-child(5){
  grid-column: span 2 !important;
}

@media (max-width: 767px){
  #hr-policy-service-overview .vvx-recruit-overview-points{
    grid-template-columns: 1fr !important;
  }

  #hr-policy-service-overview .vvx-recruit-overview-points article:nth-child(n){
    grid-column: span 1 !important;
  }
}




#sop-development-service-overview .vvx-recruit-overview-points{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px;
}
#sop-development-service-overview .vvx-recruit-overview-points article:nth-child(1),
#sop-development-service-overview .vvx-recruit-overview-points article:nth-child(2){
  grid-column:span 3 !important;
}
#sop-development-service-overview .vvx-recruit-overview-points article:nth-child(3),
#sop-development-service-overview .vvx-recruit-overview-points article:nth-child(4),
#sop-development-service-overview .vvx-recruit-overview-points article:nth-child(5){
  grid-column:span 2 !important;
}



#business-consulting-service-overview .vvx-recruit-overview-points{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px;
}
#business-consulting-service-overview .vvx-recruit-overview-points article:nth-child(1),
#business-consulting-service-overview .vvx-recruit-overview-points article:nth-child(2){
  grid-column:span 3 !important;
}
#business-consulting-service-overview .vvx-recruit-overview-points article:nth-child(3),
#business-consulting-service-overview .vvx-recruit-overview-points article:nth-child(4),
#business-consulting-service-overview .vvx-recruit-overview-points article:nth-child(5){
  grid-column:span 2 !important;
}


 #legal-compliance-service-overview .vvx-recruit-overview-points{
  display:grid !important;
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:14px;
}

#legal-compliance-service-overview .vvx-recruit-overview-points article:nth-child(1),
#legal-compliance-service-overview .vvx-recruit-overview-points article:nth-child(2){
  grid-column:span 3 !important;
}

#legal-compliance-service-overview .vvx-recruit-overview-points article:nth-child(3),
#legal-compliance-service-overview .vvx-recruit-overview-points article:nth-child(4),
#legal-compliance-service-overview .vvx-recruit-overview-points article:nth-child(5){
  grid-column:span 2 !important;
}

 #faq .fq-list .fq-item:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
#faq .fq-list .fq-item:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
#faq .fq-list .fq-item:nth-child(3) { grid-column: 1 !important; grid-row: 2 !important; }
#faq .fq-list .fq-item:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; }

@media (max-width: 767px) {
  #faq .fq-list {
    grid-template-columns: 1fr !important;
  }

  #faq .fq-list .fq-item {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}

 
.construction-faq .fq-list{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  grid-template-rows:auto auto auto !important;
  gap:16px !important;
  width:100% !important;
}

.construction-faq .fq-list .fq-item{
  width:100% !important;
  margin:0 !important;
}

.construction-faq .fq-list .fq-item:nth-child(1){grid-column:1 !important;grid-row:1 !important;}
.construction-faq .fq-list .fq-item:nth-child(2){grid-column:1 !important;grid-row:2 !important;}
.construction-faq .fq-list .fq-item:nth-child(3){grid-column:1 !important;grid-row:3 !important;}
.construction-faq .fq-list .fq-item:nth-child(4){grid-column:2 !important;grid-row:1 !important;}
.construction-faq .fq-list .fq-item:nth-child(5){grid-column:2 !important;grid-row:2 !important;}
.construction-faq .fq-list .fq-item:nth-child(6){grid-column:2 !important;grid-row:3 !important;}

@media(max-width:767px){
  .construction-faq .fq-list{
    display:block !important;
  }
  .construction-faq .fq-list .fq-item{
    margin-bottom:16px !important;
  }
}
 

/* ========== START: INNER PAGE CLIENT LOGO ORIGINAL COLORS ========== */
/* Homepage logos stay white. Inner-page logos show their original brand colors. */
.viewwise-inner-page .clf-logo img{
  filter:none !important;
  opacity:1 !important;
}
/* =========== END: INNER PAGE CLIENT LOGO ORIGINAL COLORS =========== */


/* ========== START: SERVICE PAGE CLIENTS WHITE THEME ========== */
/* Restores the original white + blue client-section look on service pages.
   Homepage/other pages keep their existing client-section theme. */
.viewwise-service-page .clf-section{
  background:#ffffff !important;
  color:#0b2b4a !important;
}
.viewwise-service-page .clf-section::before{
  display:none !important;
}
.viewwise-service-page .clf-glow.g1{
  width:420px !important;
  height:420px !important;
  top:-140px !important;
  left:-120px !important;
  right:auto !important;
  bottom:auto !important;
  background:rgba(37,99,235,.14) !important;
}
.viewwise-service-page .clf-glow.g2{
  width:420px !important;
  height:420px !important;
  right:-120px !important;
  bottom:-140px !important;
  left:auto !important;
  top:auto !important;
  background:rgba(37,99,235,.12) !important;
}
.viewwise-service-page .clf-tag{
  color:#2563eb !important;
  background:#f2f7ff !important;
  border:1px solid #bcd3f5 !important;
}
.viewwise-service-page .clf-tag i{
  color:#2563eb !important;
}
.viewwise-service-page .clf-title{
  color:#1e3a8a !important;
}
.viewwise-service-page .clf-title span{
  color:#2563eb !important;
}
.viewwise-service-page .clf-title span::after{
  background:rgba(37,99,235,.14) !important;
}
.viewwise-service-page .clf-sub{
  color:#5b7fa3 !important;
}
.viewwise-service-page .clf-logo{
  background:#f7faff !important;
  border:1px solid #e3edf7 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}
.viewwise-service-page .clf-logo:hover{
  background:#f2f7ff !important;
  border-color:#2563eb !important;
  transform:translateY(-3px) !important;
}
.viewwise-service-page .clf-logo img{
  filter:none !important;
  opacity:1 !important;
}
.viewwise-service-page .clf-note{
  color:#5b7fa3 !important;
}
.viewwise-service-page .clf-note::before,
.viewwise-service-page .clf-note::after{
  background:#d8e4f2 !important;
}
/* =========== END: SERVICE PAGE CLIENTS WHITE THEME =========== */


/* ========== START: HOME REAL CLIENT LOGOS / WHITE CARDS ========== */
/* Home page only: white logo cards, original logo colours, no stretching. */
.viewwise-home-page .clf-section-32 .clf-logo{
  width:190px !important;
  min-width:190px !important;
  height:82px !important;
  padding:15px 20px !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.92) !important;
  border-radius:14px !important;
  box-shadow:0 8px 22px rgba(0,0,0,.10) !important;
  backdrop-filter:none !important;
}
.viewwise-home-page .clf-section-32 .clf-logo:hover{
  background:#ffffff !important;
  border-color:#ffffff !important;
  transform:translateY(-4px) !important;
  box-shadow:0 12px 28px rgba(0,0,0,.15) !important;
}
.viewwise-home-page .clf-section-32 .clf-logo img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:150px !important;
  max-height:44px !important;
  object-fit:contain !important;
  object-position:center !important;
  filter:none !important;
  opacity:1 !important;
  flex:none !important;
}
@media(max-width:860px){
  .viewwise-home-page .clf-section-32 .clf-logo{
    width:155px !important;
    min-width:155px !important;
    height:70px !important;
    padding:12px 15px !important;
  }
  .viewwise-home-page .clf-section-32 .clf-logo img{
    max-width:125px !important;
    max-height:38px !important;
  }
}
@media(max-width:480px){
  .viewwise-home-page .clf-section-32 .clf-logo{
    width:132px !important;
    min-width:132px !important;
    height:62px !important;
    padding:10px 12px !important;
  }
  .viewwise-home-page .clf-section-32 .clf-logo img{
    max-width:108px !important;
    max-height:32px !important;
  }
}
/* =========== END: HOME REAL CLIENT LOGOS / WHITE CARDS =========== */


/* ========== START: HOME CLIENT LOGOS ORIGINAL COLOR + WHITE CARD ========== */
body:not(.viewwise-inner-page):not(.viewwise-service-page) .clf-section-32 .clf-logo{
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
}
body:not(.viewwise-inner-page):not(.viewwise-service-page) .clf-section-32 .clf-logo img{
  filter:none !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-width:150px !important;
  max-height:52px !important;
  object-fit:contain !important;
  object-position:center !important;
}
body:not(.viewwise-inner-page):not(.viewwise-service-page) .clf-section-32 .clf-logo:hover{
  background:#ffffff !important;
  border-color:#ffffff !important;
}
@media(max-width:860px){
  body:not(.viewwise-inner-page):not(.viewwise-service-page) .clf-section-32 .clf-logo img{
    max-width:125px !important;
    max-height:44px !important;
  }
}
/* =========== END: HOME CLIENT LOGOS ORIGINAL COLOR + WHITE CARD =========== */


/* ========== START: 10 SERVICE PAGES REAL CLIENT LOGOS / WHITE CARDS ========== */
/* Service pages only: same real logos as home, original logo colours, white cards, no stretching. */
.viewwise-service-page .clf-section-32 .clf-logo{
  width:190px !important;
  min-width:190px !important;
  height:82px !important;
  padding:15px 20px !important;
  background:#ffffff !important;
  border:1px solid #e3edf7 !important;
  border-radius:14px !important;
  box-shadow:0 6px 18px rgba(11,43,74,.08) !important;
  backdrop-filter:none !important;
}
.viewwise-service-page .clf-section-32 .clf-logo:hover{
  background:#ffffff !important;
  border-color:#bcd3f5 !important;
  transform:translateY(-3px) !important;
}
.viewwise-service-page .clf-section-32 .clf-logo img{
  filter:none !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-width:150px !important;
  max-height:52px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
}
@media(max-width:860px){
  .viewwise-service-page .clf-section-32 .clf-logo{
    width:155px !important;
    min-width:155px !important;
    height:70px !important;
    padding:12px 15px !important;
  }
  .viewwise-service-page .clf-section-32 .clf-logo img{
    max-width:125px !important;
    max-height:44px !important;
  }
}
@media(max-width:480px){
  .viewwise-service-page .clf-section-32 .clf-logo{
    width:132px !important;
    min-width:132px !important;
    height:62px !important;
    padding:10px 12px !important;
  }
  .viewwise-service-page .clf-section-32 .clf-logo img{
    max-width:108px !important;
    max-height:38px !important;
  }
}
/* =========== END: 10 SERVICE PAGES REAL CLIENT LOGOS / WHITE CARDS =========== */


/* ========== START: INDUSTRY CLIENT LOGOS SAME AS HOME ========== */
.viewwise-industry-page .clf-section-32 .clf-logo{
  width:190px !important;
  height:82px !important;
  padding:12px 18px !important;
  background:#ffffff !important;
  border:1px solid rgba(255,255,255,.95) !important;
  border-radius:16px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.viewwise-industry-page .clf-section-32 .clf-logo:hover{
  background:#ffffff !important;
  border-color:#ffffff !important;
}
.viewwise-industry-page .clf-section-32 .clf-logo img{
  filter:none !important;
  opacity:1 !important;
  width:auto !important;
  height:auto !important;
  max-width:150px !important;
  max-height:52px !important;
  object-fit:contain !important;
  object-position:center !important;
  display:block !important;
}
@media(max-width:860px){
  .viewwise-industry-page .clf-section-32 .clf-logo{
    width:160px !important;
    height:72px !important;
    padding:10px 14px !important;
  }
  .viewwise-industry-page .clf-section-32 .clf-logo img{
    max-width:125px !important;
    max-height:44px !important;
  }
}
/* =========== END: INDUSTRY CLIENT LOGOS SAME AS HOME =========== */