:root {
  --zentryx-bg: #0e1116;
  --zentryx-dark: #121721;
  --zentryx-cyan: #4fe3d7;
  --zentryx-teal: #0e78c8;
  --zentryx-metal: #bfc7cf;
  --zentryx-text: #e6ebef;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* =========================================
   INTRO LOGO ANIMATION SCREEN (ULTRA TECHY)
========================================= */
.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #0b1c2d 0%, #1a2a3a 50%, #0e1116 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  overflow: hidden;
  animation: introFadeOut 0.8s ease-in-out 4.5s forwards;
}

.intro-screen.hidden {
  display: none;
}

/* ========== TECH GRID BACKGROUND ========== */
.intro-tech-grid {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  opacity: 0.15;
}

.grid-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, rgba(79, 227, 215, 0.5), transparent);
}

.grid-line-h {
  width: 100%;
  height: 1px;
  animation: gridPulseH 3s ease-in-out infinite;
}

.grid-line-v {
  height: 100%;
  width: 1px;
  animation: gridPulseV 3.5s ease-in-out infinite;
}

@keyframes gridPulseH {

  0%,
  100% {
    opacity: 0.2;
    transform: translateX(-100%);
  }

  50% {
    opacity: 1;
    transform: translateX(100%);
  }
}

@keyframes gridPulseV {

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

  50% {
    opacity: 1;
    transform: translateY(100%);
  }
}

/* ========== FLOATING GEOMETRIC SHAPES ========== */
.intro-geometric-shapes {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.geo-shape {
  position: absolute;
  opacity: 0.2;
  animation: geoFloat 8s infinite ease-in-out;
}

.hexagon {
  width: 60px;
  height: 34px;
  background: rgba(79, 227, 215, 0.3);
  position: relative;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  filter: drop-shadow(0 0 20px rgba(79, 227, 215, 0.5));
}

.circle-outline {
  width: 80px;
  height: 80px;
  border: 2px solid rgba(79, 227, 215, 0.4);
  border-radius: 50%;
  filter: drop-shadow(0 0 15px rgba(79, 227, 215, 0.3));
}

.square-outline {
  width: 50px;
  height: 50px;
  border: 2px solid rgba(14, 120, 200, 0.4);
  transform: rotate(45deg);
  filter: drop-shadow(0 0 15px rgba(14, 120, 200, 0.3));
}

.triangle {
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 52px solid rgba(79, 227, 215, 0.3);
  filter: drop-shadow(0 0 15px rgba(79, 227, 215, 0.4));
}

@keyframes geoFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
    opacity: 0.15;
  }

  25% {
    transform: translateY(-40px) rotate(90deg);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.25;
  }

  75% {
    transform: translateY(-50px) rotate(270deg);
    opacity: 0.35;
  }
}

/* ========== LIGHT RAYS ========== */
.intro-light-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.light-ray {
  position: absolute;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(79, 227, 215, 0.3), transparent);
  top: 0;
  filter: blur(2px);
}

.ray-1 {
  left: 20%;
  animation: rayMove 4s ease-in-out infinite;
  animation-delay: 0s;
}

.ray-2 {
  left: 50%;
  animation: rayMove 5s ease-in-out infinite;
  animation-delay: 1s;
}

.ray-3 {
  left: 80%;
  animation: rayMove 4.5s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes rayMove {

  0%,
  100% {
    opacity: 0.1;
    transform: translateX(-20px);
  }

  50% {
    opacity: 0.6;
    transform: translateX(20px);
  }
}

/* ========== HUD CORNER ELEMENTS ========== */
.intro-hud-corners {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hud-corner {
  position: absolute;
  width: 100px;
  height: 100px;
  opacity: 0;
  animation: hudFadeIn 0.8s ease-out 0.5s forwards;
}

.corner-tl {
  top: 30px;
  left: 30px;
  border-top: 3px solid rgba(79, 227, 215, 0.5);
  border-left: 3px solid rgba(79, 227, 215, 0.5);
}

.corner-tr {
  top: 30px;
  right: 30px;
  border-top: 3px solid rgba(79, 227, 215, 0.5);
  border-right: 3px solid rgba(79, 227, 215, 0.5);
}

.corner-bl {
  bottom: 30px;
  left: 30px;
  border-bottom: 3px solid rgba(79, 227, 215, 0.5);
  border-left: 3px solid rgba(79, 227, 215, 0.5);
}

.corner-br {
  bottom: 30px;
  right: 30px;
  border-bottom: 3px solid rgba(79, 227, 215, 0.5);
  border-right: 3px solid rgba(79, 227, 215, 0.5);
}

@keyframes hudFadeIn {
  from {
    opacity: 0;
    transform: scale(1.3);
  }

  to {
    opacity: 0.7;
    transform: scale(1);
  }
}

/* ========== SCANLINES EFFECT ========== */
.intro-scanlines {
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(0deg,
      rgba(0, 0, 0, 0.1) 0px,
      rgba(0, 0, 0, 0.1) 1px,
      transparent 1px,
      transparent 3px);
  pointer-events: none;
  opacity: 0.3;
  animation: scanlineMove 8s linear infinite;
}

@keyframes scanlineMove {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(50px);
  }
}

/* ========== ENHANCED PARTICLES ========== */
.intro-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.intro-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(79, 227, 215, 0.8);
  border-radius: 50%;
  animation: particleFloat 8s infinite ease-in-out;
  box-shadow: 0 0 15px rgba(79, 227, 215, 1), 0 0 30px rgba(79, 227, 215, 0.5);
}

.intro-particle.particle-large {
  width: 8px;
  height: 8px;
  background: rgba(14, 120, 200, 0.7);
  box-shadow: 0 0 20px rgba(14, 120, 200, 1), 0 0 40px rgba(14, 120, 200, 0.5);
}

.intro-particle.particle-small {
  width: 2px;
  height: 2px;
}

.intro-particle:nth-child(1) {
  left: 10%;
  top: 20%;
  animation-delay: 0s;
  animation-duration: 6s;
}

.intro-particle:nth-child(2) {
  left: 20%;
  top: 80%;
  animation-delay: 1s;
  animation-duration: 8s;
}

.intro-particle:nth-child(3) {
  left: 30%;
  top: 40%;
  animation-delay: 0.5s;
  animation-duration: 7s;
}

.intro-particle:nth-child(4) {
  left: 40%;
  top: 60%;
  animation-delay: 1.5s;
  animation-duration: 9s;
}

.intro-particle:nth-child(5) {
  left: 50%;
  top: 30%;
  animation-delay: 0.8s;
  animation-duration: 6.5s;
}

.intro-particle:nth-child(6) {
  left: 60%;
  top: 70%;
  animation-delay: 2s;
  animation-duration: 7.5s;
}

.intro-particle:nth-child(7) {
  left: 70%;
  top: 50%;
  animation-delay: 1.2s;
  animation-duration: 8.5s;
}

.intro-particle:nth-child(8) {
  left: 80%;
  top: 25%;
  animation-delay: 0.3s;
  animation-duration: 7s;
}

.intro-particle:nth-child(9) {
  left: 90%;
  top: 75%;
  animation-delay: 1.8s;
  animation-duration: 6.8s;
}

.intro-particle:nth-child(10) {
  left: 15%;
  top: 55%;
  animation-delay: 0.6s;
  animation-duration: 7.2s;
}

@keyframes particleFloat {

  0%,
  100% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0.4;
  }

  25% {
    transform: translateY(-50px) translateX(30px) scale(1.3);
    opacity: 0.9;
  }

  50% {
    transform: translateY(-30px) translateX(-20px) scale(1.8);
    opacity: 1;
  }

  75% {
    transform: translateY(-60px) translateX(40px) scale(1.2);
    opacity: 0.7;
  }
}

/* ========== LOGO CONTAINER ========== */
.intro-logo-container {
  position: relative;
  z-index: 10;
  text-align: center;
  animation: logoReveal 1.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* 3D Logo Wrapper */
.logo-3d-wrapper {
  perspective: 1500px;
  transform-style: preserve-3d;
}

/* ========== ULTRA ENHANCED LOGO ========== */
.intro-logo {
  width: 350px;
  height: auto;
  filter: drop-shadow(0 20px 60px rgba(79, 227, 215, 0.6));
  animation: logo3DUltraZoom 3s cubic-bezier(0.19, 1, 0.22, 1) forwards,
    logoAdvancedBreathing 4s ease-in-out 3s infinite;
  opacity: 0;
  object-fit: contain;
  border-radius: 10px;
  transform-style: preserve-3d;
  will-change: transform, opacity, filter;
}

/* Ultra Enhanced 3D Zoom with Multiple Rotations */
@keyframes logo3DUltraZoom {
  0% {
    transform: scale(0.05) translateZ(-1000px) rotateX(180deg) rotateY(-180deg) rotateZ(45deg);
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(79, 227, 215, 0)) blur(20px) brightness(0);
  }

  25% {
    transform: scale(0.5) translateZ(-200px) rotateX(90deg) rotateY(-90deg) rotateZ(22deg);
    opacity: 0.3;
    filter: drop-shadow(0 10px 40px rgba(79, 227, 215, 0.4)) blur(5px) brightness(0.5);
  }

  50% {
    transform: scale(1.2) translateZ(100px) rotateX(-10deg) rotateY(10deg) rotateZ(-5deg);
    opacity: 1;
    filter: drop-shadow(0 40px 100px rgba(79, 227, 215, 0.8)) blur(0px) brightness(1.3);
  }

  75% {
    transform: scale(0.95) translateZ(20px) rotateX(5deg) rotateY(-5deg) rotateZ(2deg);
    opacity: 1;
    filter: drop-shadow(0 30px 80px rgba(79, 227, 215, 0.7)) blur(0px) brightness(1.1);
  }

  100% {
    transform: scale(1) translateZ(0) rotateX(0) rotateY(0) rotateZ(0);
    opacity: 1;
    filter: drop-shadow(0 20px 60px rgba(79, 227, 215, 0.6)) blur(0px) brightness(1);
  }
}

/* Advanced Breathing with Rotation and Glow */
@keyframes logoAdvancedBreathing {

  0%,
  100% {
    transform: scale(1) rotateZ(0deg) translateY(0);
    filter: drop-shadow(0 20px 60px rgba(79, 227, 215, 0.6)) brightness(1);
  }

  25% {
    transform: scale(1.03) rotateZ(1deg) translateY(-5px);
    filter: drop-shadow(0 25px 70px rgba(79, 227, 215, 0.8)) brightness(1.1);
  }

  50% {
    transform: scale(1.08) rotateZ(-1deg) translateY(-8px);
    filter: drop-shadow(0 30px 80px rgba(79, 227, 215, 1)) brightness(1.2);
  }

  75% {
    transform: scale(1.03) rotateZ(1deg) translateY(-5px);
    filter: drop-shadow(0 25px 70px rgba(79, 227, 215, 0.8)) brightness(1.1);
  }
}

/* ========== TEXT ANIMATIONS ========== */
.intro-company-name {
  margin-top: 30px;
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 3px;
  opacity: 0;
  animation: textSlideUpGlitch 1.2s ease-out 1s forwards;
  background: linear-gradient(135deg, #4fe3d7, #0e78c8, #4fe3d7);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  animation: textSlideUpGlitch 1.2s ease-out 1s forwards, textShimmer 3s ease-in-out 2s infinite;
}

@keyframes textSlideUpGlitch {
  0% {
    transform: translateY(50px) skewY(5deg);
    opacity: 0;
    filter: blur(10px);
  }

  60% {
    transform: translateY(-5px) skewY(-2deg);
    opacity: 1;
    filter: blur(0px);
  }

  80% {
    transform: translateY(2px) skewY(1deg);
  }

  100% {
    transform: translateY(0) skewY(0deg);
    opacity: 1;
  }
}

@keyframes textShimmer {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Tagline */
.intro-tagline {
  margin-top: 15px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 2px;
  opacity: 0;
  animation: textFadeInGlow 1.2s ease-out 1.5s forwards;
}

@keyframes textFadeInGlow {
  0% {
    opacity: 0;
    transform: translateY(30px);
    text-shadow: none;
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    text-shadow: 0 0 20px rgba(79, 227, 215, 0.3);
  }
}

/* ========== GLOW EFFECTS ========== */
.intro-glow-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(79, 227, 215, 0.2) 0%, rgba(14, 120, 200, 0.1) 50%, transparent 70%);
  border-radius: 50%;
  animation: glowExpandPulse 3s ease-out forwards, glowRotate 20s linear infinite 3s;
  z-index: -1;
}

@keyframes glowExpandPulse {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}

@keyframes glowRotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Multiple Pulsing Rings */
.intro-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  border: 2px solid rgba(79, 227, 215, 0.4);
  border-radius: 50%;
  animation: pulseRingExpand 2.5s ease-out infinite 1.5s;
  z-index: -1;
}

.intro-pulse-ring.ring-2 {
  animation-delay: 2s;
  border-color: rgba(14, 120, 200, 0.3);
}

@keyframes pulseRingExpand {
  0% {
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 1;
    border-width: 3px;
  }

  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
    border-width: 0px;
  }
}

/* ========== LOADING BAR ========== */
.intro-loading-bar {
  position: absolute;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  overflow: hidden;
  opacity: 0;
  animation: barFadeIn 0.5s ease-out 2s forwards;
  border: 1px solid rgba(79, 227, 215, 0.2);
}

.intro-loading-progress {
  height: 100%;
  background: linear-gradient(90deg, #4fe3d7, #0e78c8, #4fe3d7);
  background-size: 200% auto;
  border-radius: 10px;
  animation: loadingProgress 2.2s ease-out 2.2s forwards, progressShimmer 1.5s linear infinite;
  width: 0;
  box-shadow: 0 0 20px rgba(79, 227, 215, 1), 0 0 40px rgba(79, 227, 215, 0.5);
}

@keyframes barFadeIn {
  to {
    opacity: 1;
  }
}

@keyframes loadingProgress {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@keyframes progressShimmer {
  0% {
    background-position: 0% center;
  }

  100% {
    background-position: 200% center;
  }
}

/* Fade Out Entire Intro */
@keyframes introFadeOut {
  0% {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.1);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .intro-logo {
    width: 220px;
  }

  .intro-company-name {
    font-size: 1.8rem;
    letter-spacing: 2px;
  }

  .intro-tagline {
    font-size: 0.9rem;
  }

  .intro-glow-circle {
    width: 350px;
    height: 350px;
  }

  .intro-loading-bar {
    width: 200px;
  }

  .hud-corner {
    width: 60px;
    height: 60px;
  }

  .corner-tl,
  .corner-tr {
    top: 15px;
  }

  .corner-bl,
  .corner-br {
    bottom: 15px;
  }

  .corner-tl,
  .corner-bl {
    left: 15px;
  }

  .corner-tr,
  .corner-br {
    right: 15px;
  }
}

/* =========================================
   HEADER & NAVIGATION (WHITE THEME)
========================================= */
header {
  position: sticky;
  top: 0;
  z-index: 2000;
  background: linear-gradient(to right, #25262a 0%, #1d1e22 13%, #ffffff 50%, #ffffff 100%);
  border-bottom: 2px solid #f1f4f8;
  transition: all 0.4s ease;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.05);
}

.top-header-bar {
  position: relative;
  z-index: 2001;
}

.navbar {
  padding: 0;
  display: flex;
  align-items: center;
  /* min-height: 100px; */
}

.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  width: 100%;
  padding-left: 12px;
  padding-right: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ================================
   LOGO
================================ */
.logo-link {
  display: flex;
  align-items: center;
}

.logo-link img {
  height: 80px;
  /* Increased logo size as requested */
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 0 10px rgba(0, 180, 255, 0.3));
  transition: transform 0.3s ease;
}

.logo-link img:hover {
  transform: scale(1.05);
}

/* MOBILE LOGO ADJUSTMENTS */
@media (max-width: 991px) {
  .navbar {
    min-height: 80px;
    /* More compact on mobile */
  }

  .logo-link img {
    height: 60px;
    /* smaller logo on mobile */
  }
}

/* ================================
   MENU
================================ */
.menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu>li {
  position: static;
}

.menu a {
  color: #0b1c2d;
  /* Dark Navy for white background */
  text-decoration: none;
  padding: 12px 10px;
  font-weight: 600;
  font-size: 1.05rem;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

/* Adjust link color for mobile if it overlaps the dark gradient */
@media (max-width: 991px) {
  .menu a {
    color: #ffffff;
  }
}

.menu a:hover {
  color: #0072ff;
}

/* ================================
   MEGA MENU (GLASS EFFECT)
================================ */
.mega {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(11, 28, 45, 0.7);
  /* Glass Background */
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 3px solid #00b4ff;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.05);
  display: none;
  z-index: 9999;
  animation: megaFadeUp 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes megaFadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

.has-dropdown:hover>.mega {
  display: block;
}

.has-dropdown:hover>.mega,
.has-dropdown .mega:hover {
  display: block;
}

/* Bridge to prevent dropdown closing when moving mouse to menu */
.has-dropdown::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 30px;
  display: none;
  z-index: 99;
}

.has-dropdown:hover::after {
  display: block;
}

/* ================================
   MEGA INNER
================================ */
.mega-inner {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 60px;
  padding: 40px 0;
}

/* LEFT MENU */
.mega-left ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 10px;
}

/* Custom Scrollbar for Mega Menu */
.mega-left ul::-webkit-scrollbar {
  width: 6px;
}

.mega-left ul::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}

.mega-left ul::-webkit-scrollbar-thumb {
  background: rgba(0, 180, 255, 0.4);
  border-radius: 10px;
}

.mega-left ul::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 180, 255, 0.6);
}

.mega-left li {
  padding: 16px 20px;
  cursor: pointer;
  border-left: 4px solid transparent;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.3s ease;
  font-weight: 500;
}

.mega-left li.active,
.mega-left li:hover {
  border-color: #00b4ff;
  background: rgba(0, 180, 255, 0.1);
  color: #00b4ff;
  font-weight: 700;
  padding-left: 25px;
}

/* RIGHT CONTENT */
.mega-right h3 {
  color: #00b4ff;
  font-size: 1.6rem;
  margin-bottom: 25px;
  font-weight: 700;
}

.mega-right ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.mega-right li {
  color: #ffffff;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  padding: 5px 0;
  display: flex;
  align-items: center;
  opacity: 0.85;
}

.mega-right li:hover {
  opacity: 1;
  color: #00b4ff;
  transform: translateX(8px);
}

.mega-right li::before {
  content: '✦';
  margin-right: 12px;
  color: #00b4ff;
  font-size: 0.8rem;
}

.mega-content {
  display: none;
}

.mega-content.active {
  display: block;
}

/* ================================
   MOBILE MENU (PREMIUM SIDEBAR)
================================ */
@media (max-width: 991px) {
  .nav-inner {
    height: 80px;
    padding: 0 20px;
  }

  .menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 85%;
    /* Responsive width */
    max-width: 350px;
    height: 100vh;
    background: #0b1c2d;
    flex-direction: column;
    padding: 100px 25px 50px;
    transition: all 0.5s cubic-bezier(0.85, 0, 0.15, 1);
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
    gap: 0;
    z-index: 9999;
  }

  .menu.active {
    right: 0;
  }

  .menu>li {
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .menu>li>a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 18px 0;
    font-size: 1.15rem;
    color: #fff;
    width: 100%;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  /* Rotate Arrow on Toggle */
  .has-dropdown.active>a::after {
    transform: rotate(180deg);
    transition: transform 0.3s;
  }

  /* MEGA MENU TRANSFORMATION FOR MOBILE */
  .mega {
    position: static;
    display: none;
    /* Controlled by active class in JS */
    background: rgba(255, 255, 255, 0.03);
    border: none;
    box-shadow: none;
    padding: 10px 0;
    animation: none;
    max-height: none;
    overflow: visible;
  }

  .has-dropdown.active>.mega {
    display: block;
  }

  .mega-inner {
    display: block;
    padding: 0;
    width: 100%;
  }

  .mega-left {
    padding: 0;
  }

  .mega-left ul {
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .mega-left li {
    padding: 16px 20px;
    border-left: 3px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
    font-size: 1.05rem;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
  }

  .mega-left li::after {
    content: '\f107';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.4);
    transition: transform 0.3s ease;
  }

  .mega-left li.active {
    border-color: #00b4ff;
    background: rgba(0, 180, 255, 0.15);
    color: #4fe3d7;
    font-weight: 800;
    padding-left: 25px;
  }

  .mega-left li.active::after {
    transform: rotate(-180deg);
    color: #4fe3d7;
  }

  /* MOBILE RIGHT CONTENT (ACCORDION STYLE) */
  .mega-right {
    padding: 0;
    min-height: auto;
  }

  .mega-content {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    margin: 10px 0 20px 0;
    padding: 25px 20px;
    display: none;
    border: 1px solid rgba(79, 227, 215, 0.15);
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.2);
  }

  .mega-content.active {
    display: block;
    animation: fadeInDown 0.4s ease forwards;
  }

  @keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

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

  .mega-content-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
  }

  .col-points {
    border-right: none !important;
    padding-right: 0 !important;
    gap: 15px !important;
  }

  .col-points ul {
    gap: 12px !important;
  }

  .col-points li {
    font-size: 0.95rem !important;
    color: #fff !important;
    opacity: 0.8;
  }

  .col-points li::before {
    margin-right: 15px !important;
    background-color: #4fe3d7 !important;
  }

  .col-desc {
    padding: 0 !important;
  }

  .mega-right h3 {
    font-size: 1.3rem;
    color: #4fe3d7;
    margin-bottom: 12px;
    font-weight: 800;
    border-bottom: 1px solid rgba(79, 227, 215, 0.2);
    padding-bottom: 8px;
  }

  .mega-right p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 25px;
  }

  .mega-right ul {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }

  .mega-right li {
    font-size: 1rem;
    color: #fff;
    opacity: 1;
    display: flex;
    align-items: center;
  }

  .mega-right li::before {
    content: '→';
    margin-right: 12px;
    color: #4fe3d7;
  }

  .btn-discovery {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 14px 25px !important;
    background: linear-gradient(135deg, #0072ff, #4fe3d7) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(0, 114, 255, 0.3) !important;
    width: 100% !important;
    margin-top: 10px !important;
  }

  .mega-img-box {
    display: none !important;
  }
}

/* HAMBURGER STYLING */
.hamburger {
  display: none;
  width: 32px;
  height: 24px;
  position: relative;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.4s ease;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 3px;
  background: #0b1c2d;
  border-radius: 4px;
  position: absolute;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  top: 10px;
  width: 80%;
  right: 0;
}

.hamburger span:nth-child(3) {
  top: 20px;
}

/* Hamburger Active State */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
  background: #ffffff;
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
  width: 0;
}

.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 10px;
  background: #ffffff;
}

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


/* ////////// */

/* 3d effect */
/* #three-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
} */
/* ================= HERO REBORN (PREMIUM) ================= */
.hero-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 800px;
  background: #ffffff;
  overflow: hidden;
  font-family: 'Outfit', 'Poppins', sans-serif;
}

.heroSwiper,
.heroSwiper .swiper-wrapper,
.heroSwiper .swiper-slide {
  height: 100%;
}

.hero-container {
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-main-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 60px;
}

/* --- Content Styling --- */
.hero-left-content {
  flex: 1;
  max-width: 650px;
  position: relative;
  z-index: 10;
}

.hero-brand-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(0, 114, 255, 0.05);
  color: #0072ff;
  border-radius: 100px;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
  border: 1px solid rgba(0, 114, 255, 0.1);
}

.hero-brand-tag.dev-tag {
  background: rgba(131, 58, 180, 0.05);
  color: #833ab4;
  border-color: rgba(131, 58, 180, 0.1);
}

.hero-brand-tag .dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 10px currentColor;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 1;
  }

  70% {
    transform: scale(1.5);
    opacity: 0;
  }

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

.hero-title {
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: #0b1c2d;
  margin-bottom: 25px;
}

.hero-title span {
  color: #0072ff;
  position: relative;
}

.dev-premium-slide .hero-title span {
  color: #833ab4;
}

.hero-desc {
  font-size: 1.25rem;
  color: #64748b;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 550px;
}

/* --- Buttons --- */
.menu-open {
  overflow: hidden;
}

@media (max-width: 991px) {
  .menu-open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1500;
    animation: fadeIn 0.4s ease;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-btn-group {
  display: flex;
  align-items: center;
  gap: 30px;
}

.btn-magnetic-talk {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  background: #0b1c2d;
  color: #fff;
  padding: 18px 35px;
  border-radius: 100px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 30px rgba(11, 28, 45, 0.2);
}

.btn-magnetic-talk.dev-btn {
  background: #1a1a1a;
}

.btn-magnetic-talk:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(11, 28, 45, 0.3);
  padding-right: 45px;
}

.btn-magnetic-talk i {
  transition: transform 0.4s ease;
}

.btn-magnetic-talk:hover i {
  transform: translateX(5px);
}

.hero-link-more {
  font-weight: 700;
  color: #0b1c2d;
  text-decoration: none;
  position: relative;
  padding-bottom: 5px;
}

.hero-link-more::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: #0072ff;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.hero-link-more:hover::after {
  transform: scaleX(1);
}

.hero-link-more.dev-link::after {
  background: #833ab4;
}

/* --- Visuals --- */
.hero-right-visual {
  flex: 0.8;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-3d-wrapper {
  position: relative;
  width: 100%;
  max-width: 550px;
  z-index: 5;
}

.hero-3d-asset {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 50px rgba(0, 0, 0, 0.15));
}

.hero-glow-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(0, 114, 255, 0.1) 0%, transparent 70%);
  z-index: -1;
  border-radius: 50%;
}

.hero-glow-sphere.dev-glow {
  background: radial-gradient(circle, rgba(131, 58, 180, 0.1) 0%, transparent 70%);
}

/* --- Floating Animations --- */
.floating-3d {
  animation: float3D 6s ease-in-out infinite;
}

.floating-3d-alt {
  animation: float3DAlt 8s ease-in-out infinite;
}

@keyframes float3D {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-30px) rotate(2deg);
  }

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

@keyframes float3DAlt {
  0% {
    transform: translateY(0) rotate(0);
  }

  50% {
    transform: translateY(-20px) rotate(-3deg) scale(1.02);
  }

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

/* --- Sliders Pagination & Theme Dots --- */
.heroSwiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #cbd5e1;
  opacity: 1;
  transition: all 0.3s ease;
}

.heroSwiper .swiper-pagination-bullet-active {
  width: 35px;
  border-radius: 10px;
  background: #0072ff;
}


/* --- Merger Slide Specifics --- */
.merger-tag {
  background: rgba(255, 107, 0, 0.05);
  color: #ff6b00;
  border-color: rgba(255, 107, 0, 0.1);
}

.merger-premium-slide .hero-title span {
  color: #ff6b00;
  background: linear-gradient(135deg, #ff6b00, #ff8c00);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4.5rem;
}

.merger-premium-slide .hero-title .zentryx {
  color: #1c0653;
  background: linear-gradient(135deg, #1c0653, #1c0653);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 4.5rem;

}


.merger-btn {
  background: linear-gradient(135deg, #0b1c2d, #1a2a3a);
  border: none;
}

.merger-link::after {
  background: #ff6b00;
}

/* Logo Merge Animation Visual */
.merger-visual-container {
  position: relative;
  width: 100%;
  max-width: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
}

.logo-merge-animation {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  animation: logoBreath 4s ease-in-out infinite;
}

.logo-merge-animation .old-logo {
  width: 180px;
  height: auto;
  filter: grayscale(100%) opacity(0.5);
  animation: mergeInLeft 2s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

.logo-merge-animation .new-logo {
  width: 220px;
  height: auto;
  animation: mergeInRight 2.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;
}

/* Animated Merge Arrow */
.merge-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  opacity: 0;
  animation: arrowFadeIn 1s 1s forwards;
  position: relative;
}

.arrow-shaft {
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff6b00, #ff8c00);
  position: relative;
  animation: arrowPulse 2s ease-in-out infinite;
  box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

.arrow-shaft::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.3), rgba(255, 140, 0, 0.3));
  transform: translateY(-50%);
  animation: arrowFlow 1.5s ease-in-out infinite;
}

.arrow-head {
  font-size: 2rem;
  color: #ff6b00;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: arrowBounce 1.5s ease-in-out infinite;
  text-shadow: 0 0 15px rgba(255, 107, 0, 0.6);
}

@keyframes arrowFadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes arrowPulse {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
  }

  50% {
    box-shadow: 0 0 20px rgba(255, 107, 0, 0.8), 0 0 30px rgba(255, 107, 0, 0.4);
  }
}

@keyframes arrowFlow {
  0% {
    width: 0%;
    left: 0;
  }

  50% {
    width: 100%;
    left: 0;
  }

  100% {
    width: 0%;
    left: 100%;
  }
}

@keyframes arrowBounce {

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

  50% {
    transform: translateX(8px);
  }
}

.merger-glow {
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 107, 0, 0.1) 0%, transparent 70%);
  z-index: -1;
  border-radius: 50%;
  animation: glowPulse 4s infinite;
}

@keyframes logoBreath {

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

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

@keyframes mergeInLeft {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 0.7;
  }
}

@keyframes mergeInRight {
  from {
    transform: translateX(50px);
    opacity: 0;
  }

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

@keyframes glowPulse {

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

  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .hero-main-flex {
    gap: 30px;
  }

  .hero-title {
    font-size: 3.5rem;
  }
}

@media (max-width: 991px) {
  .hero-main-flex {
    flex-direction: column;
    text-align: center;
    padding-top: 100px;
  }

  .hero-left-content {
    max-width: 100%;
  }

  .hero-desc {
    margin: 0 auto 40px;
  }

  .hero-btn-group {
    justify-content: center;
  }

  .hero-right-visual {
    width: 100%;
    margin-top: 50px;
  }

  .hero-3d-wrapper {
    max-width: 400px;
  }

  .hero-glow-sphere {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 576px) {
  .hero-title {
    font-size: 2.5rem;
  }

  .merger-premium-slide .hero-title .zentryx {
    font-size: 2.5rem !important;
  }

  .merger-premium-slide .hero-title span {
    font-size: 2.5rem !important;
  }



  .hero-btn-group {
    flex-direction: column;
    gap: 20px;
  }
}

/*    HERO SECTION end //////////////////////////////////// */


/* ================================
   ABOUT SECTION – CORUS INFOTECH
================================ */
/* ================================
   ABOUT SECTION MODERN
================================ */
.about-section-modern {
  position: relative;
  padding: 120px 0;
  background: #0f1f34;
  color: #fff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

/* Wrapper */
.about-wrapper-modern {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
}

/* LEFT CONTENT */
.about-tag-modern {
  display: inline-block;
  background: linear-gradient(90deg, #00b4ff, #4cafb3);
  color: #fff;
  padding: 6px 18px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 30px;
  margin-bottom: 18px;
}

.about-title-modern {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.3;
  background: linear-gradient(90deg, #00b4ff, #4cafb3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-desc-modern {
  font-size: 1.05rem;
  color: #d1d8e0;
  line-height: 1.8;
  max-width: 520px;
  margin-bottom: 35px;
}

/* STATS */
.about-stats-modern {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 35px;
}

.stat-box-modern {
  flex: 1 1 45%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  padding: 25px;
  text-align: center;
  transition: 0.4s;
  backdrop-filter: blur(8px);
}

.stat-box-modern h3 {
  font-size: 2rem;
  font-weight: 700;
  color: #00b4ff;
  margin-bottom: 8px;
}

.stat-box-modern p {
  font-size: 0.9rem;
  color: #cfd8e0;
}

.stat-box-modern:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
  border-color: #00b4ff;
}

/* CTA BUTTON */
.about-btn-modern {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  background: linear-gradient(90deg, #00b4ff, #4cafb3);
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: 0.4s;
}

.about-btn-modern i {
  transition: transform 0.3s;
}

.about-btn-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
}

.about-btn-modern:hover i {
  transform: translateX(6px);
}

/* RIGHT IMAGE */
.about-visual-modern .image-wrapper {
  position: relative;
  max-width: 500px;
  margin: auto;
}

.about-visual-modern img {
  width: 100%;
  border-radius: 20px;
  animation: floatImage 6s ease-in-out infinite;
}

/* Floating shapes */
.shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.5;
  filter: blur(35px);
}

.shape1 {
  width: 120px;
  height: 120px;
  background: #00b4ff;
  top: -30px;
  left: -30px;
  animation: floatShape 6s infinite alternate ease-in-out;
}

.shape2 {
  width: 100px;
  height: 100px;
  background: #4cafb3;
  bottom: -20px;
  right: -20px;
  animation-delay: 2s;
  animation: floatShape 6s infinite alternate ease-in-out;
}

.shape3 {
  width: 80px;
  height: 80px;
  background: #ffc107;
  top: 40%;
  right: -25px;
  animation-delay: 4s;
  animation: floatShape 6s infinite alternate ease-in-out;
}

/* Animations */
@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

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

@keyframes floatShape {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-20px);
  }
}

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 992px) {
  .about-wrapper-modern {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .about-content-modern {
    text-align: center;
  }

  .about-stats-modern {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .about-title-modern {
    font-size: 2rem;
  }

  .about-desc-modern {
    max-width: 100%;
  }

  .stat-box-modern {
    flex: 1 1 100%;
  }
}



/* ================================
   SERVICE INTRO SECTION
================================ */
/* spacing */
.py-100 {
  padding: 90px 0;
}

/* COMMON BOX */
.service-box {
  position: relative;
  padding: 45px 40px;
  /* ⬅ reduced size */
  border-radius: 22px;
  overflow: hidden;
  height: 100%;
  transition: 0.45s ease;
}

/* headings */
.service-box h3 {
  font-size: 1.9rem;
  font-weight: 700;
  margin-bottom: 12px;
}

.service-box p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 18px;
  max-width: 460px;
}

/* bullet points */
.service-points {
  list-style: none;
  padding: 0;
  margin-bottom: 25px;
}

.service-points li {
  font-size: 0.95rem;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* hover */
.service-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.18);
}

/* ================= NETWORK ================= */
.network-box {
  background: linear-gradient(135deg, #0b1c2d, #112e42) !important;
  color: #fff;
}


.network-box .service-box h3,
.network-box h3 {
  color: #fff !important;
}

.network-box p {
  color: rgba(255, 255, 255, 0.85);
}

.network-box .service-points li {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.network-box .service-points li:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.network-box #particles-js {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.8 !important;
  mix-blend-mode: screen !important;
}

.network-box * {
  position: relative;
  z-index: 2;
}

/* ================= DEV ================= */
.dev-box {
  background: linear-gradient(135deg, #f8f9fa, #eef2f6);
  color: #0b1c2d;
}

/* dev illustration */
.dev-illustration {
  position: absolute;
  top: 25px;
  right: 30px;
  width: 200px;
  pointer-events: none;
}

/* code window */
.code-window {
  background: #0b1c2d;
  border-radius: 14px;
  padding: 12px;
  color: #7dd3fc;
  font-size: 11px;
  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
  animation: floatDev 6s ease-in-out infinite;
}

.code-window span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 5px;
  background: #ff5f56;
}

.code-window span:nth-child(2) {
  background: #ffbd2e;
}

.code-window span:nth-child(3) {
  background: #27c93f;
}

.code-window pre {
  margin-top: 8px;
  font-family: monospace;
}

/* floating icon */
.floating-icon {
  position: absolute;
  right: 0;
  bottom: -10px;
  font-size: 42px;
  font-weight: 700;
  color: rgba(11, 28, 45, 0.12);
  animation: floatDevAlt 7s infinite alternate;
}

/* animations */
@keyframes floatDev {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }

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

@keyframes floatDevAlt {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-18px);
  }
}

/* responsive */
@media(max-width:768px) {
  .dev-illustration {
    display: none;
  }
}


/* ================================
   SERVICE BOX (COMMON) end
================================ */

/* =========================================
   WHY CHOOSE US - PREMIUM BENTO GRID
========================================= */
.why-premium {
  padding: 120px 0;
  background: #0f172a;
  /* Deep tech dark blue */
  font-family: 'Poppins', sans-serif;
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Background Shine Effect */
.why-premium::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 600px;
  height: 500px;
  background: radial-gradient(circle, rgba(0, 180, 255, 0.08), transparent 70%);
  z-index: 0;
  pointer-events: none;
}

/* --- BENTO GRID LAYOUT --- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  /* Flexible rows */
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

/* --- Animations --- */
@keyframes floatGrid {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

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

@keyframes drawLine {
  0% {
    stroke-dashoffset: 100;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

/* Floating Cards Effect */
.grid-item {
  /* Existing styles */
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 30px;
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* Floating Animation */
  animation: floatGrid 6s ease-in-out infinite;
}

/* Staggered Delays for Floating */
.grid-item:nth-child(1) {
  animation-delay: 0s;
}

.grid-item:nth-child(2) {
  animation-delay: 1s;
}

.grid-item:nth-child(3) {
  animation-delay: 2s;
}

.grid-item:nth-child(4) {
  animation-delay: 0.5s;
}

.grid-item:nth-child(5) {
  animation-delay: 1.5s;
}

/* Grid Item Hover (pauses float & lifts) */
.grid-item:hover {
  animation-play-state: paused;
  background: rgba(255, 255, 255, 0.06);
  transform: translateY(-12px) scale(1.02);
  /* Enhanced lift */
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
  z-index: 2;
  /* Bring to front */
}

/* Graph Animation */
.trend-line svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.trend-line path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawLine 3s ease-out infinite alternate;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}


/* Specific Grid Placements */
.main-card {
  grid-column: span 2;
  grid-row: span 2;
  background-image: linear-gradient(rgba(15, 23, 42, 0.088), rgba(49, 74, 131, 0.9)), url('../images/source/038175e217e62658bc236f9a6e817e2f.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  border: 1px solid rgba(79, 227, 215, 0.2);
  transition: 0.3s;
}

.feature-card {
  grid-column: span 1;
  min-height: 220px;
}

.stat-card {
  grid-column: span 1;
  text-align: center;
  align-items: center;
}

.full-width-mobile {
  grid-column: span 1;
}

/* --- Content Styling --- */
.icon-box {
  width: 50px;
  height: 50px;
  background: rgba(0, 180, 255, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: #00b4ff;
  font-size: 1.4rem;
  transition: 0.3s;
}

.grid-item:hover .icon-box {
  background: #00b4ff;
  color: #fff;
  transform: scale(1.1);
}

.main-card h3 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 15px;
  background: linear-gradient(90deg, #fff, #a0aab5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.main-card p {
  color: #a0aab5;
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.stats-mini {
  display: flex;
  gap: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  margin-top: auto;
}

.stats-mini div strong {
  display: block;
  font-size: 1.5rem;
  color: #4fe3d7;
  font-weight: 700;
}

.stats-mini div span {
  font-size: 0.85rem;
  color: #8892b0;
}

/* Feature Card Typography */
.feature-card h4 {
  font-size: 1.2rem;
  color: #fff;
  margin-bottom: 10px;
  font-weight: 600;
}

.feature-card p {
  font-size: 0.9rem;
  color: #94a3b8;
  line-height: 1.5;
  margin: 0;
}

/* Stat Card Styling */
.bg-accent {
  background: linear-gradient(135deg, #00b4ff, #0072ff) !important;
  border: none;
}

.bg-accent h3 {
  font-size: 2.5rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 5px;
}

.bg-accent span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
  font-weight: 500;
}

.trend-line {
  margin-top: 15px;
  width: 100%;
  opacity: 0.6;
}

/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .main-card {
    grid-column: span 2;
  }

  .feature-card,
  .stat-card,
  .full-width-mobile {
    grid-column: span 1;
  }
}

@media (max-width: 768px) {
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .main-card,
  .feature-card,
  .stat-card,
  .full-width-mobile {
    grid-column: span 1;
  }

  .main-card h3 {
    font-size: 1.6rem;
  }

  .feature-card {
    min-height: auto;
  }
}

/* --- FLPCARD EFFECT --- */
.flip-container {
  perspective: 1000px;
  padding: 0;
  min-height: 250px;
  border: none !important;
  background: transparent !important;
  overflow: visible !important;
}

.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
}

.flip-container:hover .flip-inner {
  transform: rotateY(180deg);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 24px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Front Face Specifics */
.flip-front {
  background: rgba(255, 255, 255, 0.03);
  z-index: 2;
}

/* Back Face Specifics */
.flip-back {
  background: linear-gradient(135deg, #0f172a, #1a2639);
  /* Darker opaque back */
  transform: rotateY(180deg);
  border-color: #00b4ff;
  /* Highlight border */
}

/* Back content styles */
.flip-back p {
  font-size: 0.95rem;
  color: #cfd8e0;
  margin-top: 10px;
  line-height: 1.5;
}

.flip-back h4 {
  color: #4fe3d7;
  margin-bottom: 5px;
}

.bg-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 8rem;
  opacity: 0.05;
  color: #fff;
  z-index: 0;
  pointer-events: none;
}

.flip-indicator {
  margin-top: 15px;
  font-size: 0.9rem;
  opacity: 0.5;
  color: #4fe3d7;
  animation: pulse 2s infinite;
}

/* Pause Float on Hover so Flip is clean */
.flip-container:hover {
  animation-play-state: paused;
}


/* =========================================
   HOW IT WORKS - PROFESSIONAL REDESIGN
========================================= */
.how-work-premium {
  padding: 120px 0;
  background: #f8f9fa;
  /* Clean Professional Light Background */
  font-family: 'Poppins', sans-serif;
  position: relative;
  overflow: hidden;
}

/* --- Left Sidebar (Sticky) --- */
.process-sidebar {
  padding-right: 40px;
}

.premium-badge {
  display: inline-block;
  background: rgba(14, 120, 200, 0.1);
  color: #0e78c8;
  padding: 6px 14px;
  border-radius: 4px;
  text-transform: uppercase;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.section-title-premium {
  font-size: 3rem;
  font-weight: 800;
  color: #0b1c2d;
  line-height: 1.1;
  margin-bottom: 25px;
}

.highlight-text {
  color: #0072ff;
  position: relative;
  display: inline-block;
}

.highlight-text::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 100%;
  height: 8px;
  background: rgba(0, 114, 255, 0.15);
  z-index: -1;
  border-radius: 2px;
}

.section-desc-premium {
  font-size: 1.05rem;
  color: #5a6b7c;
  line-height: 1.8;
  margin-bottom: 40px;
}

.btn-premium-solid {
  display: inline-flex;
  align-items: center;
  background: #0b1c2d;
  color: #fff;
  padding: 15px 35px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 10px 20px rgba(11, 28, 45, 0.15);
}

.btn-premium-solid:hover {
  background: #0072ff;
  transform: translateY(-3px);
  color: #fff;
  box-shadow: 0 15px 30px rgba(0, 114, 255, 0.3);
}

.trust-badge {
  font-size: 0.9rem;
  color: #555;
  font-weight: 500;
}

/* --- Right Grid (Process Steps) --- */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.process-card {
  background: #fff;
  padding: 40px;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Hover Effect: Professional Lift */
.process-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 114, 255, 0.2);
}

/* Step Header */
.step-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 25px;
}

.step-number {
  font-size: 3rem;
  font-weight: 900;
  color: #f0f2f5;
  /* Very subtle number bg */
  line-height: 1;
  transition: 0.3s;
}

.process-card:hover .step-number {
  color: rgba(0, 114, 255, 0.05);
}

.step-icon {
  width: 60px;
  height: 60px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #0b1c2d;
  transition: 0.3s;
}

.process-card:hover .step-icon {
  background: #0072ff;
  color: #fff;
  transform: rotateY(180deg);
}

/* Content */
.process-card h3 {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0b1c2d;
  margin-bottom: 12px;
}

.process-card p {
  font-size: 0.95rem;
  color: #6c757d;
  line-height: 1.6;
  margin: 0;
}

/* Connector Line (Desktop Only) */
.step-connector {
  position: absolute;
  right: -15px;
  top: 50%;
  width: 30px;
  height: 2px;
  background: #e9ecef;
  z-index: 1;
  display: none;
  /* Hidden by default, enable if strict horizontal */
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .process-sidebar {
    padding-right: 0;
    margin-bottom: 50px;
    text-align: center;
  }

  .section-title-premium {
    font-size: 2.5rem;
  }
}

@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
    /* Stack cards on mobile */
  }

  .process-card {
    padding: 30px;
  }
}

.how-work {
  position: relative;
  padding: 100px 0;
  font-family: 'Poppins', sans-serif;
}

.how-work h2 {
  font-size: 2.6rem;
  font-weight: 700;
  color: #0d467e;
  margin-bottom: 10px;
}

/* .grid-wave {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(255,152,0,.15) 1px, transparent 1px),
    linear-gradient(rgba(255,152,0,.15) 1px, transparent 1px);
  background-size: 40px 40px;
  animation: waveMove 6s linear infinite;
  z-index: 0;
} */

@keyframes waveMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 40px 40px;
  }
}

/* ================================
   STEP BOX
================================ */
/* ================================
   SECTION HEADER
================================ */
.section-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: #0e78c8;
  /* Primary logo color */
  position: relative;
}

.section-title::after {
  content: "";
  display: block;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #2271d0, #021144);
  margin: 10px auto 0;
  border-radius: 2px;
}

.section-subtitle {
  max-width: 650px;
  margin: 15px auto 0;
  font-size: 1.05rem;
  color: #555;
  line-height: 1.6;
}

/* ================================
   STEP CARD
================================ */
.step-card {
  position: relative;
  padding: 45px 25px;
  border-radius: 25px;
  background: linear-gradient(145deg, #fff, #fef8f8);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  transition: all 0.5s ease;
  height: 100%;
}

/* Glow shadow on hover */
.step-card:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}

/* ================================
   STEP NUMBER
================================ */
.step-number {
  position: absolute;
  top: -20px;
  right: 20px;
  font-size: 3rem;
  font-weight: 800;
  color: rgba(122, 28, 28, 0.15);
  /* softer primary color */
}

/* ================================
   ICON
================================ */
.step-card i {
  font-size: 3.2rem;
  color: #0e78c8;
  margin-bottom: 20px;
  display: inline-block;
  transition: all 0.4s ease;
}

.step-card:hover i {
  transform: rotateY(180deg) scale(1.2);
  color: #031c2f;
}

/* ================================
   TEXT
================================ */
.step-card h5 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #0e78c8;
  margin-bottom: 12px;
}

.step-card p {
  font-size: 0.95rem;
  color: #555;
  line-height: 1.6;
}

/* ================================
   TIMELINE CONNECTOR (REMOVED)
================================ */
/* Removed the horizontal connector line */

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 767px) {
  .step-card {
    margin-bottom: 30px;
  }
}

/* ================================
   HOW IT WORKS SECTION end
================================ */


/* ================================
   CTA SECTION
================================ */
/* ================================
   CTA SECTION
================================ */
/* ================================
   CTA SECTION BASE
================================ */
.cta-section {
  position: relative;
  padding: 100px 20px;
  color: #ffffff;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;

  background-image: url(../images/backround/2151252529.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* ================================
   OVERLAY FOR TEXT VISIBILITY
================================ */
.cta-section::before {
  content: "";
  position: absolute;
  inset: 0;
  /* top:0; left:0; right:0; bottom:0; */
  background: rgba(0, 0, 0, 0.55);
  /* dark overlay for contrast */
  z-index: 2;
  /* below content but above background */
  pointer-events: none;
}

/* ================================
   THREE.JS BACKGROUND
================================ */
#three-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* ================================
   CTA CONTENT
================================ */
.cta-content {
  position: relative;
  z-index: 3;
  /* above overlay and blobs */
  text-align: center;
}

/* ================================
   FLOATING BLOBS
================================ */
.cta-section::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: #0e78c8;
  filter: blur(80px);
  border-radius: 50%;
  top: -120px;
  left: -120px;
  animation: ctaFloat 8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

/* You can add another blob as another element if needed */


/* Three.js background */

/* CTA content wrapper */


/* ================================
   DECORATIVE FLOATING BLOBS
================================ */
/* .cta-section::before,
.cta-section::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  background: rgba(255, 193, 7, 0.2);
  filter: blur(80px);
  border-radius: 50%;
  animation: ctaFloat 8s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
} */

.cta-section::before {
  top: -120px;
  left: -120px;
}

.cta-section::after {
  bottom: -120px;
  right: -120px;
  animation-delay: 3s;
}

/* ================================
   HEADING
================================ */
.cta-section h2 {
  font-size: 2.8rem;
  font-weight: 700;
  margin-bottom: 30px;
}

/* ================================
   CTA BUTTON
================================ */
.cta-section .btn-primary {
  padding: 16px 46px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  background: linear-gradient(45deg, #0ec2c8, #0b66ac);
  border: none;
  color: #000;
  transition: all 0.4s ease;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

/* Hover */
.cta-section .btn-primary:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6);
}

/* Pulse ring */
.cta-section .btn-primary::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50px;
  border: 2px solid rgba(33, 183, 252, 0.5);
  opacity: 0;
  animation: pulse 2.5s infinite;
  pointer-events: none;
}

/* ================================
   ANIMATIONS
================================ */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }

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

@keyframes ctaFloat {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-30px);
  }

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

/* ================================
   RESPONSIVE
================================ */
@media (max-width: 768px) {
  .cta-section {
    padding: 80px 20px;
  }

  .cta-section h2 {
    font-size: 2.1rem;
  }
}

@media (max-width: 480px) {
  .cta-section h2 {
    font-size: 1.9rem;
  }

  .cta-section .btn-primary {
    padding: 14px 36px;
    font-size: 1rem;
  }
}

/* ================================
   CTA SECTION end
======================= ========= */



/* testimonial section start */
/* =========================================
   TESTIMONIAL - SOCIAL COMMENT STLE
========================================= */
.testimonial-social {
  background: transparent;
  /* Changed from #ffffff to see child background */
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
  position: relative;
  min-height: 500px;
}

#testimonial-3d-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  /* Changed from -1 to be above parent's base but behind content */
  background: radial-gradient(circle at center, #ffffff 0%, #f0f4f8 100%);
  overflow: hidden;
}

/* 3D Clay-Line Shapes */
.shape-3d {
  position: absolute;
  pointer-events: none;
  animation: floatClay 25s infinite ease-in-out;
  opacity: 0.4;
}

.clay-line {
  background: linear-gradient(135deg, rgba(14, 120, 200, 0.2) 0%, rgba(14, 120, 200, 0.05) 100%);
  border-radius: 50% 20% 50% 20% / 50% 20% 50% 20%;
  box-shadow: 10px 10px 30px rgba(14, 120, 200, 0.1), inset -5px -5px 15px rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.6);
  position: relative;
  backdrop-filter: blur(4px);
  animation: organicMorph 8s infinite alternate ease-in-out;
}

@keyframes floatClay {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  33% {
    transform: translate(60px, -80px) rotate(120deg) scale(1.1);
  }

  66% {
    transform: translate(-40px, 40px) rotate(240deg) scale(0.9);
  }

  100% {
    transform: translate(0, 0) rotate(360deg) scale(1);
  }
}

@keyframes organicMorph {
  0% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }

  50% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }

  100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
}

.testimonialSwiper {
  padding: 40px 20px 60px;
  /* Space for shadow & pagination */
  overflow: visible !important;
  /* Allow zooming outside container */
  position: relative;
  z-index: 1;
}

/* Social Card */
.social-comment-card {
  background: #fff;
  border-radius: 12px;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid #e1e4e8;
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

/* HOVER: ZOOM EFFECT */
.social-comment-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
  z-index: 10;
}

/* Header */
.card-header-social {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.user-avatar-wrap {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  padding: 3px;
  background: linear-gradient(45deg, #0072ff, #00c6ff);
  /* Instagram-like ring */
}

.user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  transition: transform 0.8s ease;
}

/* HOVER: ROTATE AVATAR */
.social-comment-card:hover .user-avatar {
  transform: rotate(360deg);
}

.user-info h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a2639;
  margin: 0;
}

.user-info span {
  font-size: 0.85rem;
  color: #6c757d;
}

.social-icon {
  margin-left: auto;
  font-size: 1.2rem;
  color: #0077b5;
  /* LinkedIn Blue default */
  opacity: 0.8;
}

/* Body */
.card-body-social p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
  margin-bottom: 20px;
}

.hashtag {
  color: #0072ff;
  font-weight: 600;
}

/* Rating Stars */
.rating-stars {
  display: flex;
  gap: 3px;
  color: #ffc107;
  font-size: 0.85rem;
}

.timestamp {
  margin-left: auto;
  font-size: 0.8rem;
  color: #90949c;
}

/* 3D BG Animation - Replaced Blobs with Shapes */
.testimonial-social .section-title-premium {
  color: #0b1c2d;
  /* Dark text for white theme */
}

.testimonial-social .section-desc-premium {
  color: #5a6b7c;
  /* Muted dark text */
}

/* Swiper Styling */
.swiper-pagination-bullet {
  background: #cbd2d9;
  opacity: 1;
  width: 10px;
  height: 10px;
  transition: 0.3s;
}

.swiper-pagination-bullet-active {
  background: #0072ff;
  width: 25px;
  /* Long active dot */
  border-radius: 5px;
}

.testimonialSwiper .swiper-button-next,
.testimonialSwiper .swiper-button-prev {
  color: #0b1c2d;
  background: #fff;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  /* Slightly stronger shadow for white bg */
  transition: 0.3s;
}

.testimonialSwiper .swiper-button-next:after,
.testimonialSwiper .swiper-button-prev:after {
  font-size: 1.2rem;
  font-weight: bold;
}

.testimonialSwiper .swiper-button-next:hover,
.testimonialSwiper .swiper-button-prev:hover {
  background: #0072ff;
  color: #fff;
  transform: scale(1.1);
}

@media (max-width: 768px) {

  .testimonialSwiper .swiper-button-next,
  .testimonialSwiper .swiper-button-prev {
    display: none;
    /* Hide arrows on mobile for cleaner look */
  }
}


/* testimonial section end */

/* gallery section start */

.gallery-section {
  background: #f8f9fa;
}

.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 15px;
  cursor: pointer;
}

.gallery-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(11, 28, 45, 0.85), rgba(17, 46, 66, 0.9));
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: 0.5s;
  text-align: center;
  padding: 20px;
}

.gallery-overlay span {
  background: #2ad9e6;
  color: #000;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 10px;
}

.gallery-card:hover img {
  transform: scale(1.15);
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

/* Mobile Optimization */
@media(max-width:768px) {
  .gallery-card img {
    height: 220px;
  }
}

/* ================================
   GALLERY EXPLORE MORE BUTTON
================================ */
.btn-gallery {
  display: inline-block;
  padding: 14px 40px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 50px;
  background: linear-gradient(45deg, #0ec2c8, #0b66ac);

  color: #000;
  text-decoration: none;
  transition: all 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.btn-gallery:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}


/* gallery section end */


/* TECHNOLOGY PARTNERS - HIERARCHICAL REDESIGN */
.partners-premium {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.partner-card-premium {
  background: #fff;
  border: 1px solid rgba(0, 114, 255, 0.1);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  /* Stack image and name */
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  cursor: pointer;
  filter: grayscale(0%);
  /* Full color at all times */
  opacity: 1;
  /* Fully visible */
}

.partner-card-premium img {
  width: auto;
  max-width: 90%;
  object-fit: contain;
  transition: transform 0.4s ease;
  margin-bottom: 15px;
  /* Space for name */
}

/* TIER SPECIFIC IMAGE HEIGHTS */
.partner-card-premium.large img {
  height: 100px;
}

.partner-card-premium.medium img {
  height: 60px;
}

.partner-card-premium.small img {
  height: 40px;
}

.partner-name {
  color: #0b2545;
  /* Modern Deep Navy/Blue */
  font-size: 0.9rem;
  font-weight: 600;
  opacity: 1;
  /* Permanently visible */
  transition: 0.4s;
  text-align: center;
}

/* TIER SPECIFIC SIZES */
.partner-card-premium.large {
  min-height: 220px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.partner-card-premium.medium {
  min-height: 160px;
  padding: 20px;
}

.partner-card-premium.small {
  min-height: 120px;
  padding: 15px;
}

.partner-card-premium.small .partner-name {
  font-size: 0.8rem;
}

/* HOVER EFFECTS */
.partner-card-premium:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 114, 255, 0.12);
  border-color: rgba(0, 114, 255, 0.4);
}

.partner-card-premium:hover .partner-name {
  color: #0072ff;
  /* Highlighted blue on hover */
}

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

/* Mobile Adjustments */
@media (max-width: 768px) {
  .partner-card-premium.large {
    min-height: 140px;
  }

  .partner-card-premium.medium {
    min-height: 100px;
  }

  .partner-card-premium.small {
    min-height: 70px;
  }
}

/* =========================================
   CONTACT & LEAD GENERATION - 3D PREMIUM (DARK THEME)
========================================= */
.contact-premium-leadgen {
  background: linear-gradient(135deg, #0b1c2d 0%, #1a2a3a 100%);
  position: relative;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
}

.tech-mesh-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 180, 255, 0.1) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.3;
  pointer-events: none;
}

.leadgen-content-wrap {
  position: relative;
  z-index: 2;
}

.leadgen-content-wrap .premium-title {
  color: #ffffff;
  font-size: 3rem;
  line-height: 1.2;
}

.leadgen-content-wrap .premium-desc {
  color: #b0c0d0;
  font-size: 1.1rem;
  line-height: 1.7;
  border-left: 4px solid #00b4ff;
  padding-left: 20px;
}

/* 3D Visual Decoration (Isolated Icon - Centered Background) */
.form-decoration-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  z-index: 1;
  /* Behind the form content */
  pointer-events: none;
  opacity: 0.8;
  /* HIGH VISIBILITY: As requested */
  -webkit-mask-image: radial-gradient(circle, black 60%, transparent 85%);
  mask-image: radial-gradient(circle, black 60%, transparent 85%);
}

.rotating-icon {
  width: 100%;
  animation: rotateContact 35s linear infinite;
  filter: drop-shadow(0 0 30px rgba(0, 180, 255, 0.4));
  mix-blend-mode: screen;
}

@keyframes rotateContact {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 3D FORM WRAPPER (DARK) */
.form-3d-perspective {
  perspective: 1500px;
  position: relative;
}

.form-3d-wrapper {
  background: rgba(11, 28, 45, 0.9);
  /* DARKER: To maintain text legibility with high image opacity */
  backdrop-filter: blur(1px);
  /* SHARP: Makes the image behind very clear */
  padding: 40px;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.5);
  transform-style: preserve-3d;
  transition: all 0.3s ease;
  position: relative;
  z-index: 5;
  /* Form fields in front */
}

.form-3d-wrapper:hover {
  border-color: rgba(0, 180, 255, 0.3);
  box-shadow: 0 40px 120px rgba(0, 180, 255, 0.15);
}

/* Premium Floating Inputs (DARK) */
.form-floating-custom {
  position: relative;
  margin-bottom: 5px;
}

.form-floating-custom input,
.form-floating-custom textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  /* Subtle background for input surface */
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  padding: 15px 10px;
  font-size: 1rem;
  color: #ffffff;
  transition: all 0.3s ease;
  outline: none;
  border-radius: 4px 4px 0 0;
}

.form-floating-custom input:focus,
.form-floating-custom textarea:focus {
  background: rgba(0, 0, 0, 0.3);
  /* DARKER FOCUS: Maximizes contrast while typing */
}

.form-floating-custom textarea {
  min-height: 100px;
}

.form-floating-custom label {
  position: absolute;
  left: 0;
  top: 15px;
  color: #8a99a8;
  pointer-events: none;
  transition: all 0.3s ease;
}

.form-floating-custom input:focus~label,
.form-floating-custom input:not(:placeholder-shown)~label,
.form-floating-custom textarea:focus~label,
.form-floating-custom textarea:not(:placeholder-shown)~label {
  top: -15px;
  font-size: 0.85rem;
  color: #00b4ff;
  font-weight: 600;
}

.input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00b4ff, #4fe3d7);
  transition: width 0.4s ease;
}

.form-floating-custom input:focus~.input-line,
.form-floating-custom textarea:focus~.input-line {
  width: 100%;
}

/* Premium Button (DARK) */
.btn-premium-send {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 114, 255, 0.3);
  transition: all 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-premium-send:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 114, 255, 0.5);
}

.btn-premium-send i {
  transition: transform 0.4s ease;
}

.btn-premium-send:hover i {
  transform: translate(5px, -5px);
}

/* Mobile Adjustments */
@media (max-width: 991px) {
  .leadgen-content-wrap .premium-title {
    font-size: 2.2rem;
  }

  .form-3d-wrapper {
    padding: 30px;
  }

  .contact-visual-wrap {
    margin: 0 auto;
  }
}


/* FOOTER */
.footer-section {
  background: #f9f9f9;
  color: #333;
  padding: 60px 20px 30px;
  font-family: 'Poppins', sans-serif;
}

.footer-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;
  margin-bottom: 30px;
}

.footer-logo {
  font-size: 1.8rem;
  font-weight: 700;
  color: #112e42;
  text-decoration: none;
}

.footer-logo span {
  color: #00b4ff;
}

.footer-col h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 15px;
  color: #112e42;
}

.footer-col p {
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 10px;
}

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

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

.footer-col ul li a {
  color: #333;
  text-decoration: none;
  transition: 0.3s;
}

.footer-col ul li a:hover {
  color: #00b4ff;
}

.footer-social a {
  display: inline-block;
  margin-right: 12px;
  color: #333;
  font-size: 1.1rem;
  transition: 0.3s;
}

.footer-social a:hover {
  color: #00b4ff;
}

.footer-bottom {
  border-top: 1px solid #ddd;
  text-align: center;
  padding-top: 15px;
  font-size: 0.9rem;
  color: #777;
}

/* =========================================
   TOP HEADER BAR (DARK THEME)
========================================= */
.top-header-bar {
  background: #0b1c2d;
  color: #ffffff;
  padding: 8px 0;
  font-size: 0.85rem;
  font-family: 'Poppins', sans-serif;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: hidden;
  max-width: 100vw;
}

.top-header-bar a {
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 500;
  opacity: 0.9;
}

.top-header-bar a:hover {
  color: #00b4ff;
  opacity: 1;
}

.top-header-bar i {
  color: #00b4ff;
  margin-right: 6px;
}

.top-header-social {
  display: flex;
  gap: 12px;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 15px;
  margin-left: 10px;
}

.top-header-social a {
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 0.75rem;
  transition: all 0.4s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.top-header-social a:hover {
  background: #ffffff;
  color: #0b1c2d;
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Responsive Top Header */
@media (max-width: 991px) {
  .top-header-left {
    display: none;
    /* Hide hours/location on smaller tablets */
  }
}

@media (max-width: 576px) {
  .top-header-bar {
    display: none;
    /* Hide entirely on small mobile to save vertical space */
  }
}

@media (max-width: 991px) {
  .top-header-bar .container {
    padding-left: 10px;
    padding-right: 10px;
    max-width: 100%;
  }

  .top-header-right {
    flex-wrap: nowrap;
    overflow: hidden;
  }

  .top-header-right a {
    font-size: 0.75rem;
    white-space: nowrap;
  }
}

/* =========================================
   FOOTER - PREMIUM WHITE THEME (VIBRANT)
========================================= */
.footer-premium-white {
  background: radial-gradient(circle at top right, #ffffff, #f0f7ff 50%, #e1efff 100%);
  padding: 100px 0 0;
  position: relative;
  font-family: 'Poppins', sans-serif;
  color: #5a6b7c;
  overflow: hidden;
}

/* More Vivid Bottom-to-Left Gradient Glow */
.footer-bottom-gradient {
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 650px;
  height: 300px;
  /* background: radial-gradient(circle at bottom left, rgba(0, 114, 255, 0.2) 0%, rgba(0, 198, 255, 0.1) 50%, transparent 10%); */
  pointer-events: none;
}

.footer-bottom-bar-accent {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #0072ff 0%, #00c6ff 20%, transparent 50%);
}

.footer-top-accent {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 114, 255, 0.15), transparent);
}

.footer-main-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr 1.2fr;
  gap: 40px;
  padding-bottom: 60px;
  position: relative;
  z-index: 2;
}

.footer-logo-premium {
  display: inline-block;
  margin-bottom: 25px;
  transition: transform 0.3s ease;
}

.footer-logo-premium:hover {
  transform: scale(1.05);
}

.footer-logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-about-text {
  font-size: 1rem;
  line-height: 1.8;
  color: #5a6b7c;
  max-width: 280px;
}

.footer-title {
  color: #0b1c2d;
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 30px;
  position: relative;
}

.footer-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 30px;
  height: 3px;
  background: #0072ff;
  border-radius: 2px;
}

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

.footer-list li,
.footer-contact-list li {
  margin-bottom: 12px;
  font-size: 0.95rem;
}

.footer-list a {
  color: #5a6b7c;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: inline-flex;
  align-items: center;
}

.footer-list a:hover {
  color: #0072ff;
  transform: translateX(5px);
}

.footer-contact-list a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-contact-list a:hover {
  color: #0072ff;
}

/* New Contact Banner Styles */
.footer-contact-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  border: 1px solid rgba(0, 114, 255, 0.1);
  box-shadow: 0 20px 50px rgba(0, 114, 255, 0.08);
  border-radius: 30px;
  padding: 35px 50px;
  margin-bottom: 60px;
  position: relative;
  z-index: 5;
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
}

.contact-item-box {
  display: flex;
  align-items: center;
  gap: 20px;
}

.contact-item-box .icon-wrap {
  width: 55px;
  height: 55px;
  background: rgba(0, 114, 255, 0.08);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0072ff;
  font-size: 20px;
  transition: all 0.4s ease;
}

.contact-item-box:hover .icon-wrap {
  background: #0072ff;
  color: #fff;
  transform: translateY(-5px) rotate(10deg);
}

.contact-text span {
  display: block;
  font-size: 0.8rem;
  color: #8a99a8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.contact-text a,
.contact-text p {
  font-size: 1.05rem;
  color: #0b1c2d;
  font-weight: 700;
  text-decoration: none;
  margin: 0;
  transition: color 0.3s ease;
}

.contact-text a:hover {
  color: #0072ff;
}

.btn-footer-contact {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #fff !important;
  padding: 16px 32px;
  border-radius: 15px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.4s ease;
  box-shadow: 0 10px 25px rgba(0, 114, 255, 0.25);
}

.btn-footer-contact:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 114, 255, 0.35);
}

/* Bottom Bar & Glass Socials */
.footer-bottom-bar {
  border-top: 1px solid rgba(0, 114, 255, 0.08);
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 3;
}

.footer-social-bar {
  display: flex;
  gap: 15px;
}

.social-link {
  width: 45px;
  height: 45px;
  background: #ffffff;
  color: #0b1c2d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(0, 114, 255, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

.social-link:hover {
  background: linear-gradient(135deg, #0072ff, #00c6ff);
  color: #ffffff;
  transform: translateY(-5px) scale(1.1);
  box-shadow: 0 10px 20px rgba(0, 114, 255, 0.2);
  border-color: transparent;
}

.footer-copyright p {
  margin: 0;
  font-size: 14px;
  color: #8a99a8;
  font-weight: 500;
}

/* Responsive Footer */
@media (max-width: 1200px) {
  .footer-main-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 30px;
  }

  .footer-contact-banner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 40px;
  }
}

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

@media (max-width: 768px) {
  .footer-contact-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }
}

@media (max-width: 576px) {
  .footer-main-grid {
    grid-template-columns: 1fr;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 25px;
    text-align: center;
  }
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .footer-wrapper {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .footer-wrapper {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}

/* =========================================
   PREMIUM ABOUT SECTION REDESIGN
========================================= */
.about-section-premium {
  position: relative;
  padding: 140px 0;
  background: #0b0f19;
  overflow: hidden;
  font-family: 'Poppins', sans-serif;
  color: #fff;
}

/* Background Effect */
.tech-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(11, 15, 25, 0.9), rgba(11, 15, 25, 0.9)),
    url('https://www.transparenttextures.com/patterns/cubes.png');
  /* subtle pattern */
  background-attachment: fixed;
  z-index: 0;
}

.about-wrapper-premium {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 80px;
}

/* ================= LEFT CONTENT ================= */

/* Badge */
.badge-container {
  margin-bottom: 20px;
}

.premium-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(0, 180, 255, 0.1);
  border: 1px solid rgba(0, 180, 255, 0.3);
  border-radius: 4px;
  color: #00b4ff;
  font-size: 0.85rem;
  letter-spacing: 2px;
  font-weight: 600;
  text-transform: uppercase;
}

/* Heading */
.premium-title {
  font-size: 3.5rem;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 30px;
  color: #fff;
}

.gradient-text {
  background: linear-gradient(90deg, #00b4ff, #4fe3d7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.typewriter-text {
  font-family: 'Courier New', monospace;
  color: #e6ebef;
  border-right: 3px solid #00b4ff;
  padding-right: 5px;
  animation: blink 0.8s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* Description */
.premium-desc {
  font-size: 1.15rem;
  color: #a0aab5;
  line-height: 1.8;
  margin-bottom: 40px;
  max-width: 550px;
  border-left: 3px solid #1a2639;
  padding-left: 20px;
}

.premium-desc strong {
  color: #fff;
}

/* Stats Row */
.stats-row-premium {
  display: flex;
  gap: 30px;
  margin-bottom: 45px;
}

.stat-card {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(10px);
  padding: 20px 25px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-width: 140px;
  transition: 0.4s;
}

.stat-card:hover {
  transform: translateY(-5px);
  border-color: #00b4ff;
  box-shadow: 0 10px 30px rgba(0, 180, 255, 0.15);
}

.stat-card h3 {
  font-size: 2.2rem;
  font-weight: 700;
  color: #4fe3d7;
  margin-bottom: 5px;
}

.stat-card p {
  font-size: 0.9rem;
  color: #cfd8e0;
  line-height: 1.4;
  margin: 0;
}

/* Button */
.btn-premium-glow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 36px;
  background: linear-gradient(90deg, #0072ff, #00c6ff);
  color: #fff;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.05rem;
  transition: 0.4s;
  box-shadow: 0 10px 25px rgba(0, 114, 255, 0.3);
}

.btn-premium-glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 114, 255, 0.5);
}

/* ================= RIGHT VISUAL ================= */
.about-visual-premium {
  position: relative;
  display: flex;
  justify-content: center;
}

.image-container-3d {
  position: relative;
  width: 100%;
  max-width: 500px;
}

.main-img-box {
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(14, 29, 63, 0.5);
  animation: floatMain 6s ease-in-out infinite;
  z-index: 5;
}

.main-img {
  width: 100%;
  display: block;
}

/* Floating Elements */
.float-card {
  position: absolute;
  background: #162235;
  padding: 12px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
  font-size: 0.9rem;
  z-index: 6;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.float-card i {
  font-size: 1.2rem;
}

.card-1 {
  top: 40px;
  left: -30px;
  color: #4fe3d7;
  animation: floatCard 5s infinite alternate;
}

.card-2 {
  bottom: 60px;
  right: -20px;
  color: #00b4ff;
  animation: floatCard 7s infinite alternate-reverse;
}

/* Circle BG */
.tech-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 50%;
  z-index: 1;
}

.tech-circle::before {
  content: '';
  position: absolute;
  inset: -15px;
  border: 1px dashed rgba(0, 180, 255, 0.2);
  border-radius: 50%;
  animation: rotateCircle 20s linear infinite;
}

/* Animations */
@keyframes floatMain {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-15px);
  }

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

@keyframes floatCard {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

@keyframes rotateCircle {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Responsive */
@media (max-width: 991px) {
  .about-wrapper-premium {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .premium-desc {
    margin: 0 auto 40px;
    border-left: none;
    padding-left: 0;
  }

  .stats-row-premium {
    justify-content: center;
    flex-wrap: wrap;
  }

  .image-container-3d {
    margin: 0 auto;
  }

  .premium-title {
    font-size: 2.5rem;
  }

  .float-card {
    display: none;
  }

  /* Hide floating cards on mobile to prevent overflow */
}

/* =========================================
   SERVICE SECTION (DARK TECH THEME & GRAVITY ANIMATION)
========================================= */
.service-intro {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at left, #ffffff 0%, #bdc5ef 100%);
  /* Deep Dark Tech Theme */
  z-index: 1;
  padding-bottom: 80px;
}

.relative-z2 {
  position: relative;
  z-index: 2;
}

/* --- GRAVITY ORB ANIMATION (Antigravity Feel) --- */
#service-3d-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  perspective: 1200px;
  overflow: hidden;
}

.dots-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800px;
  height: 800px;
  transform: translate(-50%, -50%) rotateX(60deg);
  transform-style: preserve-3d;
  animation: orbitRotate 30s linear infinite;
}

.dot-circle {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(0, 180, 255, 0.1);
  border-radius: 50%;
  transform-style: preserve-3d;
}

.dot {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #00b4ff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 180, 255, 0.8);
  opacity: 0;
  animation: floatUp 10s linear infinite;
}

/* Specific Particle Positions & Delays for Randomness */
.dot:nth-child(1) {
  left: 10%;
  animation-duration: 8s;
  animation-delay: 0s;
}

.dot:nth-child(2) {
  left: 30%;
  animation-duration: 12s;
  animation-delay: 2s;
  width: 6px;
  height: 6px;
}

.dot:nth-child(3) {
  left: 50%;
  animation-duration: 10s;
  animation-delay: 1s;
}

.dot:nth-child(4) {
  left: 70%;
  animation-duration: 14s;
  animation-delay: 3s;
  width: 3px;
  height: 3px;
}

.dot:nth-child(5) {
  left: 90%;
  animation-duration: 9s;
  animation-delay: 0.5s;
}

.dot:nth-child(6) {
  left: 20%;
  animation-duration: 11s;
  animation-delay: 4s;
}

.dot:nth-child(7) {
  left: 80%;
  animation-duration: 13s;
  animation-delay: 1.5s;
  background: #4fe3d7;
  box-shadow: 0 0 10px rgba(79, 227, 215, 0.8);
}

.dot:nth-child(8) {
  left: 40%;
  animation-duration: 15s;
  animation-delay: 2.5s;
}

/* Rings/Orbs logic modification for Antigravity feel */
.ring-1,
.ring-2,
.ring-3 {
  border: none;
}

@keyframes floatUp {
  0% {
    transform: translateY(110vh) scale(0.5);
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 0.8;
  }

  100% {
    transform: translateY(-10vh) scale(1);
    opacity: 0;
  }
}

/* --- SERVICE BOXES (White Theme) --- */
.service-box {
  background: #ffffff;
  border-radius: 20px;
  padding: 40px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: none;
}

.service-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 180, 255, 0.3);
}

.service-box h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
  /* Dark Text for White Boxes */
  color: #1a2639;
}

.service-box p {
  color: #6c757d;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* List Items */
.service-points li {
  color: #495057;
  padding: 10px 15px;
  border-radius: 8px;
  transition: 0.3s;
  background: #f8f9fa;
  margin-bottom: 8px;
  border-left: 2px solid transparent;
}

.service-points li:hover {
  background: #e7f5ff;
  color: #0072ff;
  border-left-color: #0072ff;
  transform: translateX(5px);
}

/* Feature Chips (Marquee) - Enhanced Style */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  margin-top: 60px;
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
  display: inline-flex;
  gap: 30px;
  animation: marqueeScroll 25s linear infinite;
  padding-left: 100%;
}

.feature-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(3, 169, 246, 0.364);
  /* Slightly more visible glass */
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 15px 30px;
  /* Larger padding */
  border-radius: 50px;
  color: #fff;
  backdrop-filter: blur(10px);
  transition: 0.4s all ease;
  min-width: 220px;
  /* Uniform width feel */
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Attractive Hover Effect for Chips */
.feature-chip:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 180, 255, 0.25);
  border-color: #4fe3d7;
  /* Teal glow on hover */
}

.feature-chip i {
  font-size: 1.2rem;
  color: #281b3e;
  /* Teal accent */
  transition: 0.3s;
}

.feature-chip:hover i {
  color: #fff;
  transform: scale(1.1);
}

.feature-chip span {
  font-weight: 600;
  font-size: 1rem;
  color: #e0e6ed;
  letter-spacing: 0.5px;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

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

/* Buttons inside white box */
.service-box .btn-outline-light {
  color: #0072ff;
  border-color: #0072ff;
}

.service-box .btn-outline-light:hover {
  background: #0072ff;
  color: #fff;
  box-shadow: 0 5px 15px rgba(0, 114, 255, 0.3);
}

.service-box .btn-outline-dark {
  color: #343a40;
  border-color: #343a40;
}

.service-box .btn-outline-dark:hover {
  background: #343a40;
  color: #fff;
}

/* Enhance ParticlesJS Container visibility */
/* Enhance ParticlesJS Container visibility */
#particles-js {
  opacity: 0.1;
  /* Default for white boxes (overridden for .network-box) */
  mix-blend-mode: multiply;
}

/* =========================================
   SMART SOLUTIONS SECTION (PREMIUM WHITE)
========================================= */
.smart-solutions-section {
  padding: 140px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
  color: #1a1a1a;
}

/* 3D Visual Accents (Logo Theme) */
.smart-bg-arc {
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);
  width: 150%;
  height: 700px;
  background: radial-gradient(circle at center, rgba(79, 227, 215, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  box-shadow: inset 0 0 150px rgba(79, 227, 215, 0.05);
}

.smart-bg-mesh {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 1.5px 1.5px, rgba(14, 120, 200, 0.15) 1.5px, transparent 0);
  background-size: 60px 60px;
  opacity: 0.6;
  z-index: 1;
}

/* 3D Floating Assets (Integrated from Banner) */
.smart-3d-asset {
  position: absolute;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(14, 120, 200, 0.15));
  opacity: 0.7;
  transition: all 0.5s ease;
}

.smart-3d-1 {
  width: 450px;
  top: -100px;
  left: -150px;
  transform: rotate(-15deg);
}

.smart-3d-2 {
  width: 240px;
  bottom: -50px;
  right: -100px;
  transform: rotate(15deg);
}

.smart-solutions-section .container {
  position: relative;
  z-index: 5;
}

/* Header Enhancements */
.smart-header {
  text-align: center;
  margin-bottom: 90px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.smart-header h2 {
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 800;
  color: #0b1c2d;
  line-height: 1.1;
  margin-bottom: 30px;
  letter-spacing: -1px;
}

.smart-header h2 .highlight-gradient {
  background: linear-gradient(135deg, #0e78c8, #4fe3d7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.smart-header p {
  font-size: 1.25rem;
  color: #5a6b7c;
  line-height: 1.7;
  font-weight: 400;
}

/* Smart Grid & Cards */
.smart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 35px;
}

.smart-card {
  background: #ffffff;
  border-radius: 30px;
  padding: 50px 35px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(14, 120, 200, 0.08);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 2;
}

.smart-card:hover {
  transform: translateY(-20px) scale(1.02);
  background: #ffffff;
  border-color: #0e78c8;
  box-shadow: 0 30px 70px rgba(14, 120, 200, 0.12);
}

/* Card Visuals */
.smart-card-icon {
  width: 70px;
  height: 70px;
  background: rgba(14, 120, 200, 0.04);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: #0e78c8;
  margin-bottom: 35px;
  transition: 0.4s;
}

.smart-card:hover .smart-card-icon {
  background: #0e78c8;
  color: #fff;
  transform: rotateY(180deg);
}

.smart-card-num {
  position: absolute;
  top: 50px;
  right: 35px;
  font-size: 1.5rem;
  font-weight: 900;
  color: rgba(14, 120, 200, 0.1);
  transition: 0.4s;
  line-height: 1;
}

.smart-card:hover .smart-card-num {
  color: #4fe3d7;
  transform: scale(1.2);
}

.smart-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0b1c2d;
  margin-bottom: 18px;
  transition: 0.3s;
}

.smart-card:hover h3 {
  color: #0e78c8;
}

.smart-card p {
  font-size: 1.05rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

/* Floating Shapes (Premium) */
.smart-shape-1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(79, 227, 215, 0.08) 0%, transparent 70%);
  top: -50px;
  left: -100px;
}

.smart-shape-2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(14, 120, 200, 0.08) 0%, transparent 70%);
  bottom: -100px;
  right: -100px;
}

@media (max-width: 1400px) {
  .smart-grid {
    gap: 20px;
  }
}

@media (max-width: 1200px) {
  .smart-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

@media (max-width: 768px) {
  .smart-grid {
    grid-template-columns: 1fr;
  }

  .smart-header h2 {
    font-size: 2.8rem;
  }
}




/* =========================================
   PREMIUM UX ENHANCEMENTS
========================================= */

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #1d1e22;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #4fe3d7, #0e78c8);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4fe3d7;
}

/* Magnetic Button Base */
.btn-magnetic-talk {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  display: inline-block;
}


html {
  scroll-behavior: smooth;
}


/* Mega Menu Staggered Entrance */
.mega.active .mega-content li {
  opacity: 0;
  transform: translateY(10px);
  animation: slideInUp 0.4s forwards;
}

.mega.active .mega-content li:nth-child(1) {
  animation-delay: 0.1s;
}

.mega.active .mega-content li:nth-child(2) {
  animation-delay: 0.2s;
}

.mega.active .mega-content li:nth-child(3) {
  animation-delay: 0.3s;
}

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




/* ////////////////////////////////////////////////////////////////////////// */

/* ////////// about page start * /////////////////////////////////////

/* about-hero-section start */
/* =========================================
   ABOUT PAGE PREMIUM STYLES
   ========================================= */

/* --- HERO SECTION --- */
.about-hero-new {
  position: relative;
  min-height: 90vh;
  background: radial-gradient(circle at 10% 20%, #0d121f 0%, #000000 90%);
  color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 100px 0;
}

.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://grainy-gradients.vercel.app/noise.svg');
  opacity: 0.05;
  pointer-events: none;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-text .tag {
  display: inline-block;
  background: rgba(79, 227, 215, 0.1);
  color: #4fe3d7;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 25px;
  border: 1px solid rgba(79, 227, 215, 0.2);
}

.hero-text h1 {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 30px;
  background: linear-gradient(to right, #ffffff, #b0c4de);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-text h1 span {
  color: #0e78c8;
  background: linear-gradient(to right, #4fe3d7, #0e78c8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-text p {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #a0aab5;
  margin-bottom: 40px;
  max-width: 90%;
}

.hero-btns {
  display: flex;
  gap: 20px;
}

/* Floating Image Animation */
.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

.floating-img {
  max-width: 100%;
  animation: floatImage 6s ease-in-out infinite;
  filter: drop-shadow(0 20px 40px rgba(14, 120, 200, 0.3));
}

@keyframes floatImage {
  0% {
    transform: translateY(0);
  }

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

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

/* --- GENESIS / STORY SECTION --- */
.section-genesis {
  padding: 120px 0;
  background: #fff;
  position: relative;
}

.genesis-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.genesis-img {
  position: relative;
}

.img-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 20px 20px 0px rgba(14, 120, 200, 0.1);
}

.img-frame img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

.genesis-img:hover .img-frame img {
  transform: scale(1.03);
}

.exp-badge {
  position: absolute;
  bottom: -30px;
  right: -30px;
  background: #0e78c8;
  color: #fff;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(14, 120, 200, 0.4);
  text-align: center;
}

.exp-badge .years {
  display: block;
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
}

.exp-badge .text {
  font-size: 0.9rem;
  opacity: 0.9;
}

.sub-heading {
  font-size: 1rem;
  color: #0e78c8;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  display: block;
  margin-bottom: 15px;
}

.genesis-content h2 {
  font-size: 3rem;
  color: #121721;
  font-weight: 700;
  margin-bottom: 25px;
  line-height: 1.2;
}

.genesis-content p {
  color: #555;
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 20px;
}

.check-list {
  list-style: none;
  padding: 0;
  margin-top: 30px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: #333;
}

.check-list li i {
  color: #4fe3d7;
}

/* --- STATS SECTION --- */
.section-stats {
  background: #0e78c8;
  padding: 60px 0;
  color: #fff;
}

.stats-wrapper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 40px;
  text-align: center;
}

.stat-item {
  position: relative;
}

.stat-item h3 {
  font-size: 3.5rem;
  font-weight: 800;
  display: inline-block;
  margin: 0;
}

.stat-item .symbol {
  font-size: 3.5rem;
  font-weight: 800;
  color: #4fe3d7;
}

.stat-item p {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-top: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- CORE VALUES --- */
.section-values {
  padding: 120px 0;
  background: #f8faff;
}

.section-header.text-center {
  max-width: 700px;
  margin: 0 auto 60px auto;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.value-card {
  background: #fff;
  padding: 40px 30px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  border-bottom: 4px solid transparent;
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 60px rgba(14, 120, 200, 0.15);
  border-bottom-color: #0e78c8;
}

.value-card .icon-box {
  width: 70px;
  height: 70px;
  background: rgba(14, 120, 200, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: #0e78c8;
  font-size: 1.8rem;
  transition: all 0.3s ease;
}

.value-card:hover .icon-box {
  background: #0e78c8;
  color: #fff;
}

.value-card h3 {
  font-size: 1.5rem;
  margin-bottom: 15px;
  color: #121721;
}

.value-card p {
  color: #666;
  line-height: 1.6;
}

/* --- WHY CHOOSE US --- */
.section-why {
  padding: 120px 0;
  background: #0b1c2d;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.why-content h2 {
  font-size: 3rem;
  margin-bottom: 30px;
}

.feature-row {
  display: flex;
  gap: 20px;
  margin-top: 40px;
}

.feature-icon {
  width: 60px;
  height: 60px;
  background: rgba(79, 227, 215, 0.1);
  border: 1px solid rgba(79, 227, 215, 0.3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #4fe3d7;
  flex-shrink: 0;
}

.feature-text h4 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #fff;
}

.feature-text p {
  color: #a0aab5;
  font-size: 1rem;
  line-height: 1.6;
}

.visual-card-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  padding: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.visual-card-glass img {
  max-width: 80%;
  filter: drop-shadow(0 0 30px rgba(79, 227, 215, 0.4));
  animation: pulseGlow 4s infinite alternate;
}

@keyframes pulseGlow {
  from {
    filter: drop-shadow(0 0 20px rgba(79, 227, 215, 0.3));
  }

  to {
    filter: drop-shadow(0 0 50px rgba(79, 227, 215, 0.6));
  }
}

/* --- CTA SECTION --- */
.section-cta-about {
  padding: 100px 0;
  background: white;
  display: flex;
  justify-content: center;
}

.cta-box {
  background: linear-gradient(135deg, #0e78c8, #0b1c2d);
  padding: 60px 80px;
  border-radius: 30px;
  color: #fff;
  width: 100%;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(14, 120, 200, 0.3);
}

.cta-box h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.cta-box p {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-bottom: 40px;
}

.btn-glow {
  background: #fff;
  color: #0e78c8;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  display: inline-block;
}

.btn-glow:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.5);
  background: #4fe3d7;
  color: #000;
}

/* RESPONSIVE */
@media (max-width: 991px) {

  .hero-grid,
  .genesis-grid,
  .why-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero-text h1 {
    font-size: 3rem;
  }

  .hero-btns,
  .check-list {
    justify-content: center;
  }

  .exp-badge {
    right: 50%;
    transform: translateX(50%);
    bottom: -40px;
  }

  .feature-row {
    flex-direction: column;
    align-items: center;
  }

  .cta-box {
    padding: 40px 20px;
  }
}



/* ////////////////////////////////////////////////////////////////////////// */

/* ////////// why-us page start * /////////////////////////////////////

/* why-us-hero-section start */

.hero {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  padding: 120px 8%;
  background: linear-gradient(135deg, var(--bg-dark), var(--secondary));
  color: var(--text-light);
}

.hero h1 span {
  color: var(--accent);
}

.badge {
  background: rgba(255, 255, 255, 0.1);
  padding: 8px 18px;
  border-radius: 30px;
  font-size: 13px;
}

.progress-list {
  margin-top: 30px;
}

.progress-item {
  margin-bottom: 18px;
}

.bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: grow 2s ease;
}

@keyframes grow {
  from {
    width: 0;
  }
}

.hero-card {
  display: flex;
  align-items: center;
  justify-content: center;
}

.experience {
  background: var(--primary);
  width: 220px;
  height: 220px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: perspective(800px) rotateY(-10deg);
  box-shadow: 0 30px 60px rgba(0, 0, 0, .4);
}

/* why-us-hero-section end */

/* process section start */

.process {
  background: var(--primary);
  padding: 100px 8%;
  text-align: center;
  color: white;
}

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

.step {
  background: rgba(255, 255, 255, 0.15);
  padding: 40px 20px;
  border-radius: 20px;
  font-size: 28px;
  transition: .4s;
  transform-style: preserve-3d;
}

.step:hover {
  transform: translateY(-12px) rotateX(10deg);
  background: rgba(255, 255, 255, 0.25);
}

.step span {
  display: block;
  font-size: 14px;
  margin-top: 10px;
}

/* process section end */

/* counsulting section start */

.cta {
  background: linear-gradient(120deg, #1c1f2a, #2b2f4b);
  padding: 120px 8%;
  text-align: center;
  color: white;
}

.cta button {
  margin-top: 30px;
  padding: 16px 36px;
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: .3s;
}

.cta button:hover {
  transform: scale(1.05);
}


/* counsulting section end */

/* trust section start */

.trust {
  background: var(--bg-light);
  padding: 100px 8%;
  text-align: center;
}

.stats {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-top: 50px;
}

.stats h3 {
  font-size: 42px;
  color: var(--primary);
}

/* trust section end */

/* responsive/// */
@media (max-width: 900px) {

  .hero,
  .steps,
  .stats {
    grid-template-columns: 1fr;
  }

  .experience {
    margin-top: 40px;
  }
}

/* ////////////////////////////////////////////////////////////////////////// */

/* ////////// why-us page end * /////////////////////////////////////

/* why-us-hero-section start */


/* why-us-hero-section end */



/* =========================================
   MEGA MENU 3-COLUMN REDESIGN
   ========================================= */

@media (min-width: 992px) {

  /* Ensure the mega-right container takes full available width */
  .mega-right {
    width: 100%;
    min-height: 350px;
    /* Ensure consistent height */
    position: relative;
  }

  .mega-content-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1.2fr;
    gap: 30px;
    width: 100%;
    height: 100%;
    align-items: start;
  }

  /* Column 1: Points List */
  .col-points {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 20px;
    height: 100%;
  }

  /* Stack list items vertically */
  .mega-right .mega-content-grid .col-points ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
    list-style: none;
    padding: 0;
    width: 100%;
  }

  .col-points li {
    display: flex;
    align-items: center;
    /* Center align text with bullet */
    font-size: 0.95rem;
    color: #b0c4de;
    line-height: 1.4;
    padding: 0;
  }

  /* Custom Bullet Point */
  .col-points li::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #00b4ff;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
  }

  /* Discovery Button */
  .btn-discovery {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #00b4ff;
    color: #fff !important;
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 600;
    border: none;
    outline: none;
    font-size: 0.9rem;
    text-decoration: none;
    margin-top: auto;
    /* Push to bottom if flex container allows */
    width: fit-content;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 180, 255, 0.3);
  }

  .btn-discovery:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 180, 255, 0.5);
  }

  /* Column 2: Description */
  .col-desc {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .col-desc h3 {
    color: #fff;
    font-size: 1.4rem;
    border-bottom: 2px solid #00b4ff;
    padding-bottom: 10px;
    display: inline-block;
    margin-bottom: 15px;
    width: 100%;
  }

  .col-desc p {
    color: #b0c4de;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
  }

  /* Column 3: Image */
  .col-image {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* Align image to top */
    padding-top: 10px;
  }

  .mega-img-box {
    width: 100%;
    max-width: 240px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }

  .mega-img-box img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
  }

  .mega-img-box:hover img {
    transform: scale(1.05);
  }
}

/* =========================================
   WHY US PAGE REDESIGN (PREMIUM 2.0)
========================================= */

/* Hero Section */
.why-hero {
  position: relative;
  padding: 160px 0 120px;
  background: var(--zentryx-bg);
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.why-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: radial-gradient(circle at 70% 30%, rgba(14, 120, 200, 0.15), transparent 60%);
}

#three-canvas-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  z-index: 2;
  opacity: 0.8;
}

.why-hero-content {
  position: relative;
  z-index: 3;
  max-width: 800px;
  padding-left: 20px;
}

.why-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: rgba(79, 227, 215, 0.05);
  border: 1px solid rgba(79, 227, 215, 0.3);
  color: var(--zentryx-cyan);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 30px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 15px rgba(79, 227, 215, 0.1);
}

.why-badge i {
  font-size: 0.8rem;
}

.why-hero h1 {
  font-size: 4.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
  margin-bottom: 24px;
  letter-spacing: -1px;
}

.why-hero h1 .highlight {
  background: linear-gradient(135deg, var(--zentryx-cyan) 0%, var(--zentryx-teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: inline-block;
}

.why-hero p {
  font-size: 1.25rem;
  color: var(--zentryx-metal);
  margin-bottom: 50px;
  max-width: 650px;
  line-height: 1.7;
  font-weight: 300;
}

/* Feature Grid */
.why-features {
  padding: 120px 0;
  background: var(--zentryx-dark);
  position: relative;
}

.section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px;
}

.section-header h2 {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 20px;
  font-weight: 700;
}

.section-header h2 span {
  color: var(--zentryx-cyan);
}

.section-header p {
  color: var(--zentryx-metal);
  font-size: 1.1rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
}

.feature-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 50px 40px;
  border-radius: 24px;
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(79, 227, 215, 0.1), transparent 40%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

.feature-card:hover {
  transform: translateY(-15px);
  border-color: rgba(79, 227, 215, 0.3);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.feature-card:hover::before {
  opacity: 1;
}

.feature-icon {
  width: 70px;
  height: 70px;
  background: rgba(14, 120, 200, 0.1);
  border: 1px solid rgba(14, 120, 200, 0.3);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--zentryx-cyan);
  margin-bottom: 30px;
  transition: all 0.5s ease;
}

.feature-card:hover .feature-icon {
  background: var(--zentryx-teal);
  color: #fff;
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 10px 30px rgba(14, 120, 200, 0.4);
}

.feature-card h3 {
  color: #fff;
  font-size: 1.6rem;
  margin-bottom: 15px;
  font-weight: 600;
}

.feature-card p {
  color: var(--zentryx-metal);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 0;
}

/* Trust Stats */
.why-stats {
  padding: 100px 0;
  background: linear-gradient(to bottom, var(--zentryx-bg), rgba(18, 23, 33, 0.95));
  /* Fallback image needed or just color */
  background-blend-mode: overlay;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

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

.stat-item {
  padding: 30px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}

.stat-number {
  font-size: 4rem;
  font-weight: 800;
  color: #fff;
  display: block;
  margin-bottom: 10px;
  line-height: 1;
  background: linear-gradient(180deg, #fff 20%, rgba(255, 255, 255, 0.5) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  color: var(--zentryx-cyan);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
}

/* Process Steps (Redesigned) */
.why-process {
  padding: 120px 0;
  background: var(--zentryx-bg);
}

.process-steps {
  display: flex;
  justify-content: space-between;
  margin-top: 80px;
  position: relative;
}

.process-steps::before {
  content: '';
  position: absolute;
  top: 50px;
  left: 10%;
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(79, 227, 215, 0.3), transparent);
  z-index: 1;
}

.process-step {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 220px;
}

.step-number {
  width: 100px;
  height: 100px;
  margin: 0 auto 30px;
  background: var(--zentryx-dark);
  border: 2px solid rgba(79, 227, 215, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3);
  transition: all 0.4s ease;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.process-step:hover .step-number {
  border-color: var(--zentryx-cyan);
  color: #fff;
  background: rgba(79, 227, 215, 0.1);
  box-shadow: 0 0 30px rgba(79, 227, 215, 0.3);
  transform: scale(1.1);
}

.process-step h4 {
  color: #fff;
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.process-step p {
  color: var(--zentryx-metal);
  font-size: 0.95rem;
}

/* CTA Section */
.why-cta {
  padding: 120px 0;
  background: linear-gradient(135deg, #050b14 0%, #0e1d2e 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(14, 120, 200, 0.1) 0%, transparent 60%);
  pointer-events: none;
  z-index: 1;
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.why-cta h2 {
  font-size: 3.5rem;
  color: #fff;
  margin-bottom: 25px;
  font-weight: 700;
}

.why-cta p {
  font-size: 1.2rem;
  color: var(--zentryx-metal);
  margin-bottom: 40px;
}

.btn-premium {
  padding: 20px 50px;
  background: transparent;
  color: #fff;
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  border: 2px solid var(--zentryx-cyan);
  box-shadow: 0 0 15px rgba(79, 227, 215, 0.1);
  overflow: hidden;
  position: relative;
}

.btn-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--zentryx-teal), var(--zentryx-cyan));
  transition: width 0.3s ease;
  z-index: -1;
}

.btn-premium:hover::before {
  width: 100%;
}

.btn-premium:hover {
  color: #000;
  border-color: transparent;
  box-shadow: 0 10px 40px rgba(79, 227, 215, 0.4);
  transform: translateY(-3px);
}

/* Responsive */
@media (max-width: 991px) {
  .why-hero h1 {
    font-size: 3.5rem;
  }

  #three-canvas-container {
    width: 100%;
    opacity: 0.3;
  }

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

  .process-steps {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }

  .process-steps::before {
    display: none;
  }
}

/* Workflow Sidebar 3D Background */
#three-bg-workflow {
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 100%;
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}

.how-work-premium {
  position: relative;
  overflow: hidden;
}

.process-sidebar {
  z-index: 2;
  position: sticky;
}

/* =========================================
   WHY US PAGE REDESIGN (WHITE THEME 3.0)
========================================= */

/* Hero Section - White Theme */
.why-hero {
  position: relative;
  padding: 140px 0 100px;
  background: #ffffff;
  /* White Theme */
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.why-hero-content {
  position: relative;
  z-index: 3;
  max-width: 100%;
  padding-right: 20px;
}

.why-badge {
  background: rgba(14, 120, 200, 0.1);
  border: 1px solid rgba(14, 120, 200, 0.2);
  color: var(--zentryx-teal);
  box-shadow: none;
}

.why-hero h1 {
  color: #1a2a3a;
}

.why-hero p {
  color: #55606b;
  font-weight: 400;
}

/* Right Side Visual with Animation */
.why-hero-visual {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-img-animate {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.15));
  animation: floatHeroImage 6s ease-in-out infinite;
  border-radius: 20px;
}

@keyframes floatHeroImage {

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

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

/* Second Section - Intro Text */
.why-intro-text {
  padding: 80px 0;
  background: #f8f9fa;
}

.why-intro-text h2 {
  font-size: 2.5rem;
  color: #1a2a3a;
  margin-bottom: 25px;
  font-weight: 700;
}

.why-intro-text p {
  font-size: 1.1rem;
  color: #55606b;
  line-height: 1.8;
}

/* =========================================
   MERGED INTRO & STATS & FEATURES UPDATE
========================================= */

/* Features Section Background Animation */
.why-features {
  position: relative;
  overflow: hidden;
  background: var(--zentryx-dark);
  z-index: 1;
}

/* Reuse the ID but override generic placement */
#three-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.4;
  /* Subtle background */
  pointer-events: none;
}

.why-features .container {
  position: relative;
  z-index: 2;
}

/* Merged Intro & Stats Section (Light Theme) */
.why-integrated-intro {
  padding: 100px 0;
  background: linear-gradient(to bottom, #ffffff 0%, #f0f4f8 100%);
  position: relative;
}

/* Text Content in Merged Section */
.integrated-text-wrap {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 60px;
}

.integrated-text-wrap h2 {
  font-size: 2.8rem;
  color: #1a2a3a;
  margin-bottom: 30px;
  font-weight: 700;
}

.integrated-text-wrap p {
  font-size: 1.15rem;
  color: #55606b;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Stats Grid in Merged Section (Light Theme Adaption) */
.integrated-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.integrated-stat-item {
  background: #ffffff;
  padding: 40px 20px;
  border-radius: 20px;
  text-align: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s ease;
  border-bottom: 4px solid var(--zentryx-teal);
}

.integrated-stat-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(14, 120, 200, 0.15);
}

.integrated-stat-number {
  font-size: 3.5rem;
  font-weight: 800;
  display: block;
  margin-bottom: 10px;
  background: linear-gradient(135deg, var(--zentryx-teal) 0%, var(--zentryx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.integrated-stat-label {
  color: #1a2a3a;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Responsive for Merged Section */
@media (max-width: 991px) {
  .integrated-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =========================================
   PHASE 4: THEME SWAP & PROCESS REDESIGN
========================================= */

/* 1. WHY FEATURES (Now White Theme) */
.why-features {
  background: #ffffff !important;
  color: #1a2a3a;
}

.why-features .section-header h2 {
  color: #1a2a3a;
}

.why-features .section-header p {
  color: #55606b;
}

.why-features .feature-card {
  background: #ffffff;
  border: 1px solid #e1e4e8;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  backdrop-filter: none;
}

.why-features .feature-card h3 {
  color: #1a2a3a;
}

.why-features .feature-card p {
  color: #55606b;
}

.why-features .feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(14, 120, 200, 0.15);
  border-color: var(--zentryx-teal);
}

.why-features .feature-icon {
  background: rgba(14, 120, 200, 0.1);
  color: var(--zentryx-teal);
}

/* 2. INTEGRATED INTRO (Now Dark Theme + Redesign) */
.why-integrated-intro {
  background: var(--zentryx-dark) !important;
  position: relative;
  overflow: hidden;
  padding: 120px 0;
}

.integrated-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.intro-dark-content h2 {
  color: #fff;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 25px;
}

.intro-dark-content p {
  color: var(--zentryx-metal);
  line-height: 1.7;
  margin-bottom: 20px;
}

.intro-time-badge {
  display: inline-block;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 30px;
  color: var(--zentryx-cyan);
  font-size: 0.9rem;
  margin-bottom: 20px;
}

.intro-visual-collage {
  position: relative;
  height: 500px;
}

.collage-img-main {
  position: absolute;
  top: 0;
  right: 0;
  width: 85%;
  height: 85%;
  object-fit: cover;
  border-radius: 20px;
  z-index: 1;
  border: 5px solid rgba(255, 255, 255, 0.05);
}

.collage-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 50%;
  object-fit: cover;
  border-radius: 15px;
  z-index: 2;
  border: 5px solid var(--zentryx-dark);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

/* Playing Line Counters */
.stats-line-container {
  margin-top: 60px;
  position: relative;
  padding-top: 40px;
}

.stats-playing-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
}

.stats-playing-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: var(--zentryx-cyan);
  animation: linePlay 4s linear infinite;
}

@keyframes linePlay {
  0% {
    left: 0;
    width: 0;
  }

  50% {
    width: 50%;
  }

  100% {
    left: 100%;
    width: 0;
  }
}

.dark-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.dark-stat-item {
  text-align: center;
}

.dark-stat-number {
  font-size: 2.5rem;
  color: #fff;
  font-weight: 700;
  display: block;
}

.dark-stat-label {
  color: var(--zentryx-metal);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 3. PROCESS REDESIGN (Attractive) */
.why-process-premium {
  padding: 120px 0;
  background: #f4f7f9;
}

.process-premium-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-top: 60px;
}

.process-card-ultra {
  background: #fff;
  padding: 40px 30px;
  border-radius: 20px;
  position: relative;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
  border-bottom: 4px solid transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.process-card-ultra:hover {
  transform: translateY(-15px);
  border-bottom-color: var(--zentryx-teal);
  box-shadow: 0 20px 50px rgba(14, 120, 200, 0.2);
}

.process-num-bg {
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 8rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.03);
  z-index: 0;
  transition: all 0.4s ease;
}

.process-card-ultra:hover .process-num-bg {
  color: rgba(14, 120, 200, 0.1);
  transform: scale(1.1);
}

.process-icon-box {
  width: 70px;
  height: 70px;
  background: #f0f8ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--zentryx-teal);
  margin-bottom: 25px;
  position: relative;
  z-index: 1;
  transition: all 0.4s ease;
}

.process-card-ultra:hover .process-icon-box {
  background: var(--zentryx-teal);
  color: #fff;
  transform: rotateY(360deg);
}

.process-content {
  position: relative;
  z-index: 1;
}

.process-content h4 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a2a3a;
  margin-bottom: 15px;
}

.process-content p {
  color: #55606b;
  font-size: 0.95rem;
  line-height: 1.6;
}

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

  .intro-visual-collage {
    height: 350px;
    margin-bottom: 50px;
  }

  .process-premium-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}


/* =========================================
   PHASE 5: ADVANCED REDESIGN & THEME SWAP
========================================= */

/* 1. Integrated Intro (DARK THEME) */
.why-integrated-intro.dark-theme {
  background: #050b14 !important;
  /* Deep Dark */
  padding: 120px 0;
  position: relative;
  color: #fff;
}

.integrated-grid-revamped {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.intro-time-tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(79, 227, 215, 0.1);
  border: 1px solid rgba(79, 227, 215, 0.3);
  padding: 8px 20px;
  border-radius: 50px;
  color: var(--zentryx-cyan);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 25px;
}

.revamped-text-content h2 {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 30px;
  color: #fff;
}

.revamped-text-content p {
  font-size: 1.1rem;
  color: #b0c4de;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Photo Collage Style */
.photo-collage-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collage-main {
  width: 80%;
  border-radius: 24px;
  border: 8px solid rgba(255, 255, 255, 0.05);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.collage-floating {
  position: absolute;
  width: 45%;
  bottom: -30px;
  left: -20px;
  border-radius: 16px;
  border: 5px solid #050b14;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
  animation: floatUpDown 5s ease-in-out infinite;
}

@keyframes floatUpDown {

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

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

/* Playing Line Counters */
.stats-playing-wrap {
  margin-top: 50px;
}

.playing-line-item {
  margin-bottom: 30px;
}

.playing-line-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.playing-line-label {
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
}

.playing-line-val {
  color: var(--zentryx-cyan);
  font-weight: 700;
}

.line-track {
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.line-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--zentryx-cyan);
  width: 0;
  transition: width 2s cubic-bezier(0.1, 0.5, 0.5, 1);
}

.line-track::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 20%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  animation: lineScanner 3s infinite;
}

@keyframes lineScanner {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

/* 2. Features Section (WHITE THEME) */
.why-features.white-theme {
  background: #fff !important;
  padding: 120px 0;
  color: #1a2a3a;
}

.white-theme .section-header h2 {
  color: #1a2a3a;
}

.white-theme .section-header p {
  color: #55606b;
}

.white-theme .feature-card {
  background: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
  color: #1a2a3a;
}

.white-theme .feature-card h3 {
  color: #1a2a3a;
}

.white-theme .feature-card p {
  color: #55606b;
}

.white-theme .feature-icon {
  background: rgba(14, 120, 200, 0.05);
  color: #0e78c8;
}

/* 3. Process Section Redesign */
.why-process-revamped {
  padding: 120px 0;
  background: linear-gradient(135deg,
      rgba(14, 120, 200, 0.15) 0%,
      rgba(14, 120, 200, 0.35) 50%,
      rgba(14, 120, 200, 0.5) 100%);


  position: relative;
  overflow: hidden;
}

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

.revamped-step-card {
  background: #fff;
  padding: 60px 40px;
  border-radius: 30px;
  text-align: center;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.05);
  transition: all 0.5s ease;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.revamped-step-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  background: var(--zentryx-cyan);
  transition: all 0.5s ease;
  z-index: -1;
  opacity: 0.1;
}

.revamped-step-card:hover::before {
  height: 100%;
}

.revamped-step-card:hover {
  transform: translateY(-20px) scale(1.05);
  box-shadow: 0 30px 60px rgba(14, 120, 200, 0.15);
  border-top: 5px solid var(--zentryx-cyan);
}

.animated-step-icon {
  font-size: 3rem;
  color: var(--zentryx-teal);
  margin-bottom: 30px;
  display: inline-block;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.revamped-step-card:hover .animated-step-icon {
  transform: rotateY(360deg) scale(1.2);
}

.step-number-float {
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 6rem;
  font-weight: 900;
  color: rgba(0, 0, 0, 0.05);
  line-height: 1;
  pointer-events: none;
}

.revamped-step-card:hover .step-number-float {
  color: rgba(14, 120, 200, 0.05);
  top: 10px;
  left: 10px;
}

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

  .process-revamped-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .process-revamped-grid {
    grid-template-columns: 1fr;
  }
}



/* /////////////////////////////////////////////////////////// */

/* team page start */

/* ================= TEAM HERO (RE-DESIGNED FOR CAROUSEL) ================= */
.team-hero {
  background: linear-gradient(135deg, #ffffff, #f7fbff);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.teamHeroSwiper {
  width: 100%;
  padding-bottom: 50px;
}

.team-hero .swiper-pagination {
  bottom: 0 !important;
}

.team-hero .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: #cbd5e1;
  opacity: 1;
}

.team-hero .swiper-pagination-bullet-active {
  background: #0e78c8;
  width: 30px;
  border-radius: 6px;
}

/* Entrance Animations for Slide Content */
.teamHeroSwiper .why-hero-content {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.teamHeroSwiper .swiper-slide-active .why-hero-content {
  opacity: 1;
  transform: translateY(0);
}

.teamHeroSwiper .why-hero-visual {
  opacity: 0;
  transform: scale(0.8);
  transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  transition-delay: 0.3s;
}

.teamHeroSwiper .swiper-slide-active .why-hero-visual {
  opacity: 1;
  transform: scale(1);
}

.team-hero .highlight {
  color: #0e78c8;
}

.team-hero-visual img {
  width: 100%;
  max-width: 580px;
  filter: drop-shadow(0 20px 40px rgba(14, 120, 200, 0.1));
  animation: floatHero 6s ease-in-out infinite;
}

@keyframes floatHero {

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

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

/* ////// */

/* ================= CEO SECTION ================= */
/* ================= CEO HIGHLIGHT SECTION (PREMIUM REDESIGN) ================= */
.ceo-highlight-section {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.ceo-bg-shapes .shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  z-index: 0;
  opacity: 0.1;
}

.ceo-bg-shapes .shape-1 {
  width: 400px;
  height: 400px;
  background: var(--zentryx-teal);
  top: -100px;
  left: -100px;
}

.ceo-bg-shapes .shape-2 {
  width: 300px;
  height: 300px;
  background: var(--zentryx-cyan);
  bottom: -50px;
  right: -50px;
}

/* .ceo-premium-card {
  background: #ffffff;
  border-radius: 30px;
  padding: 60px;
  position: relative;
  z-index: 1;
  box-shadow: 0 30px 100px rgba(14, 120, 200, 0.08);
  border: 1px solid rgba(14, 120, 200, 0.05);
  animation: ceoFloatStill 6s ease-in-out infinite;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
} */

/* @keyframes ceoFloatStill {

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

  50% {
    transform: translateY(-10px);
  }
}

.ceo-premium-card:hover {
  box-shadow: 0 40px 120px rgba(14, 120, 200, 0.15);
  transform: translateY(-5px);
} */

.ceo-premium-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(14, 120, 200, 0.02) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius: 30px;
  pointer-events: none;
}

.ceo-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.ceo-image-wrapper {
  position: relative;
  padding: 20px;
}

.ceo-image-wrapper::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 35px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  border: 2px solid rgba(14, 120, 200, 0.15);
  border-radius: 24px;
  z-index: 0;
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ceo-premium-card:hover .ceo-image-wrapper::before {
  transform: translate(-10px, -10px);
  border-color: rgba(14, 120, 200, 0.3);
}

.image-inner {
  position: relative;
  z-index: 2;
  border-radius: 24px;
  overflow: hidden;
  /* box-shadow: 0 30px 60px rgba(14, 120, 200, 0.1); */
}

.image-inner img {
  width: 100%;
  display: block;
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ceo-premium-card:hover .image-inner img {
  transform: scale(1.05);
}

.ceo-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 60px 25px 25px;
  background: transparent;
  z-index: 3;
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.ceo-name-group-overlay {
  background: linear-gradient(to top, rgba(14, 120, 200, 1) 0%, rgba(14, 120, 200, 0.5) 60%, transparent 100%);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  text-align: center;
}

.ceo-premium-card:hover .ceo-name-group-overlay {
  background: linear-gradient(to top, rgba(14, 120, 200, 1) 0%, rgba(14, 120, 200, 0.5) 20%, transparent 100%);
}

.ceo-name-overlay {
  font-size: 24px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 2px;
  letter-spacing: 0.5px;
}

.ceo-designation-overlay {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.image-bg-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(14, 120, 200, 0.12) 0%, transparent 70%);
  z-index: 1;
  pointer-events: none;
}

.experience-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--zentryx-teal);
  color: #fff;
  padding: 15px 20px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 25px rgba(14, 120, 200, 0.3);
  z-index: 4;
}

.experience-badge .number {
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
}

.experience-badge .text {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  margin-top: 4px;
}

.ceo-info {
  position: relative;
}

.quote-icon {
  font-size: 60px;
  color: rgba(14, 120, 200, 0.1);
  position: absolute;
  top: -40px;
  left: -20px;
}

.ceo-badge {
  display: inline-block;
  padding: 8px 18px;
  background: rgba(14, 120, 200, 0.08);
  color: var(--zentryx-teal);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ceo-title {
  font-size: 48px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 30px;
  line-height: 1.1;
}

.ceo-name-group {
  margin-bottom: 35px;
}

.ceo-name {
  font-size: 26px;
  font-weight: 700;
  color: var(--zentryx-teal);
  margin-bottom: 5px;
}

.ceo-designation {
  font-size: 16px;
  color: #666;
  font-weight: 500;
}

.ceo-statement {
  font-size: 20px;
  line-height: 1.8;
  color: #444;
  font-style: italic;
  margin-bottom: 40px;
  position: relative;
  padding-left: 30px;
  border-left: 4px solid var(--zentryx-teal);
}

.ceo-signature {
  margin-bottom: 30px;
}

.sig-text {
  font-family: 'Dancing Script', cursive, serif;
  font-size: 32px;
  color: #222;
}

.ceo-social {
  display: flex;
  gap: 15px;
}

.ceo-social a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #f4f7fa;
  color: #555;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.ceo-social a:hover {
  background: var(--zentryx-teal);
  color: #fff;
  transform: translateY(-5px);
}

@media (max-width: 991px) {
  .ceo-grid {
    grid-template-columns: 1fr;
    gap: 60px;
  }

  .ceo-image-wrapper {
    max-width: 400px;
    margin: 0 auto;
  }

  .ceo-info {
    text-align: center;
  }

  .ceo-statement {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid #eee;
    padding-top: 30px;
  }

  .ceo-social {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .ceo-premium-card {
    padding: 40px 25px;
  }

  .ceo-title {
    font-size: 32px;
  }

  .experience-badge {
    right: 0;
    bottom: -20px;
  }
}

/* //// */

/* ================= TEAM SECTION ================= */
/* ================= TEAM WRAPPER ================= */
.team-wrapper {
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* ================= BACKGROUND GLOWS ================= */
.team-wrapper::before,
.team-wrapper::after {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  filter: blur(120px);
  z-index: 0;
  opacity: 0.15;
  pointer-events: none;
}

.team-wrapper::before {
  top: -100px;
  left: -100px;
  background: radial-gradient(circle, #ff00ea, transparent);
}

.team-wrapper::after {
  bottom: -100px;
  right: -100px;
  background: radial-gradient(circle, #00d2ff, transparent);
}

/* ================= CATEGORY SECTION ================= */
.team-category-section {
  padding: 80px 0;
  position: relative;
  z-index: 1;
}

/* ================= HEADER ================= */
.team-category-header {
  text-align: center;
  margin-bottom: 60px;
  display: block;
  /* Overriding flex if any */
}

.team-category-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 15px;
  letter-spacing: -0.5px;
}

.team-category-desc {
  max-width: 700px;
  margin: 0 auto;
  color: #666;
  font-size: 17px;
  line-height: 1.6;
}

.team-count-badge {
  display: none;
  /* Hide for the new minimal look */
}

/* ================= GRID ================= */
.team-members-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-top: 50px;
}

/* ================= EMPLOYEE CARD (MODERN) ================= */
.employee-card {
  text-align: left;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  transition: all 0.4s ease;
  padding: 10px;
}

.employee-card:hover {
  transform: translateY(-8px);
}

.employee-card .member-img-wrapper {
  width: 140px;
  height: 140px;
  margin-bottom: 25px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
  background: #f0f0f0;
}

.employee-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.employee-card:hover img {
  transform: scale(1.1);
}

.employee-info h4 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 5px;
}

.employee-info .role {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0e78c8;
  text-transform: capitalize;
  margin-bottom: 12px;
}

.employee-info p {
  font-size: 13.5px;
  color: #777;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* ================= SOCIAL LINKS ================= */
.member-socials {
  display: flex;
  gap: 12px;
}

.member-socials a {
  color: #bfc7cf;
  font-size: 16px;
  transition: all 0.3s ease;
}

.member-socials a:hover {
  color: #0e78c8;
  transform: scale(1.2);
}

/* ================= HOVER DETAILS (OLD SYSTEM - NOW REMOVED/RESET) ================= */
.employee-hover-details {
  position: static;
  opacity: 1;
  padding: 0;
  background: transparent;
  transform: none;
  color: inherit;
  display: block;
}

/* ================= TEAM COLOR VARIANTS ================= */
.management-team,
.development-team,
.network-team {
  background: transparent;
}

/* ================= MOBILE ================= */
@media (max-width: 1200px) {
  .team-members-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .team-members-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .team-members-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .employee-card {
    text-align: center;
  }

  .employee-card .member-img-wrapper {
    margin-left: auto;
    margin-right: auto;
  }

  .member-socials {
    justify-content: center;
  }
}



/* ///// */

/* ================= CORE VALUES ================= */
.core-values-section {
  padding: 100px 0;
  background: #ffffff;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 30px;
}

.value-box {
  text-align: center;
  padding: 40px;
  border-radius: 16px;
  background: #f7fbff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  transition: 0.3s;
}

.value-box i {
  font-size: 42px;
  color: #0e78c8;
  margin-bottom: 15px;
}

.value-box:hover {
  transform: translateY(-10px);
}

/* /// */


/* ================= BENEFITS ================= */
.benefits-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #0e78c8, #005bb5);
  color: #fff;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 25px;
}

.benefit-card {
  padding: 30px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  text-align: center;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

/* //// */

/* ================= ELIGIBILITY ================= */
/* ================= ELIGIBILITY SECTION (PREMIUM REDESIGN) ================= */
.eligibility-section {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
}

.eligibility-header {
  margin-bottom: 60px;
}

.eligibility-subtitle {
  color: var(--zentryx-teal);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: block;
  margin-bottom: 10px;
}

.eligibility-header h2 {
  font-size: 42px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 20px;
}

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

.eligibility-item {
  background: #f8fafc;
  padding: 30px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.4s ease;
  border: 1px solid rgba(14, 120, 200, 0.05);
}

.eligibility-item:hover {
  background: #ffffff;
  transform: translateX(10px);
  box-shadow: 0 15px 35px rgba(14, 120, 200, 0.08);
  border-color: var(--zentryx-teal);
}

.eligibility-icon {
  width: 55px;
  height: 55px;
  background: #ffffff;
  color: var(--zentryx-teal);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  flex-shrink: 0;
}

.eligibility-item:hover .eligibility-icon {
  background: var(--zentryx-teal);
  color: #ffffff;
  transform: rotate(360deg);
}

.eligibility-text h4 {
  font-size: 19px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 5px;
}

.eligibility-text p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

@media (max-width: 768px) {
  .eligibility-grid {
    grid-template-columns: 1fr;
  }
}


/* ///// */

/* ================= CAREER CTA ================= */
.career-cta-section {
  padding: 120px 0;
  background: linear-gradient(135deg, #0e78c8, #002f6c);
  color: #fff;
}

.career-cta-section h2 {
  font-size: 38px;
}

.career-cta-section .btn-premium {
  padding: 15px 40px;
  font-size: 18px;
}

/* /// */

/* ================= GALLERY ================= */
/* ================= TEAM GALLERY (PREMIUM REDESIGN) ================= */
.team-gallery {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
}

.gallery-header {
  text-align: center;
  margin-bottom: 70px;
}

.gallery-header .big-tag {
  font-size: 52px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 15px;
  display: block;
}

.gallery-subtitle {
  color: var(--zentryx-teal);
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-size: 14px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 250px;
  grid-auto-flow: dense;
  gap: 20px;
  padding: 10px;
}

.gallery-item {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-item.tall {
  grid-row: span 2;
}

.gallery-item.wide {
  grid-column: span 2;
}

.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(14, 120, 200, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 2;
}

.overlay-content {
  text-align: center;
  transform: translateY(20px);
  transition: all 0.5s ease;
  color: #ffffff;
}

.overlay-content i {
  font-size: 32px;
  margin-bottom: 10px;
}

.overlay-content span {
  display: block;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.gallery-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 30px 60px rgba(14, 120, 200, 0.2);
}

.gallery-item:hover img {
  transform: scale(1.15);
}

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

.gallery-item:hover .overlay-content {
  transform: translateY(0);
}

@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
  }

  .gallery-header .big-tag {
    font-size: 36px;
  }
}

/* ================= CORE VALUES SECTION (PREMIUM REDESIGN) ================= */
.core-values-section {
  padding: 120px 0;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.values-bg-glow {
  position: absolute;
  width: 600px;
  height: 500px;
  background: radial-gradient(circle, rgba(14, 120, 200, 0.05) 0%, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.values-header {
  text-align: center;
  margin-bottom: 80px;
  position: relative;
  z-index: 1;
}

.values-badge {
  display: inline-block;
  padding: 8px 20px;
  background: rgba(14, 120, 200, 0.08);
  color: var(--zentryx-teal);
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.values-header h2 {
  font-size: 48px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 20px;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  position: relative;
  z-index: 1;
}

.premium-value-card {
  background: #ffffff;
  border-radius: 30px;
  padding: 50px 40px;
  text-align: center;
  position: relative;
  border: 1px solid rgba(14, 120, 200, 0.05);
  box-shadow: 0 20px 50px rgba(14, 120, 200, 0.05);
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  overflow: hidden;
}

.premium-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--zentryx-teal) 0%, var(--zentryx-cyan) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 0;
}

.premium-value-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 40px 80px rgba(14, 120, 200, 0.15);
}

.premium-value-card:hover::before {
  opacity: 1;
}

.value-icon-box {
  width: 90px;
  height: 90px;
  background: rgba(14, 120, 200, 0.05);
  color: var(--zentryx-teal);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 1;
  transition: all 0.5s ease;
}

.premium-value-card:hover .value-icon-box {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: scale(1.1) rotate(10deg);
}

.value-number {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 60px;
  font-weight: 900;
  color: rgba(14, 120, 200, 0.03);
  line-height: 1;
  transition: all 0.5s ease;
  z-index: 0;
}

.premium-value-card:hover .value-number {
  color: rgba(255, 255, 255, 0.1);
  transform: scale(1.2);
}

.premium-value-card h4 {
  font-size: 24px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
  transition: color 0.5s ease;
}

.premium-value-card p {
  color: #666;
  font-size: 16px;
  line-height: 1.7;
  position: relative;
  z-index: 1;
  transition: color 0.5s ease;
}

.premium-value-card:hover h4,
.premium-value-card:hover p {
  color: #ffffff;
}

.value-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.premium-value-card:hover .value-card-glow {
  opacity: 1;
}

@media (max-width: 991px) {
  .values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .values-grid {
    grid-template-columns: 1fr;
  }

  .values-header h2 {
    font-size: 32px;
  }
}

/* ================= BENEFITS SECTION (PREMIUM REDESIGN) ================= */
.benefits-section {
  padding: 120px 0;
  background: #f7fbff;
  position: relative;
  overflow: hidden;
}

.benefits-section::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background:
    radial-gradient(circle at 10% 20%, rgba(14, 120, 200, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(79, 227, 215, 0.05) 0%, transparent 40%);
  pointer-events: none;
}

.benefits-header {
  max-width: 800px;
  margin: 0 auto 70px;
}

.benefits-subtitle {
  color: var(--zentryx-teal);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 3px;
  display: block;
  margin-bottom: 15px;
}

.benefits-header h2 {
  font-size: 44px;
  font-weight: 800;
  color: #1a1a1a;
  line-height: 1.2;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.benefit-premium-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 45px 35px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(14, 120, 200, 0.05);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  z-index: 1;
}

.benefit-icon-wrapper {
  width: 70px;
  height: 70px;
  background: var(--zentryx-teal);
  color: #ffffff;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 30px;
  transition: all 0.4s ease;
  box-shadow: 0 10px 25px rgba(14, 120, 200, 0.2);
}

.benefit-premium-card:hover {
  transform: translateY(-12px);
  box-shadow: 0 30px 60px rgba(14, 120, 200, 0.1);
  border-color: rgba(14, 120, 200, 0.1);
}

.benefit-premium-card:hover .benefit-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
  background: linear-gradient(135deg, var(--zentryx-teal) 0%, var(--zentryx-cyan) 100%);
  box-shadow: 0 15px 30px rgba(14, 120, 200, 0.3);
}

.benefit-premium-card h4 {
  font-size: 22px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 15px;
}

.benefit-premium-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.benefit-accent-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--zentryx-teal), var(--zentryx-cyan));
  transition: width 0.5s ease;
  border-radius: 0 0 0 24px;
}

.benefit-premium-card:hover .benefit-accent-line {
  width: 60%;
}

@media (max-width: 576px) {
  .benefits-header h2 {
    font-size: 32px;
  }

  .benefit-premium-card {
    padding: 35px 25px;
  }
}

/* //// */
/* ////////////////////////////////////////////////////////////////// */

/* mission-vission page start (PREMIUM REDESIGN) */

.mv-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  padding: 120px 0;
}

.mv-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.mv-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  filter: brightness(1.05);
}

.mv-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.05) 100%);
  z-index: 2;
}

.mv-hero-content {
  position: relative;
  z-index: 3;
  color: #1a1a1a;
}

.mv-hero-content h1 {
  font-size: clamp(48px, 6vw, 84px);
  font-weight: 900;
  line-height: 0.95;
  margin-bottom: 25px;
  text-transform: uppercase;
  letter-spacing: -3px;
  color: #0b0e13;
  animation: mvTextReveal 1.2s cubic-bezier(0.77, 0, 0.175, 1);
}

.mv-hero-content h1 span {
  display: block;
  background: linear-gradient(90deg, #0e78c8, #4fe3d7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mv-hero-content p {
  font-size: 20px;
  color: #555555;
  max-width: 600px;
  margin-bottom: 40px;
  line-height: 1.6;
}

.mv-scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: #0e78c8;
  font-size: 24px;
  animation: mvBounce 2s infinite;
}

/* Generic Section */
.mv-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.mv-section-dark {
  background: #0b0e13;
  color: white;
}

.mv-section-white {
  background: #ffffff;
  color: #1a1a1a;
}

/* Feature Cards */
.mv-feature-row {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 100px;
}

.mv-feature-row.reverse {
  flex-direction: row-reverse;
}

.mv-visual-wrapper {
  flex: 1;
  position: relative;
}

.mv-visual-3d {
  position: relative;
  z-index: 1;
  border-radius: 40px;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.3);
  transform: perspective(1000px) rotateY(-5deg);
  transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mv-feature-row.reverse .mv-visual-3d {
  transform: perspective(1000px) rotateY(5deg);
}

.mv-visual-3d:hover {
  transform: perspective(1000px) rotateY(0deg) translateY(-10px);
}

.mv-visual-3d img {
  width: 100%;
  display: block;
}

.mv-visual-decoration {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(14, 120, 200, 0.2) 0%, transparent 70%);
  z-index: 0;
  top: -50px;
  left: -50px;
  filter: blur(40px);
  animation: mvPulse 4s infinite alternate;
}

.mv-text-content {
  flex: 1;
}

.mv-badge {
  padding: 8px 18px;
  background: rgba(14, 120, 200, 0.1);
  color: #0e78c8;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 25px;
}

.mv-section-dark .mv-badge {
  background: rgba(79, 227, 215, 0.1);
  color: #4fe3d7;
}

.mv-text-content h2 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 30px;
  line-height: 1.1;
  background: none;
  -webkit-text-fill-color: initial;
  color: inherit;
}

.mv-text-content p {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 30px;
  opacity: 0.9;
}

.mv-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mv-highlights li {
  position: relative;
  padding-left: 35px;
  margin-bottom: 15px;
  font-weight: 600;
  font-size: 16px;
}

.mv-highlights li::before {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  color: #0e78c8;
  font-size: 20px;
}

/* Values Section */
.mv-values-section {
  padding: 120px 0;
  background: #f8faff;
}

.mv-values-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px;
}

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

.mv-value-card {
  background: white;
  padding: 60px 45px;
  border-radius: 32px;
  text-align: center;
  transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.mv-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0e78c8 0%, #0b0e13 100%);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.5s ease;
}

.mv-value-card:hover {
  transform: translateY(-15px);
  color: white;
}

.mv-value-card:hover::before {
  opacity: 1;
}

.mv-value-icon {
  width: 90px;
  height: 90px;
  background: #f0f7ff;
  color: #0e78c8;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  margin: 0 auto 35px;
  transition: all 0.5s ease;
}

.mv-value-card:hover .mv-value-icon {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  transform: rotateY(180deg);
}

.mv-value-card h4 {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 20px;
}

.mv-value-card p {
  font-size: 15px;
  line-height: 1.6;
  opacity: 0.8;
}

/* Extra Content: Strategic Pillars */
.mv-pillars-section {
  padding: 120px 0;
  background: #0b0e13;
  color: white;
}

.mv-pillar-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 40px;
  border-radius: 24px;
  height: 100%;
  transition: all 0.4s ease;
}

.mv-pillar-box:hover {
  background: rgba(14, 120, 200, 0.1);
  border-color: #0e78c8;
  transform: scale(1.02);
}

.mv-pillar-num {
  font-size: 48px;
  font-weight: 900;
  color: rgba(14, 120, 200, 0.2);
  margin-bottom: 20px;
  line-height: 1;
}

.mv-pillar-box h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #4fe3d7;
}

/* Animations */
@keyframes mvTextReveal {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

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

@keyframes mvBounce {

  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0) translateX(-50%);
  }

  40% {
    transform: translateY(-10px) translateX(-50%);
  }

  60% {
    transform: translateY(-5px) translateX(-50%);
  }
}

@keyframes mvPulse {
  from {
    transform: scale(1);
    opacity: 0.2;
  }

  to {
    transform: scale(1.2);
    opacity: 0.4;
  }
}

/* Media Queries */
@media (max-width: 991px) {

  .mv-feature-row,
  .mv-feature-row.reverse {
    flex-direction: column;
    gap: 40px;
  }

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

  .mv-hero-content h1 {
    font-size: 48px;
  }
}

@media (max-width: 768px) {
  .mv-values-grid {
    grid-template-columns: 1fr;
  }

  .mv-section {
    padding: 80px 0;
  }
}

/* //////////////////////////////////// */

/* career-page start (PREMIUM REDESIGN) */

.career-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  background: #ffffff;
  overflow: hidden;
  padding: 120px 0;
}

.career-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.career-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.6;
  filter: brightness(1.1);
}

.career-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0.1) 100%);
  z-index: 2;
}

.career-hero-content {
  position: relative;
  z-index: 3;
  color: #1a1a1a;
}

.career-hero-content h1 {
  font-size: clamp(40px, 5vw, 70px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 25px;
  color: #0b0e13;
}

.career-hero-content h1 span {
  background: linear-gradient(90deg, #0e78c8, #4fe3d7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Open Positions */
.positions-section {
  padding: 100px 0;
  background: #f8faff;
}

.position-card {
  background: white;
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.position-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(14, 120, 200, 0.1);
  border-color: rgba(14, 120, 200, 0.2);
}

.pos-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 5px;
  color: #0b0e13;
}

.pos-meta {
  font-size: 14px;
  color: #666;
}

.pos-meta span {
  margin-right: 15px;
}

.btn-apply-small {
  padding: 10px 25px;
  background: #0e78c8;
  color: white;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.btn-apply-small:hover {
  background: #0b0e13;
  color: white;
}

/* Recruitment Process */
.process-section {
  padding: 100px 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  margin-top: 50px;
}

.process-step {
  position: relative;
}

.process-icon {
  width: 100px;
  height: 100px;
  background: #f0f7ff;
  color: #0e78c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 20px;
  transition: all 0.4s ease;
  border: 2px dashed rgba(14, 120, 200, 0.3);
}

.process-step:hover .process-icon {
  background: #0e78c8;
  color: white;
  transform: scale(1.1);
  border-style: solid;
}

/* Benefits Grid */
.benefits-grid-career {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 50px;
}

.benefit-item {
  display: flex;
  gap: 20px;
  padding: 25px;
  background: white;
  border-radius: 15px;
  transition: all 0.3s ease;
}

.benefit-item:hover {
  background: #f0f7ff;
}

.benefit-icon-career {
  font-size: 24px;
  color: #0e78c8;
}

/* Stats Ribbon */
.stats-ribbon {
  background: linear-gradient(135deg, #0e78c8 0%, #0b0e13 100%);
  padding: 60px 0;
  color: white;
  text-align: center;
}

.stat-box h2 {
  font-size: 40px;
  font-weight: 800;
  margin-bottom: 5px;
}

/* FAQ Accordion Custom */
.career-faq-item {
  background: white;
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.faq-q {
  padding: 20px 25px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s;
}

.faq-q:hover {
  background: #f9f9f9;
}

/* Media Queries */
@media (max-width: 991px) {

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

@media (max-width: 768px) {

  .process-grid,
  .benefits-grid-career {
    grid-template-columns: 1fr;
  }
}

/* Workplace Gallery */
.workplace-gallery {
  padding: 100px 0;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 300px);
  gap: 20px;
}

.gallery-item {
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

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

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

.gallery-item.large {
  grid-column: span 2;
  grid-row: span 2;
}

/* Video Section */
.career-video-section {
  padding: 100px 0;
  background: #0b0e13;
  color: white;
  text-align: center;
}

.video-container {
  max-width: 900px;
  margin: 50px auto 0;
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.5);
}

.video-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.play-btn-circle {
  width: 100px;
  height: 100px;
  background: white;
  color: #0e78c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  padding-left: 5px;
  transition: all 0.4s ease;
  animation: mvPulse 2s infinite;
}

.video-placeholder:hover .play-btn-circle {
  transform: scale(1.1);
  background: #0e78c8;
  color: white;
}

/* CV CTA Section */
.cv-cta-section {
  padding: 120px 0;
  background: #ffffff;
}

.cv-cta-card {
  background: linear-gradient(135deg, #0e78c8 0%, #0b0e13 100%);
  border-radius: 40px;
  padding: 80px;
  color: white;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.cv-cta-bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  z-index: 1;
}

.cv-cta-content {
  position: relative;
  z-index: 2;
}

.cv-icon-anim {
  font-size: 60px;
  margin-bottom: 30px;
  display: inline-block;
  animation: floatCV 3s ease-in-out infinite;
}

@keyframes floatCV {

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

  50% {
    transform: translateY(-20px) rotate(5deg);
  }
}

.btn-cta-cv {
  padding: 18px 45px;
  background: white;
  color: #0e78c8;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  text-decoration: none;
  display: inline-block;
  margin-top: 30px;
  transition: all 0.3s ease;
}

.btn-cta-cv:hover {
  background: #4fe3d7;
  color: #0b0e13;
  transform: translateY(-5px);
}

/* /////////////////////////////////////////////////////////////////// */

/* faq-page start ///////////////////////////////////////////////// */
/* faq-intro section start */

.faq-intro {
  padding: 80px 5%;
  background: linear-gradient(135deg, #f6f8ff, #ffffff);
  font-family: 'Poppins', sans-serif;
}

.faq-container {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 50px;
  align-items: center;
}

.faq-tag {
  color: #5b5bff;
  font-weight: 600;
  letter-spacing: 1px;
}

.faq-left h2 {
  font-size: 42px;
  margin: 15px 0;
  color: #1d1d3f;
}

.faq-left p {
  color: #666;
  margin-bottom: 30px;
}

.faq-btn {
  display: inline-block;
  padding: 14px 32px;
  background: #5b5bff;
  color: #fff;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: 0 15px 30px rgba(91, 91, 255, 0.3);
  transition: transform 0.4s;
}

.faq-btn:hover {
  transform: translateY(-4px) scale(1.05);
}

/* FAQ Cards */
.faq-item {
  background: #fff;
  padding: 20px 25px;
  margin-bottom: 18px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  transform-style: preserve-3d;
  transition: all 0.4s ease;
}

.faq-item:hover {
  transform: translateY(-5px) rotateX(3deg);
}

.faq-item h4 {
  font-size: 18px;
  position: relative;
}

.faq-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease;
}

.faq-item.active .faq-content {
  max-height: 200px;
}

.faq-content p {
  margin-top: 12px;
  color: #555;
}

/* Responsive */
@media(max-width: 900px) {
  .faq-container {
    grid-template-columns: 1fr;
  }
}

/* faq-intro section end */

/* faq-maine section start */

.faq-main {
  text-align: center;
  padding: 70px 20px;
  background: #f7f9ff;
}

.faq-main h5 {
  color: #5b5bff;
  margin-bottom: 10px;
}

.faq-main h2 {
  font-size: 40px;
  color: #1d1d3f;
  margin-bottom: 15px;
}

.faq-main p {
  max-width: 600px;
  margin: auto;
  color: #666;
}

/* faq-maine section end */

/* faq-page end ///////////////////////////////////////////////// */
/* FAQ PAGE EXCLUSIVE PREMIUM STYLES */
:root {
  --z-blue: #0e78c8;
  --z-cyan: #4fe3d7;
  --z-dark: #0b0e13;
  --z-glass: rgba(255, 255, 255, 0.05);
}

.z-index-3 {
  position: relative;
  z-index: 3 !important;
}

.faq-hero-premium {
  position: relative;
  padding: 160px 0 120px;
  background: #fdfdfd;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.three-canvas-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

.faq-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.4) 100%);
  z-index: 2;
  pointer-events: none;
}

.premium-badge {
  background: rgba(14, 120, 200, 0.1);
  color: var(--z-blue);
  padding: 8px 20px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 25px;
}

.hero-title-premium {
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 900;
  color: var(--z-dark);
  line-height: 1.1;
  margin-bottom: 30px;
}

.hero-subtitle {
  font-size: 18px;
  color: #555;
  max-width: 700px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.text-gradient {
  background: linear-gradient(90deg, var(--z-blue), var(--z-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.faq-search-box {
  background: white;
  padding: 10px 10px 10px 30px;
  border-radius: 60px;
  display: flex;
  align-items: center;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
  max-width: 650px;
  margin: 0 auto;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-search-box:focus-within {
  box-shadow: 0 20px 50px rgba(14, 120, 200, 0.15);
  transform: translateY(-5px);
}

.search-icon {
  font-size: 20px;
  color: #aaa;
  margin-right: 15px;
}

.faq-search-box input {
  border: none;
  width: 100%;
  font-size: 16px;
  color: #333;
  outline: none;
}

.search-btn-premium {
  background: linear-gradient(90deg, var(--z-blue), #0b5fa0);
  color: white;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.search-btn-premium:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(14, 120, 200, 0.3);
}

.tag-pill {
  display: inline-block;
  padding: 5px 15px;
  background: #f0f4f8;
  color: #666;
  text-decoration: none;
  border-radius: 30px;
  font-size: 13px;
  margin: 5px;
  transition: all 0.3s ease;
}

.tag-pill:hover {
  background: var(--z-blue);
  color: white;
}

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

.faq-sidebar-glass {
  background: white;
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.03);
  position: sticky;
  top: 120px;
}

.sidebar-title {
  font-weight: 800;
  margin-bottom: 30px;
  color: var(--z-dark);
  font-size: 22px;
}

.faq-nav-pills {
  list-style: none;
  padding: 0;
  margin-bottom: 40px;
}

.nav-pill-item {
  display: flex;
  align-items: center;
  padding: 18px 25px;
  border-radius: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: #fdfdfd;
  border: 1px solid #f0f0f0;
  color: #555;
  font-weight: 600;
}

.nav-pill-item i:first-child {
  margin-right: 15px;
  font-size: 18px;
  color: #aaa;
  transition: all 0.3s ease;
}

.nav-pill-item .arrow {
  margin-left: auto;
  font-size: 12px;
  opacity: 0;
  transition: all 0.3s ease;
}

.nav-pill-item:hover {
  background: #f0f7ff;
  color: var(--z-blue);
}

.nav-pill-item.active {
  background: var(--z-blue);
  color: white;
  box-shadow: 0 10px 25px rgba(14, 120, 200, 0.3);
}

.nav-pill-item.active i:first-child,
.nav-pill-item.active .arrow {
  color: white;
  opacity: 1;
}

.sidebar-cta-card {
  background: linear-gradient(135deg, var(--z-dark), #1a1e26);
  padding: 30px;
  border-radius: 20px;
  color: white;
  text-align: center;
}

.sidebar-cta-card h5 {
  font-weight: 700;
  margin-bottom: 15px;
}

.sidebar-cta-card p {
  font-size: 14px;
  opacity: 0.8;
  margin-bottom: 20px;
}

.btn-sidebar-contact {
  display: block;
  background: var(--z-cyan);
  color: var(--z-dark);
  padding: 12px;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-sidebar-contact:hover {
  transform: scale(1.03);
  background: white;
}

.faq-group {
  display: none;
}

.faq-group.active {
  display: block;
  animation: fadeInFaq 0.5s ease;
}

@keyframes fadeInFaq {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

.group-title {
  font-weight: 800;
  font-size: 32px;
  margin-bottom: 40px;
  color: var(--z-dark);
}

.accordion-item-premium {
  background: white;
  border-radius: 20px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.accordion-item-premium:hover {
  box-shadow: 0 15px 40px rgba(14, 120, 200, 0.08);
  border-color: rgba(14, 120, 200, 0.1);
}

.accordion-header-premium {
  padding: 25px 35px;
  font-size: 18px;
  font-weight: 700;
  color: var(--z-dark);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.accordion-header-premium i {
  font-size: 14px;
  color: var(--z-blue);
  transition: transform 0.3s ease;
  background: #f0f7ff;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.accordion-item-premium.active {
  border-color: var(--z-blue);
}

.accordion-item-premium.active .accordion-header-premium i {
  transform: rotate(45deg);
  background: var(--z-blue);
  color: white;
}

.accordion-body-premium {
  padding: 0 35px 30px;
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0, 1, 0, 1);
  color: #666;
  line-height: 1.7;
}

.accordion-item-premium.active .accordion-body-premium {
  max-height: 1000px;
  padding-top: 5px;
}

.faq-footer-cta {
  padding: 80px 0 120px;
  background: #f8fafc;
}

.cta-glass-card {
  background: linear-gradient(135deg, var(--z-blue), #0b5fa0);
  padding: 60px;
  border-radius: 40px;
  color: white;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(14, 120, 200, 0.3);
}

.cta-glass-card::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  border-radius: 50%;
}

.cta-glass-card h2 {
  font-weight: 800;
  font-size: 38px;
  margin-bottom: 20px;
}

.cta-glass-card p {
  font-size: 18px;
  opacity: 0.9;
}

.btn-call-premium {
  background: white;
  color: var(--z-blue);
  padding: 18px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.btn-chat-premium {
  background: transparent;
  color: white;
  padding: 16px 35px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  border: 2px solid white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.btn-call-premium i,
.btn-chat-premium i {
  margin-right: 10px;
}

.btn-call-premium:hover,
.btn-chat-premium:hover {
  transform: translateY(-5px) translateZ(0);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.btn-call-premium:hover {
  background: #f8f9fa;
  color: var(--z-dark);
}

.btn-chat-premium:hover {
  background: white;
  color: var(--z-blue);
}

@media (max-width: 991px) {
  .faq-sidebar-glass {
    position: static;
    margin-bottom: 50px;
  }

  .hero-title-premium {
    font-size: 42px;
  }

  .cta-glass-card {
    text-align: center;
    padding: 40px 20px;
  }

  .cta-btns {
    margin-top: 30px;
  }

  .btn-call-premium {
    margin: 10px;
  }
}



/* //////////////// */


/* //////////////////// blog page start //////////////////// */

.blog-section {
  padding: 80px 6%;
  background: #f6f8ff;
  font-family: 'Poppins', sans-serif;
}

.blog-container {
  display: grid;
  grid-template-columns: 2.2fr 1fr;
  gap: 40px;
}

/* BLOG CARD */
.blog-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  transition: transform 0.5s ease;
}

.blog-card:hover {
  transform: translateY(-8px) rotateX(2deg);
}

.blog-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.blog-content {
  padding: 25px;
}

.blog-tag {
  color: #5b5bff;
  font-size: 14px;
  font-weight: 600;
}

.blog-date {
  margin-left: 12px;
  font-size: 13px;
  color: #888;
}

.blog-content h3 {
  margin: 15px 0;
  font-size: 22px;
  color: #1d1d3f;
}

.blog-content p {
  color: #666;
  margin-bottom: 20px;
}

.read-more {
  color: #5b5bff;
  text-decoration: none;
  font-weight: 600;
}

/* SIDEBAR */
.blog-right .sidebar-box {
  background: #fff;
  padding: 25px;
  border-radius: 14px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.search-box input {
  width: 100%;
  padding: 14px;
  border-radius: 30px;
  border: none;
  background: #5b5bff;
  color: #fff;
}

.search-box input::placeholder {
  color: #eaeaff;
}

.category-list li {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  cursor: pointer;
  transition: color 0.3s;
}

.category-list li:hover {
  color: #5b5bff;
}

/* TAGS */
.tag-cloud span {
  display: inline-block;
  padding: 8px 14px;
  margin: 6px;
  border-radius: 20px;
  background: #f0f2ff;
  font-size: 13px;
  transition: transform 0.3s;
}

.tag-cloud span:hover {
  transform: translateY(-3px);
}

/* QUOTE */
.quote-box {
  background: linear-gradient(135deg, #5b5bff, #6a6aff);
  color: #fff;
  text-align: center;
}

.quote-box p {
  font-size: 15px;
  margin-bottom: 20px;
}

.quote-box h5 {
  font-size: 18px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .blog-container {
    grid-template-columns: 1fr;
  }
}

/* //////////////////// blog page end //////////////////// */
/* BLOG PAGE EXCLUSIVE PREMIUM STYLES */

.blog-hero-premium {
  position: relative;
  padding: 120px 0 120px;
  background: #fdfdfd;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
}

.blog-hero-content {
  position: relative;
  z-index: 5;
}

.blog-badge {
  background: rgba(14, 120, 200, 0.1);
  color: var(--z-blue);
  padding: 10px 25px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: inline-block;
  margin-bottom: 30px;
}

.blog-hero-title {
  font-size: clamp(45px, 7vw, 80px);
  font-weight: 900;
  color: var(--z-dark);
  line-height: 1.1;
  margin-bottom: 35px;
}

.blog-hero-subtitle {
  font-size: 20px;
  color: #555;
  max-width: 600px;
  margin-bottom: 45px;
  line-height: 1.6;
}

.blog-hero-collage {
  position: relative;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.collage-img {
  position: absolute;
  border-radius: 40px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
  object-fit: cover;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  border: 8px solid white;
}

.img-1 {
  width: 240px;
  height: 450px;
  left: 10%;
  top: 0;
  z-index: 3;
  transform: rotate(-5deg);
}

.img-2 {
  width: 240px;
  height: 380px;
  right: 5%;
  top: 50px;
  z-index: 2;
  transform: rotate(10deg);
}

.img-3 {
  width: 220px;
  height: 300px;
  right: 15%;
  bottom: -20px;
  z-index: 4;
  transform: rotate(-8deg);
}

.collage-img:hover {
  transform: scale(1.05) rotate(0deg);
  z-index: 10;
}

/* Category Section */
.blog-categories-section {
  padding: 100px 0;
  background: #f8fafc;
}

.section-label {
  font-weight: 800;
  font-size: 32px;
  color: var(--z-dark);
  margin-bottom: 40px;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 50px;
}

.cat-pill {
  padding: 12px 30px;
  border-radius: 50px;
  background: white;
  color: #555;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.02);
}

.cat-pill.active,
.cat-pill:hover {
  background: var(--z-blue);
  color: white;
  box-shadow: 0 10px 25px rgba(14, 120, 200, 0.3);
}


.category-card {
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  height: 350px;
  margin-bottom: 30px;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.category-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 30px 60px rgba(14, 120, 200, 0.2);
}

.category-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.category-card:hover img {
  transform: scale(1.1);
}

.category-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
  color: white;
  transition: all 0.3s ease;
}

.category-card:hover .category-card-overlay {
  padding-bottom: 50px;
}

.category-card-overlay h4 {
  font-weight: 800;
  margin-bottom: 5px;
}

.category-card-overlay p {
  font-size: 14px;
  opacity: 0.8;
}

/* Latest Stories */
.blog-stories-section {
  padding: 100px 0;
  background: white;
}

.featured-story-card {
  border-radius: 40px;
  overflow: hidden;
  background: white;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.featured-story-img {
  height: 480px;
  width: 100%;
  object-fit: cover;
}

.featured-story-content {
  padding: 50px;
}

.mini-story-item {
  display: flex;
  gap: 25px;
  margin-bottom: 35px;
  padding-bottom: 35px;
  border-bottom: 1px solid #f0f0f0;
}

.mini-story-item:last-child {
  border-bottom: none;
}

.mini-story-img {
  width: 150px;
  height: 150px;
  border-radius: 20px;
  object-fit: cover;
  flex-shrink: 0;
}

.mini-story-content h5 {
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
  color: var(--z-dark);
}

/* Expert Spotlight */
.expert-spotlight-section {
  padding: 100px 0;
  background: #f8fafc;
}

.expert-card {
  background: white;
  border-radius: 40px;
  padding: 60px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.05);
}

.expert-profile {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}

.expert-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.expert-info h5 {
  font-weight: 800;
  margin-bottom: 5px;
}

.expert-info span {
  color: #888;
  font-size: 14px;
}

.expert-quote {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--z-dark);
  font-style: italic;
  margin-bottom: 40px;
}

.expert-large-img {
  border-radius: 30px;
  width: 100%;
  height: 500px;
  object-fit: cover;
}

/* Newsletter */
.blog-newsletter-section {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
}

.newsletter-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('assets/images/banner/network.png');
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.newsletter-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
}

.newsletter-form {
  max-width: 700px;
  margin: 50px auto 0;
  display: flex;
  background: white;
  padding: 10px;
  border-radius: 60px;
}

.newsletter-form input {
  flex-grow: 1;
  border: none;
  padding: 0 30px;
  outline: none;
  font-size: 16px;
  border-radius: 60px;
}

.btn-subscribe {
  background: var(--z-blue);
  color: white;
  border: none;
  padding: 15px 40px;
  border-radius: 50px;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-subscribe:hover {
  background: #0b5fa0;
  transform: scale(1.05);
}

@media (max-width: 991px) {
  .blog-hero-collage {
    height: 400px;
    margin-top: 50px;
  }

  .img-1 {
    width: 200px;
    height: 300px;
    left: 5%;
  }

  .img-2 {
    width: 180px;
    height: 250px;
    right: 5%;
  }

  .img-3 {
    width: 150px;
    height: 200px;
    bottom: 0;
    right: 20%;
  }

  .featured-story-img {
    height: 300px;
  }

  .featured-story-content {
    padding: 30px;
  }

  .mini-story-item {
    flex-direction: column;
  }

  .mini-story-img {
    width: 100%;
    height: 200px;
  }
}

/* Blog Interactive Enhancements */
.clickable-mini {
  transition: all 0.3s ease;
  cursor: pointer;
  border-radius: 20px;
}

.clickable-mini:hover {
  background: rgba(14, 120, 200, 0.05);
  transform: translateX(10px);
}

.featured-story-card {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.filter-item {
  transition: all 0.4s ease;
}

.cat-pill {
  cursor: pointer;
}

/* CONTACT PAGE PREMIUM STYLES */

.contact-hero-section {
  position: relative;
  padding: 160px 0 100px;
  background: #fdfdfd;
  overflow: hidden;
  min-height: 50vh;
  display: flex;
  align-items: center;
}

.contact-hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}

.contact-info-grid {
  padding: 120px 0;
  background: #0a1128;
  position: relative;
  overflow: hidden;
}

.contact-info-grid::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top right, rgba(14, 120, 200, 0.15), transparent);
  pointer-events: none;
}

.contact-card-premium {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  padding: 40px;
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border: 1px solid rgba(255, 255, 255, 0.1);
  height: 100%;
  color: white;
}

.contact-card-premium:hover {
  transform: translateY(-15px);
  box-shadow: 0 30px 60px rgba(79, 227, 215, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
}

.contact-card-premium h4 {
  font-weight: 700;
  margin-bottom: 15px;
  color: white;
}

.contact-card-premium .text-gradient {
  background: linear-gradient(to right, #ffffff, var(--z-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-card-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.1);
  color: var(--z-cyan);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border-radius: 20px;
  margin: 0 auto 25px;
  transition: all 0.3s ease;
}

.contact-card-premium:hover .contact-card-icon {
  background: var(--z-blue);
  color: white;
  transform: rotateY(180deg);
}

/* Contact Form Section */
.contact-form-section {
  padding: 100px 0;
  background: #f8fafc;
  position: relative;
}

.consulting-brief {
  padding-right: 40px;
}

.glassy-contact-form-box {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(25px) saturate(180%);
  -webkit-backdrop-filter: blur(25px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 60px;
  border-radius: 50px;
  box-shadow: 0 50px 100px rgba(0, 0, 0, 0.05), inset 0 0 20px rgba(255, 255, 255, 0.3);
  position: relative;
  z-index: 10;
}

.glassy-contact-form-box::before {
  content: '';
  position: absolute;
  top: -20px;
  right: -20px;
  width: 60px;
  height: 60px;
  background: var(--z-cyan);
  filter: blur(40px);
  z-index: -1;
  opacity: 0.5;
}

.newsletter-glass-box {
  background: linear-gradient(135deg, rgba(14, 120, 200, 0.9), rgba(79, 227, 215, 0.8));
  backdrop-filter: blur(15px);
  padding: 40px;
  border-radius: 30px;
  color: white;
  height: 100%;
}

.form-premium-control {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.03);
  padding: 18px 25px;
  border-radius: 12px;
  font-size: 15px;
  margin-bottom: 20px;
  width: 100%;
  transition: all 0.3s ease;
  color: var(--z-dark);
}

.form-premium-control:focus {
  background: white;
  border-color: var(--z-blue);
  box-shadow: 0 10px 30px rgba(14, 120, 200, 0.1);
  outline: none;
  transform: translateY(-2px);
}

/* Testimonials */
.contact-testimonial-section {
  padding: 100px 0;
  background: white;
}

.testimonial-slide-box {
  padding: 40px;
  border-radius: 30px;
  background: #fdfdfd;
  border: 1px solid #f0f0f0;
}

/* Career Section */
.contact-career-banner {
  background: var(--z-dark);
  border-radius: 40px;
  padding: 80px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 100px;
}

.career-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(14, 120, 200, 0.3) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  pointer-events: none;
}

/* Map Section */
.location-map-wrapper {
  width: 100%;
  height: 550px;
  border-radius: 50px;
  overflow: hidden;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15);

  position: relative;
  z-index: 5;
  border: 10px solid white;
}

@media (max-width: 991px) {
  .glassy-contact-form-box {
    padding: 30px;
    margin-top: 50px;
  }

  .contact-career-banner {
    padding: 40px;
  }
}

.btn-career-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 50px;
  background: var(--z-blue);
  color: white;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.4s ease;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(14, 120, 200, 0.3);
}

.btn-career-premium:hover {
  background: white;
  color: var(--z-blue);
  transform: translateY(-5px);
  box-shadow: 0 15px 40px rgba(255, 255, 255, 0.2);
}

/* ///    network product page start */

section {
  padding: 60px 8%;
  font-family: Arial, sans-serif;
}

.featured-product {
  background: #f4f9ff;
}

.fp-container {
  display: flex;
  gap: 40px;
  align-items: center;
}

.badge {
  background: #ff5722;
  color: #fff;
  padding: 6px 12px;
}

.purchase-actions a,
.purchase-actions button {
  margin-right: 10px;
  padding: 10px 16px;
  background: #007bff;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 25px;
}

.product-card {
  border: 1px solid #ddd;
  padding: 20px;
  background: #fff;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.feedback-card {
  background: #fafafa;
  padding: 20px;
  margin-bottom: 15px;
}

/* =========================================
   ABOUT SECTION MULTI IMAGE ANIMATION
========================================= */
.main-img-box-multi {
  position: relative;
  width: 100%;
  height: 500px;
  /* Adjust based on original design or visual need */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-img {
  position: absolute;
  border-radius: 15px;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); Removed initial shadow too if desired, but user specifically said "shadow remove" in context of hover usually, but let's keep base shadow for depth unless asked otherwise. User said "shadown remove" which might mean on hover. I'll remove it on hover as requested. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  object-fit: cover;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  /* Even smoother "easeOutExpo" like feel */
  will-change: transform, box-shadow;
}

.about-img:hover {
  z-index: 10;
  box-shadow: none;
  /* Remove shadow on hover */
  animation: hoverWave 3s ease-in-out infinite alternate;
  /* Slower, smoother wave */
  transform: scale(1.05);
  /* Slight scale to start the interaction */
}

@keyframes hoverWave {
  0% {
    transform: scale(1.05) rotate(0deg);
  }

  100% {
    transform: scale(1.08) rotate(2deg);
  }
}

/* Image 1 - Top Left - Floating */
.about-img-1 {
  width: 65%;
  /* Increased size */
  top: 0px;
  left: -20px;
  z-index: 2;
  animation: floatImg1 6s ease-in-out infinite;
  /* Border removed */
}

/* Image 2 - Center Right - Pulse/Zoom */
.about-img-2 {
  width: 60%;
  /* Increased size */
  top: 80px;
  right: -20px;
  z-index: 3;
  animation: floatImg2 5s ease-in-out infinite 0.5s;
  /* Border removed */
}

/* Image 3 - Bottom Left - Slide/Fade */
.about-img-3 {
  width: 60%;
  /* Increased size */
  bottom: 0px;
  left: 0px;
  z-index: 4;
  animation: floatImg3 7s ease-in-out infinite 1s;
  /* Border removed */
}

@keyframes floatImg1 {

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

  50% {
    transform: translateY(-15px) translateX(5px);
  }
}

@keyframes floatImg2 {

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

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

@keyframes floatImg3 {

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

  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

@media (max-width: 768px) {
  .main-img-box-multi {
    height: 350px;
  }
}

/* =========================================
   PROCESS SECTION GRID (Redesign to 2 Rows)
========================================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* Make sure the connector doesn't break the grid layout if it was absolute */
.process-card {
  position: relative;
  /* Ensure context */
  height: 100%;
  /* Equal height */
}

/* Adjust connector visibility if needed, or hide/restyle for grid */
.step-connector {
  display: none;
  /* Only hide if it breaks layout, but safer for grid */
}

@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   CICT CTA SECTION (Logo-Based Color Theme)
========================================= */
.cict-cta-section {
  background: linear-gradient(135deg, #0b121e 0%, #1a2a3a 50%, #0e1116 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cict-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(79, 227, 215, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(14, 120, 200, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.cict-cta-section .container {
  position: relative;
  z-index: 1;
}

.cict-cta-section h2,
.cict-cta-section p,
.cict-cta-section span,
.cict-cta-section a {
  color: #ffffff !important;
  background: #fff;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
}

.feedback-card {
  background: #fafafa;
  padding: 20px;
  margin-bottom: 15px;
}

/* =========================================
   ABOUT SECTION MULTI IMAGE ANIMATION
========================================= */
.main-img-box-multi {
  position: relative;
  width: 100%;
  height: 500px;
  /* Adjust based on original design or visual need */
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-img {
  position: absolute;
  border-radius: 15px;
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); Removed initial shadow too if desired, but user specifically said "shadow remove" in context of hover usually, but let's keep base shadow for depth unless asked otherwise. User said "shadown remove" which might mean on hover. I'll remove it on hover as requested. */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  object-fit: cover;
  transition: all 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  /* Even smoother "easeOutExpo" like feel */
  will-change: transform, box-shadow;
}

.about-img:hover {
  z-index: 10;
  box-shadow: none;
  /* Remove shadow on hover */
  animation: hoverWave 3s ease-in-out infinite alternate;
  /* Slower, smoother wave */
  transform: scale(1.05);
  /* Slight scale to start the interaction */
}

@keyframes hoverWave {
  0% {
    transform: scale(1.05) rotate(0deg);
  }

  100% {
    transform: scale(1.08) rotate(2deg);
  }
}

/* Image 1 - Top Left - Floating */
.about-img-1 {
  width: 65%;
  /* Increased size */
  top: 0px;
  left: -20px;
  z-index: 2;
  animation: floatImg1 6s ease-in-out infinite;
  /* Border removed */
}

/* Image 2 - Center Right - Pulse/Zoom */
.about-img-2 {
  width: 60%;
  /* Increased size */
  top: 80px;
  right: -20px;
  z-index: 3;
  animation: floatImg2 5s ease-in-out infinite 0.5s;
  /* Border removed */
}

/* Image 3 - Bottom Left - Slide/Fade */
.about-img-3 {
  width: 60%;
  /* Increased size */
  bottom: 0px;
  left: 0px;
  z-index: 4;
  animation: floatImg3 7s ease-in-out infinite 1s;
  /* Border removed */
}

@keyframes floatImg1 {

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

  50% {
    transform: translateY(-15px) translateX(5px);
  }
}

@keyframes floatImg2 {

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

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

@keyframes floatImg3 {

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

  50% {
    transform: translateY(-20px) rotate(2deg);
  }
}

@media (max-width: 768px) {
  .main-img-box-multi {
    height: 350px;
  }
}

/* =========================================
   PROCESS SECTION GRID (Redesign to 2 Rows)
========================================= */
.process-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

/* Make sure the connector doesn't break the grid layout if it was absolute */
.process-card {
  position: relative;
  /* Ensure context */
  height: 100%;
  /* Equal height */
}

/* Adjust connector visibility if needed, or hide/restyle for grid */
.step-connector {
  display: none;
  /* Only hide if it breaks layout, but safer for grid */
}

@media (max-width: 768px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   CICT CTA SECTION (Logo-Based Color Theme)
========================================= */
.cict-cta-section {
  background: linear-gradient(135deg, #0b121e 0%, #1a2a3a 50%, #0e1116 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.cict-cta-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 50%, rgba(79, 227, 215, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(14, 120, 200, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

.cict-cta-section .container {
  position: relative;
  z-index: 1;
}

.cict-cta-section h2,
.cict-cta-section p,
.cict-cta-section span,
.cict-cta-section a {
  color: #ffffff !important;
}

.cict-cta-section i {
  color: #4fe3d7;
}

/* Recruitment Process Section Redesign */
.recruitment-process-section {
  padding: 100px 0;
  background: #ffffff;
}

.recruitment-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
  margin-top: 50px;
}

.recruitment-process-step {
  position: relative;
}

.recruitment-process-icon {
  width: 100px;
  height: 100px;
  background: #f0f7ff;
  color: #0e78c8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin: 0 auto 20px;
  transition: all 0.4s ease;
  border: 2px dashed rgba(14, 120, 200, 0.3);
}

.recruitment-process-step:hover .recruitment-process-icon {
  background: #0e78c8;
  color: white;
  transform: scale(1.1);
  border-style: solid;
}

@media (max-width: 991px) {
  .recruitment-process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .recruitment-process-grid {
    grid-template-columns: 1fr;
  }
}

/* Network Box Particles Fix */
.network-box {
  position: relative !important;
  overflow: hidden;
}

#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 0;
}

.network-box h3,
.network-box p,
.network-box ul,
.network-box a {
  position: relative;
  z-index: 2;
}

/* Service 3D Animation Backgrounds */
.service-anim-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Behind content */
  opacity: 0.2;
  /* Subtle visibility */
  pointer-events: none;
  overflow: hidden;
}


/* =========================================
   MARQUEE SECTION REDESIGN (Attractive & Seamless)
   ========================================= */
.marquee-container {
  padding: 60px 0;
  overflow: hidden;
  position: relative;
  background: transparent;
  /* Removed interesting dark gradient */
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 600px;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.marquee-container::before {
  left: 0;
  display: none;
}

.marquee-container::after {
  right: 0;
  display: none;
}

.marquee-content {
  display: flex;
  gap: 15px;
  width: max-content;
  animation: marqueeScroll 20s linear infinite;
  /* Smooth continuous loop */
}

/* Pause on hover optional - User said "no stop", so we can remove hover pause or keep it subtle. 
   User said "automatic move the textes no stop", so I will NOT add :hover { animation-play-state: paused; } */

.feature-chip {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 15px 30px;
  background: #0b1c2d;
  /* Solid visible background */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  transition: all 0.4s ease;
  white-space: nowrap;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.feature-chip:nth-child(odd) {
  background: linear-gradient(135deg, #0b1c2d, #16283d);
  border-color: rgba(79, 227, 215, 0.2);
}

.feature-chip:nth-child(even) {
  background: linear-gradient(135deg, #0e1e30, #132438);
  border-color: rgba(14, 120, 200, 0.2);
}

.feature-chip i {
  font-size: 1.5rem;
  background: -webkit-linear-gradient(45deg, #4fe3d7, #0e78c8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.feature-chip span {
  font-size: 1.1rem;
  font-weight: 600;
  color: #e6ebef;
  letter-spacing: 0.5px;
}

/* Hover Effect for "Interesting Design" */
.feature-chip:hover {
  transform: translateY(-5px) scale(1.05);
  background: #ffffff;
  border-color: #0b1c2d;
  box-shadow: 0 10px 30px rgba(79, 227, 215, 0.4);
}

.feature-chip:hover span {
  color: #0b1c2d;
  text-shadow: none;
}

.feature-chip:hover i {
  background: #0b1c2d;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes marqueeScroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
    /* Moves half the width (original set), seamless loop */
  }
}

/* Responsive speed adjust */
@media (max-width: 768px) {
  .marquee-content {
    animation-duration: 20s;
    gap: 20px;
  }

  .feature-chip {
    padding: 10px 20px;
  }

  .feature-chip span {
    font-size: 0.95rem;
  }

  .feature-chip i {
    font-size: 1.2rem;
  }
}

/* Career Video Section */
.career-video-section {
  padding: 100px 0;
  background: linear-gradient(135deg, #0b1c2d 0%, #050a0f 100%);
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.career-video-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 50%, rgba(14, 120, 200, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(79, 227, 215, 0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* =========================================
   HERO WHITE THEME AND DARK NEXT SECTION
========================================= */
.hero-white-theme {
  background: white !important;
}

.hero-white-theme::before {
  background: radial-gradient(circle at 20% 50%, rgba(79, 227, 215, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(14, 120, 200, 0.05) 0%, transparent 50%) !important;
}

/* Hero Titles */
.hero-white-theme .noc-hero-title,
.hero-white-theme .cyber-hero-title,
.hero-white-theme .isp-hero-title,
.hero-white-theme .onsite-hero-title,
.hero-white-theme .pm-hero-title,
.hero-white-theme .maint-hero-title,
.hero-white-theme .it-hero-title,
.hero-white-theme .app-hero-title {
  color: #1a2a3a !important;
}

/* Hero Subtitles */
.hero-white-theme .noc-hero-subtitle,
.hero-white-theme .cyber-hero-subtitle,
.hero-white-theme .isp-hero-subtitle,
.hero-white-theme .onsite-hero-subtitle,
.hero-white-theme .pm-hero-subtitle,
.hero-white-theme .maint-hero-subtitle,
.hero-white-theme .it-hero-subtitle,
.hero-white-theme .app-hero-subtitle {
  color: #4a5568 !important;
}

/* Primary Buttons - Ensure they stand out */
.hero-white-theme .noc-btn-primary,
.hero-white-theme .cyber-btn-primary,
.hero-white-theme .isp-btn-primary,
.hero-white-theme .onsite-btn-primary,
.hero-white-theme .pm-btn-primary,
.hero-white-theme .maint-btn-primary {
  background: #0e78c8 !important;
  color: white !important;
  border-color: #0e78c8 !important;
}

/* Outline Buttons - Fix for Visibility */
.hero-white-theme .noc-btn-outline,
.hero-white-theme .cyber-btn-outline,
.hero-white-theme .isp-btn-outline,
.hero-white-theme .onsite-btn-outline,
.hero-white-theme .pm-btn-outline,
.hero-white-theme .maint-btn-outline,
.hero-white-theme .it-btn-outline,
.hero-white-theme .app-btn-outline {
  color: #0e78c8 !important;
  border: 2px solid #0e78c8 !important;
  background: transparent !important;
}

.hero-white-theme .noc-btn-outline:hover,
.hero-white-theme .cyber-btn-outline:hover,
.hero-white-theme .isp-btn-outline:hover,
.hero-white-theme .onsite-btn-outline:hover,
.hero-white-theme .pm-btn-outline:hover,
.hero-white-theme .maint-btn-outline:hover {
  background: #0e78c8 !important;
  color: white !important;
  border-color: #0e78c8 !important;
}

/* Badges Visibility */
.hero-white-theme .noc-badge,
.hero-white-theme .cyber-badge,
.hero-white-theme .isp-badge,
.hero-white-theme .onsite-badge,
.hero-white-theme .pm-badge,
.hero-white-theme .maint-badge,
.hero-white-theme .it-badge {
  background: rgba(14, 120, 200, 0.08) !important;
  color: #0e78c8 !important;
  border: 1px solid rgba(14, 120, 200, 0.2) !important;
}

/* Next Section Dark Theme */
.section-dark-theme {
  background: #0b121e !important;
  color: white !important;
}

.section-dark-theme .noc-section-title,
.section-dark-theme .maint-section-title,
.section-dark-theme .cyber-section-title,
.section-dark-theme .isp-section-title,
.section-dark-theme .onsite-section-title,
.section-dark-theme .pm-section-title,
.section-dark-theme .it-section-title {
  color: white !important;
}

.section-dark-theme .noc-text,
.section-dark-theme .maint-text,
.section-dark-theme .cyber-text,
.section-dark-theme .isp-text,
.section-dark-theme .onsite-text,
.section-dark-theme .pm-text,
.section-dark-theme .it-text {
  color: white !important;
  opacity: 0.9 !important;
}