:root {
  /* 🌟 WHITE & CYBER BLUE THEME CORE ENGINE VARIABLES */
  --bg: #f8fafd;               /* Soft light grey with subtle tech-blue tint */
  --bg-alt: #edf2f9;           /* Beautiful alternate gray for tickers and footer */
  --surface: rgba(255, 255, 255, 0.85); /* Premium glassmorphism light surface */
  --surface-2: #ffffff;
  
  /* 🔏 ALL ORANGE/PINK CONVERTED TO PREMIUM CYBER BLUE ENGINE */
  --gold: #0052ff;             /* Deep Cyber Tech Blue */
  --gold-2: #00d2ff;           /* Electric Neon Blue */
  --neon-pink: linear-gradient(135deg, #0052ff, #00d2ff); /* Cyber Tech Blue gradient */
  --btn-grad: linear-gradient(135deg, #0044ff, #00c4ff);  /* Pure corporate neon blue gradient */
  
  /* Soft blue ambient back-glows adjusted for light contrast */
  --teal-glow: rgba(0, 210, 255, 0.2);
  --pink-glow: rgba(0, 82, 255, 0.08);
  
  /* Luxury light contrast shadow mechanics */
  --card-shadow-default: 0 10px 30px rgba(0, 82, 255, 0.03), 0 2px 10px rgba(0, 0, 0, 0.02);
  --card-shadow-active: 0 20px 40px rgba(0, 82, 255, 0.12), 0 5px 15px rgba(0, 210, 255, 0.08);
  
  /* High contrast readable corporate typography */
  --text: #0a0f18;             /* Deep Navy Dark Text for perfect reading */
  --muted: #5c6b82;            /* Beautiful medium blue-gray for paragraphs */
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; line-height: 1.5; overflow-x: hidden;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px; background-position: center top;
}



h1, h2, h3, .display { font-family: 'Sora', sans-serif; }
a { color: inherit; text-decoration: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
img { max-width: 100%; display: block; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap1 { max-width: 1700px; margin: 0 auto; padding: 0 32px; }

/* ---- INTERACTIVE CUSTOM POINTERS ---- */


/* ---- UNIFIED SCROLL REVEAL ACTIONS ---- */

.scroll-reveal { opacity: 0; transform: translateY(25px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.scroll-reveal.active { opacity: 1; transform: translateY(0); }

/* ---- GLOW & TEXT SHINE STYLE ---- */
.text-shine { text-shadow: 0 2px 12px rgba(0, 82, 255, 0.04); }
.highlight { background: var(--neon-pink); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; font-weight: 800; filter: drop-shadow(0 2px 10px rgba(0, 210, 255, 0.3)); }

/* ---- AI CONSTELLATION NODE NETWORK BACKGROUND ---- */
.stars-container {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden;
}
#aiNodeCanvas {
  display: block; width: 100%; height: 100%; opacity: 0.6;
}

@keyframes gridLineSync {
  0%, 100% { border-color: rgba(0, 82, 255, 0.1); box-shadow: var(--card-shadow-active); }
  50% { border-color: rgba(0, 210, 255, 0.15); box-shadow: var(--card-shadow-active); }
}

/* Eyebrow Pill */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .15em; font-weight: 700; color: #0052ff; text-transform: uppercase; background: rgba(0, 82, 255, 0.05); border: 1px solid rgba(0, 82, 255, 0.12); padding: 6px 16px; border-radius: 999px; margin-bottom: 24px;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #00d2ff; box-shadow: 0 0 10px #00d2ff; }
.h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 700; max-width: 720px; letter-spacing: -.01em; }
.lead { color: var(--muted); max-width: 620px; margin-top: 16px; font-size: 15.5px; }
section { padding: 35px 0; position: relative; }

/* Buttons Sync */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 999px; font-weight: 600; font-size: 15px; border: 1px solid transparent; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.btn-gold { background: var(--btn-grad); color: #fff; box-shadow: 0 8px 24px rgba(0, 82, 255, 0.2); }
.btn-gold:hover { transform: translateY(-3px) scale(1.03); box-shadow: var(--card-shadow-active); }
.btn-ghost { border-color: rgba(0,0,0,0.12); color: var(--text); background: rgba(255,255,255,0.8); backdrop-filter: blur(5px); }
.btn-ghost:hover { border-color: #0052ff; color: #0052ff; background: rgba(0,82,255,0.03); transform: translateY(-3px); }

.pink-blob { position: absolute; top: -10%; left: -5%; height: 600px; background: radial-gradient(circle, var(--pink-glow), transparent 70%); pointer-events: none; z-index: 1; mix-blend-mode: multiply; }
.purple-ambient-glow { position: absolute; top: 30%; right: -10%; width: 500px; height: 500px; background: radial-gradient(circle, rgba(138, 43, 226, 0.05), transparent 70%); pointer-events: none; z-index: 1; mix-blend-mode: multiply; }

/* ==========================================================================
    NAVBAR COMPONENT
   ========================================================================== */
header { position: fixed; top: 16px; left: 0; right: 0; z-index: 200; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
header nav {
  background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(20px); border: 1px solid rgba(0, 82, 255, 0.1); border-radius: 999px; padding: 12px 28px; display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--card-shadow-active) !important; animation: gridLineSync 6s ease-in-out infinite;
}
header.scrolled { top: 12px; }
header.scrolled nav { border-radius: 24px; max-width: 1400px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 82, 255, 0.15); box-shadow: var(--card-shadow-active) !important; animation: none; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; font-family: 'Sora', sans-serif; color: var(--text); }
.logo-mark { width: 34px; height: 34px; border-radius: 9px; background: var(--btn-grad); display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 13px; }
.nav-links a { font-size: 14.5px; color: var(--muted); margin: 0 18px; font-weight: 500; }
.nav-links a:hover { color: var(--text); text-shadow: 0 0 10px rgba(0,0,0,0.05); }

/* HERO */
.hero { padding: 150px 0 60px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(34px, 4.8vw, 58px); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; margin: 6px 0 22px; color: var(--text); }
.hero p { color: var(--muted); font-size: 16.5px; max-width: 560px; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 32px 0 56px; }
.hero-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 36px; }
.hero-stats div b { display: block; font-family: 'Sora', sans-serif; font-size: 30px; color: #0052ff; text-shadow: 0 2px 10px rgba(0,82,255,0.15); }
.hero-stats div span { font-size: 12.5px; color: var(--muted); }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 380px; }
.robo-glow { position: absolute; width: 350px; height: 350px; border-radius: 50%; background: radial-gradient(circle, var(--teal-glow), transparent 70%); mix-blend-mode: multiply; }
.robo-image { position: relative; max-width: 100%; z-index: 2; filter: drop-shadow(0 15px 30px rgba(0,0,0,0.12)); animation: float 5s ease-in-out infinite; }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.float-badge { position: absolute; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); border: 1px solid rgba(0, 0, 0, 0.06); padding: 10px 18px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--text); box-shadow: var(--card-shadow-default); }
.b1 { top: 20%; right: -10vh; }
.b2 { bottom: 15%; left: 0; }

/* ==========================================================================
   📐 4-COLUMN WORKSPACE WITH STICKY DEVICE (ZIG-ZAG TO FULL-WIDTH ENGINE)
   ========================================================================== */
.work-workspace-container {
  display: grid;
  grid-template-columns: 1fr 1fr 280px 1fr 1fr; /* 2 Columns Left | Phone | 2 Columns Right */
  gap: 24px;
  align-items: start;
  width: 100%;
  margin-top: 52px;
  position: relative;
}

.work-column-left, 
.work-column-right {
  display: grid;
  grid-template-columns: repeat(2, 1fr) !important; /* Forces 2-lines on each side of the phone */
  gap: 24px;
  width: 100%;
}

.work-column-left { grid-column: 1 / 3; }
.work-column-right { grid-column: 4 / 6; }

.phone-center-column {
  display: flex; justify-content: center; position: sticky; top: 140px; z-index: 10; width: 100%;
}

/* Smartphone સિમ્યુલેટર Setup */
.mock-device { 
  width: 260px; min-width: 260px !important; max-width: 260px !important; height: 500px; 
  background: #0c0c0f; border: 10px solid #23232e; border-radius: 40px; position: relative; 
  box-shadow: 0 30px 60px rgba(0,0,0,0.15); overflow: hidden; display: flex; flex-direction: column; 
}
.phone-notch { width: 110px; height: 18px; background: #23232e; position: absolute; top: 0; left: 50%; transform: translateX(-50%); border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; z-index: 20; pointer-events: none; }
.phone-screen-display { width: 100%; height: 100%; background: #fafafa; position: relative; overflow: hidden !important; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 !important; }
.phone-home-indicator { width: 90px; height: 4px; background: rgba(0,0,0,0.15); position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); border-radius: 2px; pointer-events: none; }
.screen-placeholder { color: var(--muted); font-size: 13px; }
.pulsing-circle { display: inline-block; width: 14px; height: 14px; background: #0052ff; border-radius: 50%; margin-bottom: 12px; box-shadow: 0 0 12px #0052ff; animation: pulse 2s infinite; }
@keyframes pulse { 0% {transform: scale(0.9); opacity:0.6;} 50% {transform: scale(1.2); opacity:1;} 100% {transform: scale(0.9); opacity:0.6;} }

/* Card Rendering Styles inside Workspace */
.work-card { background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); border: 1px solid rgba(0, 82, 255, 0.06); border-radius: var(--radius); overflow: hidden; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: var(--card-shadow-default); }
.work-card:hover { transform: translateY(-8px) scale(1.04); border-color: rgba(0, 82, 255, 0.3); box-shadow: var(--card-shadow-active); }
.work-card.active { border-color: rgba(0, 82, 255, 0.4); background: rgba(0, 82, 255, 0.02); box-shadow: none; }
.work-card img { height: 170px; width: 100%; object-fit: cover; }
.work-card-body { padding: 18px 20px; border-top: 1px solid rgba(0, 0, 0, 0.06); }
.work-card-body b { display: block; font-size: 15px; font-family: 'Sora', sans-serif; color: var(--text); }
.work-card-body span { font-size: 13px; color: var(--muted); }

/* VERTICAL MOBILE SLIDER MECHANICS */
.phone-carousel-track { display: flex; width: 100%; height: 100%; overflow-x: scroll; scroll-behavior: smooth; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.phone-carousel-track::-webkit-scrollbar { display: none; }
.phone-carousel-slide { width: 100%; height: 100%; flex: none; scroll-snap-align: start; object-fit: cover; }
.carousel-next-indicator { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; background: rgba(255, 255, 255, 0.95); border: 1px solid rgba(0, 82, 255, 0.2); border-radius: 50%; color: #0052ff; font-size: 11px; display: flex; align-items: center; justify-content: center; z-index: 30; cursor: pointer; box-shadow: var(--card-shadow-default); opacity: 0; transition: all 0.3s ease; }
.phone-screen-display.has-carousel .carousel-next-indicator { opacity: 1; }

/* ==========================================================================
   📊 STRATEGY GRID CARDS SECTION
   ========================================================================== */
.strategy-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 52px; }
.strategy-card { 
  background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 82, 255, 0.08) !important; 
  border-radius: var(--radius); padding: 28px; position: relative; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  backdrop-filter: blur(5px); box-shadow: var(--card-shadow-default) !important; 
}
.strategy-card:hover { border-color: #0052ff !important; transform: translateY(-8px) scale(1.03); box-shadow: var(--card-shadow-active) !important; }
.strategy-card .num { position: absolute; top: 20px; right: 22px; font-family: 'Sora', sans-serif; font-weight: 800; font-size: 26px; color: #0052fcc9 !important; transition: color 0.3s ease; }
.strategy-card:hover .num { color: rgba(0, 82, 255, 0.4) !important; }
.strategy-card h3 { font-size: 18px; margin: 6px 0 8px; color: var(--text); }
.strategy-card p { color: var(--muted); font-size: 13.5px; }

/* ==========================================================================
   🎠 ZIG-ZAG LIVE INFINITE SCROLLING TESTIMONIAL CAROUSEL ENGINE
   ========================================================================== */
.test-row { display: flex; flex-direction: column; overflow: hidden; position: relative; width: 100%; padding: 20px 0; }
.test-row::before, .test-row::after { content: ""; height: 100%; width: 150px; position: absolute; z-index: 2; pointer-events: none; top: 0; }
.test-row::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.test-row::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.test-track-carousel-1 { display: flex; gap: 24px; width: max-content; animation: scrollLeftCarousel1 35s linear infinite; }
.test-track-carousel-2 { display: flex; gap: 24px; width: max-content; animation: scrollLeftCarousel2 35s linear infinite; }

@keyframes scrollLeftCarousel1 { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes scrollLeftCarousel2 { 0% { transform: translateX(-192px); } 100% { transform: translateX(calc(-50% - 192px)); } }

.test-card { width: 360px !important; flex: none; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 82, 255, 0.08); border-radius: var(--radius); padding: 28px; backdrop-filter: blur(5px); box-shadow: var(--card-shadow-default); }
.stars { color: #ff8e53; letter-spacing: 2px; font-size: 14px; }
.test-score { color: var(--muted); font-size: 13px; margin-left: 6px; }
.test-card p { color: var(--text); font-size: 14px; margin: 16px 0 22px; }
.test-who { display: flex; align-items: center; gap: 12px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--btn-grad); flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; }
.test-who b { font-size: 14px; display: block; color: var(--text); }
.test-who span { font-size: 12px; color: var(--muted); }

/* CTA & Timeline Centered Setup */
.cta-banner { background: linear-gradient(160deg, #ffffff, #edf2f9); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cta-banner-inner p { margin: 20px 0 28px; }

/* ==========================================================================
   🧬 GRAPHIC CENTERED ZIG-ZAG TIMELINE ARCHITECTURE
   ========================================================================== */
.zigzag-timeline-container { position: relative; max-width: 1200px; margin: 60px auto 0; padding: 20px 0; width: 100%; }
.timeline-center-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: linear-gradient(to bottom, #0052ff, #00d2ff, rgba(0, 82, 255, 0.05)); transform: translateX(-50%); z-index: 1; }
.timeline-row-item { position: relative; display: flex; width: 100%; margin-bottom: 40px; z-index: 2; }
.timeline-row-item:last-child { margin-bottom: 0; }
.timeline-row-item.row-left { justify-content: flex-start; padding-right: 50%; }
.timeline-row-item.row-right { justify-content: flex-end; padding-left: 50%; }

.timeline-node-dot { position: absolute; left: 50%; top: 26px; width: 16px; height: 16px; background: #ffffff; border: 4px solid #0052ff; border-radius: 50%; transform: translateX(-50%); box-shadow: 0 0 12px rgba(0, 82, 255, 0.4); transition: all 0.3s ease; z-index: 3; }
.timeline-row-item:hover .timeline-node-dot { background: #00d2ff; box-shadow: 0 0 16px #00d2ff; transform: translateX(-50%) scale(1.15); }

.timeline-badge-year { position: absolute; left: 50%; top: 20px; font-family: 'Sora', sans-serif; font-size: 13px; font-weight: 700; color: #0052ff; background: var(--bg-alt); padding: 4px 12px; border-radius: 99px; border: 1px solid rgba(0, 82, 255, 0.1); z-index: 2; }
.row-left .timeline-badge-year { transform: translateX(24px); }
.row-right .timeline-badge-year { transform: translateX(-115%); }

.timeline-card-content { background: #ffffff; border: 1px solid rgba(0, 82, 255, 0.06); border-radius: var(--radius); padding: 28px; width: 90%; box-shadow: var(--card-shadow-default); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.row-left .timeline-card-content { margin-right: auto; margin-left: 5%; text-align: right; }
.row-right .timeline-card-content { margin-left: auto; margin-right: 5%; text-align: left; }
.timeline-card-content h3 { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.timeline-card-content p { font-size: 14px; color: var(--muted); line-height: 1.6; }
.timeline-row-item:hover .timeline-card-content { transform: translateY(-4px); border-color: rgba(0, 82, 255, 0.15); box-shadow: var(--card-shadow-active); }

.shark-tank-card { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 20px; align-items: center; width: 95% !important; text-align: left !important; }
.tl-client-showcase { position: relative; width: 100%; max-width: 440px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0, 82, 255, 0.12); box-shadow: var(--card-shadow-default); }
.tl-client-img { width: 100%; height: 220px; object-fit: cover; display: block; }
.client-badge { position: absolute; top: 14px; left: 14px; background: var(--btn-grad); color: #ffffff; padding: 6px 14px; border-radius: 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; }

/* Blog Grid */
.blog-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; }
.blog-card { border: 1px solid rgba(0, 82, 255, 0.06); border-radius: var(--radius); overflow: hidden; background: rgba(255, 255, 255, 0.8); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); backdrop-filter: blur(5px); box-shadow: var(--card-shadow-default); }
.blog-card:hover { border-color: #0052ff; transform: translateY(-8px) scale(1.03); box-shadow: var(--card-shadow-active); }
.blog-thumb { height: 150px; position: relative; overflow: hidden; }
.blog-body { padding: 22px; }
.blog-body span { font-size: 11.5px; color: #0052ff; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.blog-body h3 { font-size: 17px; margin: 10px 0 8px; line-height: 1.3; color: var(--text); }
.blog-body p { color: var(--muted); font-size: 13.5px; }

/* ==========================================================================
   ❓ FAQ ACCORDION ENGINE WITH LIGHT BORDER CONTRAST
   ========================================================================== */
.faq-list { margin-top: 48px; max-width: 820px; display: flex; flex-direction: column; gap: 16px; }
.faq-item {
  background: rgba(255, 255, 255, 0.6); border: 1px solid rgba(0, 82, 255, 0.08) !important; 
  border-radius: 12px; padding: 0 16px; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.faq-item:hover { border-color: rgba(0, 82, 255, 0.2) !important; box-shadow: var(--card-shadow-default); background: #ffffff; }
.faq-item.open { border-color: #0052ff !important; background: #ffffff; box-shadow: 0 10px 25px rgba(0, 82, 255, 0.04); }
.faq-item .faq-q { display: flex; justify-content: space-between; align-items: center; padding: 20px 4px; cursor: pointer; font-family: 'Sora', sans-serif; font-size: 16px; font-weight: 600; color: var(--text); }
.faq-q .plus { font-size: 20px; color: #0052ff; transition: 0.25s; flex: none; margin-left: 20px; }
.faq-item.open .plus { transform: rotate(45deg); color: #0044ff; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; color: var(--muted); font-size: 14.5px; padding: 0 4px; }
.faq-item.open .faq-a { max-height: 200px; padding-bottom: 20px; }

/* FOOTER SETUP */
footer { border-top: 1px solid var(--line); padding: 60px 0 30px; color: var(--muted); background: #ffffff; }
.foot-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; margin-bottom: 40px; }
.foot-brand p { font-size: 13.5px; margin-top: 14px; max-width: 280px; }
.foot-brand .socials { display: flex; gap: 16px; margin-top: 16px; }
.foot-brand .socials a { font-size: 12.5px; }
.foot-brand .socials a:hover { color: #0052ff; }
.foot-links { display: flex; gap: 60px; flex-wrap: wrap; }
.foot-col h4 { color: var(--text); font-size: 14px; margin-bottom: 14px; font-family: 'Sora', sans-serif; }
.foot-col a { display: block; font-size: 13.5px; margin-bottom: 10px; color: var(--muted); }
.foot-col a:hover { color: #0052ff; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 24px; display: flex; justify-content: space-between; font-size: 12.5px; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   🤖 AI CHATBOT COMPONENT STYLES (Cyber Blue Gradient Edition)
   ========================================================================== */
.chatbot-wrapper { position: fixed; bottom: 26px; right: 26px; z-index: 2000; }

.chat-bubble {
  width: 56px; height: 56px; border-radius: 50% !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; max-width: 56px !important; cursor: pointer; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(0, 82, 255, 0.1); box-shadow: var(--card-shadow-default); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); overflow: hidden;
}

.robot-image-container { width: 100%; height: 100%; background: var(--btn-grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 8px; transition: transform 0.3s ease; }
.bot-bubble-img { width: 100%; height: 100%; object-fit: contain; }
.chat-bubble:hover { border-color: #0052ff !important; transform: translateY(-4px) scale(1.05); box-shadow: var(--card-shadow-active); }
.chat-bubble:hover .robot-image-container { transform: rotate(10deg); }

.chat-window { position: absolute; bottom: 0; right: 0; width: 360px; height: 480px; background: #ffffff; border: 1px solid rgba(0, 82, 255, 0.15); border-radius: 20px; box-shadow: var(--card-shadow-active); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.85); opacity: 0; pointer-events: none; transform-origin: bottom right; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.chatbot-wrapper.chat-open .chat-window { transform: scale(1); opacity: 1; pointer-events: auto; }
.chatbot-wrapper.chat-open .chat-bubble { opacity: 0; pointer-events: none; transform: scale(0.8); }

.chat-header { background: rgba(248, 249, 250, 0.9); padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(0,0,0,0.06); }
.chat-header-user { display: flex; align-items: center; gap: 12px; }
.bot-avatar-container { width: 36px; height: 36px; background: var(--btn-grad); border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 5px; box-shadow: 0 4px 12px rgba(0,82,255,0.2); }
.bot-header-img { width: 100%; height: 100%; object-fit: contain; }
.chat-header h4 { font-size: 14.5px; font-family: 'Sora', sans-serif; color: var(--text); }
.status-online { font-size: 11px; color: #10b981; display: block; }
.close-chat-btn { background: none; border: none; color: var(--muted); font-size: 24px; line-height: 1; }

/* 🌟 100% FIXXED GRADIENT BODY CHAT CONTAINER */
.chat-body-messages { 
  flex: 1; 
  padding: 20px; 
  overflow-y: auto; 
  display: flex; 
  flex-direction: column; 
  gap: 14px; 
  /* आपके द्वारा मांगा गया प्योर ब्लू कस्टमाइज़्ड ग्रेडिएंट */
  /* background: linear-gradient(135deg, #0044ff, #00c4ff) !important;  */
  position: relative;
}

/* एनीमेशन बबल्स */
.msg-bubble { max-width: 80%; padding: 12px 16px; border-radius: 16px; font-size: 13.5px; line-height: 1.45; word-wrap: break-word; animation: bubbleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* बोट का मैसेज बॉक्स - लाइट ग्लास लुक ताकि डार्क ब्लू बैकग्राउंड पर परफेक्ट कंट्रास्ट रहे */
.bot-msg { 
  background: rgba(255, 255, 255, 0.95); 
  border: 1px solid rgba(255, 255, 255, 0.2); 
  color: #0a0f18; 
  align-self: flex-start; 
  border-bottom-left-radius: 4px; 
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

/* यूजर का मैसेज बॉक्स - प्योर व्हाइट विद लाइट शैडो */
.user-msg { 
  background: #ffffff; 
  color: #0044ff; 
  align-self: flex-end; 
  border-bottom-right-radius: 4px; 
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  font-weight: 600;
}

/* सजेशन चिप्स कंटेनर */
.chat-suggestions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; align-self: flex-start; }

/* डार्क ब्लू ग्रेडिएंट पर चमकने वाले वाइट पारदर्शी चिप्स */
.suggest-chip { 
  /* background: rgba(255, 255, 255, 0.15);  */
  border: 1px solid rgba(255, 255, 255, 0.25); 
  /* color: #ffffff;  */
  padding: 8px 14px; 
  border-radius: 999px; 
  font-size: 12px; 
  font-weight: 600; 
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: all 0.3s ease; 
}

.suggest-chip:hover { 
  border-color: #ffffff; 
  background: #ffffff; 
  color: #0044ff; 
  transform: translateY(-2px); 
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

/* चैट फुटर इनपुट */
.chat-footer-input { padding: 14px 16px; display: flex; gap: 10px; background: #ffffff; border-top: 1px solid rgba(0,0,0,0.06); }
.chat-footer-input input { flex: 1; background: #f8f9fa; border: 1px solid rgba(0,0,0,0.06); border-radius: 999px; padding: 10px 18px; color: var(--text); font-size: 13.5px; }
.chat-footer-input input:focus { outline: none; border-color: #0052ff; background: #ffffff; }
.send-msg-btn { width: 38px; height: 38px; border-radius: 50%; background: var(--btn-grad); border: none; color: #fff; font-size: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,82,255,0.2); }

@keyframes bubbleIn { from { opacity: 0; transform: translateY(10px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
/* ==========================================================================
   🎠 CLIENT BRAND CAROUSEL STYLES
   ========================================================================== */
.clients-carousel-section { padding: 20px 0; background: #ffffff; border-bottom: 1px solid rgba(0, 82, 255, 0.05); overflow: hidden; width: 100%; }
.clients-carousel-section span { font-size: 12px; font-family: 'Sora', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); display: block; text-align: center; margin-bottom: 28px; }
.infinite-track-container { display: flex; width: 100%; overflow: hidden; position: relative; }
.infinite-track-container::before, .infinite-track-container::after { content: ""; height: 100%; width: 150px; position: absolute; z-index: 2; pointer-events: none; }
.infinite-track-container::before { left: 0; background: linear-gradient(to right, #ffffff, transparent); }
.infinite-track-container::after { right: 0; background: linear-gradient(to left, #ffffff, transparent); }
.carousel-infinite-row { display: flex; gap: 10px; align-items: center; animation: continuousScroll 25s linear infinite; width: max-content; }
.client-logo-box { height: 64px; width: 180px; display: flex; align-items: center; justify-content: center; opacity: 1 !important; transition: transform 0.3s ease; }
.client-logo-box:hover { transform: scale(1.05); }
.client-logo-box img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; filter: none !important; -webkit-filter: none !important; mix-blend-mode: normal !important; opacity: 1 !important; }

@keyframes continuousScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ==========================================================================
   📱 🚀 PERFECT FLUID RESPONSIVE VIEWPORT BREAKPOINTS
   ========================================================================== */
@media (max-width: 1280px) {
  .work-workspace-container { grid-template-columns: 1fr 260px 1fr; }
  .work-column-left, .work-column-right { grid-template-columns: 1fr !important; grid-column: auto; }
}

@media(max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; text-align: center; }
  .hero p { margin: 0 auto; } .hero-actions { justify-content: center; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); justify-content: center; }
  .hero-visual { min-height: auto; max-width: 340px; margin: 40px auto 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .robo-image { width: 100%; max-width: 260px; margin-bottom: 8px; order: 1; }
  .float-badge.b1 { position: relative; top: auto; right: auto; width: max-content; display: inline-flex; order: 2; animation: none; }
  .float-badge.b2 { position: relative; bottom: auto; left: auto; width: max-content; display: inline-flex; order: 3; animation: none; }
  
  /* Work 3-Div Mobile Realignment Fix */
  .work-workspace-container { grid-template-columns: 1fr; gap: 32px; }
  .phone-center-column { position: relative; top: auto; order: 2; margin: 20px 0; }
  .work-column-left { order: 1; grid-template-columns: repeat(2, 1fr) !important; }
  .work-column-right { order: 3; grid-template-columns: repeat(2, 1fr) !important; }
  
  /* Mobile Phone Vertical Slide Core */
  .phone-carousel-track { flex-direction: column !important; overflow-x: hidden !important; overflow-y: scroll !important; scroll-snap-type: y mandatory !important; }
  .phone-carousel-track .phone-carousel-slide { width: 100% !important; height: 100% !important; scroll-snap-align: start !important; flex-shrink: 0 !important; }
  .carousel-next-indicator { right: 50% !important; top: auto !important; bottom: 20px !important; transform: translateX(50%) rotate(90deg) !important; }

  /* Dropdown Menu Mobile Core */
  .menu-toggle-trigger { display: flex; width: 30px; height: 22px; flex-direction: column; justify-content: space-between; background: none; border: none; outline: none; z-index: 250; }
  .menu-toggle-trigger span { display: block; width: 100%; height: 3px; background: var(--text); border-radius: 4px; transition: all 0.3s ease-in-out; }
  .nav-links { position: absolute; top: 100%; left: 0; right: 0; background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(20px); border: 1px solid rgba(0, 82, 255, 0.08); border-radius: 24px; display: flex; flex-direction: column; padding: 32px; gap: 20px; margin-top: 12px; box-shadow: 0 15px 35px rgba(0, 82, 255, 0.06); opacity: 0; transform: translateY(-20px); pointer-events: none; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease-in-out; z-index: 240; }
  header.menu-active .nav-links { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a { margin: 0; font-size: 16px; font-weight: 600; width: 100%; text-align: center; padding: 8px 0; border-bottom: 1px solid rgba(0, 82, 255, 0.03); }
  .nav-links a:last-child { border-bottom: none; }
  .nav-cta { display: none; }
  header.menu-active .menu-toggle-trigger span:nth-child(1) { transform: translateY(9.5px) rotate(45deg); background: #ff5376; }
  header.menu-active .menu-toggle-trigger span:nth-child(2) { opacity: 0; transform: translateX(-20px); }
  header.menu-active .menu-toggle-trigger span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); background: #ff5376; }

  /* Timeline & Grid Restructure */
  .strategy-grid, .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline-center-line { left: 20px; transform: none; }
  .timeline-row-item { flex-direction: column; padding-left: 44px !important; padding-right: 0 !important; margin-bottom: 32px; }
  .timeline-node-dot { left: 20px; top: 12px; transform: translateX(-50%); }
  .timeline-row-item:hover .timeline-node-dot { transform: translateX(-50%) scale(1.1); }
  .timeline-badge-year { position: relative; left: 0 !important; top: 0; transform: none !important; display: inline-block; margin-bottom: 8px; }
  .timeline-card-content { width: 100% !important; margin: 0 !important; text-align: left !important; padding: 20px; }
  .shark-tank-card { grid-template-columns: 1fr; gap: 16px; }
  
  .custom-cursor, .custom-cursor-blur { display: none !important; }
}

@media(max-width: 700px) {
  .strategy-grid, .blog-grid { grid-template-columns: 1fr; }
  .work-column-left, .work-column-right { grid-template-columns: 1fr !important; }
}

@media(max-width: 480px) {
  .chat-bubble { width: 48px; height: 48px; max-width: 48px !important; }
  .robot-image-container { padding: 6px; }
  .chat-window { width: calc(100vw - 40px); height: 75vh; }
}

/* ---- PRELOADER & TYPEWRITER ACCENTS ---- */
.preloader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #f8f9fa; z-index: 99999; display: flex; align-items: center; justify-content: center; transition: transform 1.1s cubic-bezier(0.85, 0, 0.15, 1); transform: translateY(0); }
.preloader-content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.preloader-brand { font-family: 'Sora', sans-serif; font-size: clamp(28px, 5vw, 42px); font-weight: 800; text-transform: uppercase; background: linear-gradient(135deg, #121214 30%, #0052ff 70%, #00d2ff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: pulseBrand 2s ease-in-out infinite; }
.preloader-spinner { position: relative; width: 50px; height: 50px; }
.spinner-dot { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 3px solid transparent; border-top-color: #0052ff; border-radius: 50%; animation: spinCircle 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; box-shadow: 0 0 12px #0052ff; }
.spinner-dot:nth-child(2) { border-top-color: #00f2fe; animation-duration: 0.8s; animation-direction: reverse; width: 36px; height: 36px; top: 7px; left: 7px; box-shadow: 0 0 12px #00f2fe; }

@keyframes spinCircle { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes pulseBrand { 0%, 100% { transform: scale(0.98); } 50% { transform: scale(1.02); } }
.preloader-overlay.fade-out { opacity: 1; transform: translateY(-100%); pointer-events: none; }
.typewriter-cursor { color: #0052ff; font-weight: 400; animation: blinkCursor 1.2s infinite; margin-left: 2px; display: inline-block; }
@keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* 🚀 Testimonials Section की सभी हेडिंग्स को सेंटर करने के लिए फिक्स */
#testimonials .wrap {
  display: flex;
  flex-direction: column;   /* 🌟 इसके कारण हेडिंग और पैराग्राफ एक के नीचे एक आएंगे, एक लाइन में नहीं */
  align-items: center;      /* 🌟 पूरे फ्लेक्स ब्लॉक को हॉरिजॉन्टली सेंटर करेगा */
  text-align: center;       /* 🌟 टेक्स्ट की लाइन्स को बीच में अलाइन करेगा */
}

/* अगर आप चाहते हैं कि पैराग्राफ टेक्स्ट भी सुंदर तरीके से सेंटर में रहे */
#testimonials .lead {
  margin-left: auto;
  margin-right: auto;
}
/* 🚀 Testimonials Section की सभी हेडिंग्स को सेंटर करने के लिए फिक्स */
#work .wrap {
  display: flex;
  flex-direction: column;   /* 🌟 इसके कारण हेडिंग और पैराग्राफ एक के नीचे एक आएंगे, एक लाइन में नहीं */
  align-items: center;      /* 🌟 पूरे फ्लेक्स ब्लॉक को हॉरिजॉन्टली सेंटर करेगा */
  text-align: center;       /* 🌟 टेक्स्ट की लाइन्स को बीच में अलाइन करेगा */
}

/* अगर आप चाहते हैं कि पैराग्राफ टेक्स्ट भी सुंदर तरीके से सेंटर में रहे */
#work .lead {
  margin-left: auto;
  margin-right: auto;
}
/* 🚀 Testimonials Section की सभी हेडिंग्स को सेंटर करने के लिए फिक्स */
#journey .wrap {
  display: flex;
  flex-direction: column;   /* 🌟 इसके कारण हेडिंग और पैराग्राफ एक के नीचे एक आएंगे, एक लाइन में नहीं */
  align-items: center;      /* 🌟 पूरे फ्लेक्स ब्लॉक को हॉरिजॉन्टली सेंटर करेगा */
  text-align: center;       /* 🌟 टेक्स्ट की लाइन्स को बीच में अलाइन करेगा */
}

/* अगर आप चाहते हैं कि पैराग्राफ टेक्स्ट भी सुंदर तरीके से सेंटर में रहे */
#journey .lead {
  margin-left: auto;
  margin-right: auto;
}
/* 🚀 Testimonials Section की सभी हेडिंग्स को सेंटर करने के लिए फिक्स */
#about .wrap {
  display: flex;
  flex-direction: column;   /* 🌟 इसके कारण हेडिंग और पैराग्राफ एक के नीचे एक आएंगे, एक लाइन में नहीं */
  align-items: center;      /* 🌟 पूरे फ्लेक्स ब्लॉक को हॉरिजॉन्टली सेंटर करेगा */
  text-align: center;       /* 🌟 टेक्स्ट की लाइन्स को बीच में अलाइन करेगा */
}

/* अगर आप चाहते हैं कि पैराग्राफ टेक्स्ट भी सुंदर तरीके से सेंटर में रहे */
#about .lead {
  margin-left: auto;
  margin-right: auto;
}
#blog .wrap {
  display: flex;
  flex-direction: column;   /* 🌟 इसके कारण हेडिंग और पैराग्राफ एक के नीचे एक आएंगे, एक लाइन में नहीं */
  align-items: center;      /* 🌟 पूरे फ्लेक्स ब्लॉक को हॉरिजॉन्टली सेंटर करेगा */
  text-align: center;       /* 🌟 टेक्स्ट की लाइन्स को बीच में अलाइन करेगा */
}

/* अगर आप चाहते हैं कि पैराग्राफ टेक्स्ट भी सुंदर तरीके से सेंटर में रहे */
#blog .lead {
  margin-left: auto;
  margin-right: auto;
}
#faq .wrap {
  display: flex;
  flex-direction: column;   /* 🌟 इसके कारण हेडिंग और पैराग्राफ एक के नीचे एक आएंगे, एक लाइन में नहीं */
  align-items: center;      /* 🌟 पूरे फ्लेक्स ब्लॉक को हॉरिजॉन्टली सेंटर करेगा */
  text-align: center;       /* 🌟 टेक्स्ट की लाइन्स को बीच में अलाइन करेगा */
}

/* अगर आप चाहते हैं कि पैराग्राफ टेक्स्ट भी सुंदर तरीके से सेंटर में रहे */
#faq .lead {
  margin-left: auto;
  margin-right: auto;
}


/* *************************************service page ******************** */
/* ==========================================================================
   🛍️ PREMIUM 3-COLUMN SERVICES GRID & CARD ARCHITECTURE
   ========================================================================== */

/* सर्विसेज मास्टर ग्रिड कंटेनर - पोर्टफोलियो ग्रिड की तरह परफेक्ट 3-कॉलम लेआउट */
.services-cards-wrapper { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr) !important; /* 🚀 पोर्टफोलियो की तरह सुंदर 3-कॉलम स्ट्रक्चर */
  gap: 32px; /* कार्ड्स के बीच शानदार और साफ़ स्पेस */
  margin-top: 48px; 
  width: 100%;
}

/* सर्विस कार्ड कोर डिज़ाइन - ग्लासमोर्फिज्म + प्रीमियम एम्बिएंट शैडो */
.service-card-core { 
  background: rgba(255, 255, 255, 0.9) !important; 
  backdrop-filter: blur(10px); 
  
  /* 🌟 फिक्स 1: पोर्टफोलियो और स्ट्रेटेजी की तरह लाइट थीम-ब्लू बॉर्डर */
  border: 1px solid rgba(0, 82, 255, 0.08) !important; 
  border-radius: var(--radius); 
  padding: 36px 32px; 
  position: relative; 
  overflow: hidden;
  display: flex;
  flex-direction: column;
  
  /* 🌟 फिक्स 2: डिफ़ॉल्ट रूप से फ्लोटिंग लुक देने के लिए एम्बिएंट शैडो */
  box-shadow: var(--card-shadow-default) !important; 
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); 
  cursor: pointer; 
}

/* 🌟 होवर इफ़ेक्ट: कर्सर ले जाने पर कार्ड ऊपर उठेगा और नियॉन ब्लू बॉर्डर चमकेगी */
.service-card-core:hover { 
  transform: translateY(-8px) scale(1.03); 
  border-color: #0052ff !important; 
  box-shadow: var(--card-shadow-active) !important; 
}

/* आइकॉन स्लॉट डिज़ाइन */
.card-icon-slot { 
  font-size: 36px; 
  margin-bottom: 20px; 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: rgba(0, 82, 255, 0.05);
  border-radius: 14px;
}

/* सर्विस कार्ड हेडिंग */
.service-card-core h3 { 
  font-size: 20px; 
  font-weight: 700; 
  color: var(--text); 
  margin-bottom: 12px; 
  font-family: 'Sora', sans-serif;
}

/* सर्विस कार्ड पैराग्राफ */
.service-card-core p { 
  color: var(--muted); 
  font-size: 14.5px; 
  line-height: 1.6; 
  margin-bottom: auto; /* बटन को हमेशा नीचे पुश रखने के लिए */
}

/* नीचे दिखने वाला ऐक्शन ट्रिगर (Learn More ✦) */
.card-action-trigger { 
  font-size: 13px; 
  font-weight: 700; 
  color: #0052ff !important; 
  text-transform: uppercase; 
  letter-spacing: 0.05em; 
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  transition: color 0.3s ease; 
}

.service-card-core:hover .card-action-trigger { 
  color: #0044ff !important; 
  text-shadow: 0 0 8px rgba(0, 82, 255, 0.2); 
}

/* ==========================================================================
   📱 RESPONSIVE MEDIA BREAKPOINTS FOR SERVICES GRID
   ========================================================================== */
@media (max-width: 1024px) {
  .services-cards-wrapper { 
    grid-template-columns: repeat(2, 1fr) !important; /* टैबलेट स्क्रीन्स पर 2 कॉलम */
    gap: 24px;
  }
}

@media (max-width: 700px) {
  .services-cards-wrapper { 
    grid-template-columns: 1fr !important; /* मोबाइल स्क्रीन्स पर परफेक्ट सिंगल कॉलम लिस्ट */
    gap: 20px;
  }
  .service-card-core {
    padding: 28px 24px;
  }
}


/* ==========================================================================
   📱 RESPONSIVE MEDIA OVERRIDES FOR ROAS INTERACTIVE MODULE
   ========================================================================== */
@media(max-width: 900px) {
  .roas-impact-showcase {
    grid-template-columns: 1fr !important;
    padding: 20px !important;
    gap: 24px !important;
  }
  .roas-visual-side {
    height: 220px !important;
  }
  html, body {
  overflow-x: hidden !important;

}
}




/* ********* add new check  */
/* ==========================================================================
   🎯 BRAND NEW UNIQUE ANTI-OVERFLOW & VIEWPORT LOCK SHIELD
   ========================================================================== */



/* ==========================================================================
   🎯 VIVID LIGHT-PASTEL 4-COLUMN VIA 2-ROW SERVICES ENGINE WITH SOFT TEXT SHADOW
   ========================================================================== */

/* परफेक्ट राइट और लेफ्ट स्पेसिंग के लिए कस्टम रैपर */
.wrap-services-custom {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 48px; /* लेफ्ट और राइट में परफेक्ट ब्रीदिंग स्पेस */
}

.text-center-wrapper {
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center;
  margin-bottom: 20px;
}

/* 1 लाइन में 4 कार्ड का ग्रिड लेआउट */
.services-quad-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px;
  margin-top: 40px;
  width: 100%;
}

/* बेस कार्ड आर्किटेक्चर (Elegant Light-Vivid Edition) */
.service-quad-card {
  backdrop-filter: blur(10px);
  border-radius: var(--radius);
  padding: 36px 24px 28px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(0, 82, 255, 0.06) !important;
}

/* 🎨 OPTIMIZED LIGHT-PASTEL LUXURY PALETTE ENGINE */
.service-quad-card.color-c1 { background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%); --hover-border: #0284c7; --hover-shadow: rgba(2, 132, 199, 0.2); --ts-glow: rgba(2, 132, 199, 0.15); } /* Soft Sky Blue */
.service-quad-card.color-c2 { background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%); --hover-border: #4f46e5; --hover-shadow: rgba(99, 102, 241, 0.2); --ts-glow: rgba(99, 102, 241, 0.15); } /* Soft Indigo */
.service-quad-card.color-c3 { background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%); --hover-border: #059669; --hover-shadow: rgba(16, 185, 129, 0.2); --ts-glow: rgba(16, 185, 129, 0.15); } /* Soft Emerald */
.service-quad-card.color-c4 { background: linear-gradient(135deg, #ffe4e6 0%, #fecdd3 100%); --hover-border: #e11d48; --hover-shadow: rgba(244, 63, 94, 0.2); --ts-glow: rgba(244, 63, 94, 0.15); }  /* Soft Rose */
.service-quad-card.color-c5 { background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%); --hover-border: #7c3aed; --hover-shadow: rgba(139, 92, 246, 0.2); --ts-glow: rgba(139, 92, 246, 0.15); } /* Soft Purple */
.service-quad-card.color-c6 { background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%); --hover-border: #ea580c; --hover-shadow: rgba(249, 115, 22, 0.2); --ts-glow: rgba(249, 115, 22, 0.15); }  /* Soft Orange */
.service-quad-card.color-c7 { background: linear-gradient(135deg, #ccfbf1 0%, #99f6e4 100%); --hover-border: #0d9488; --hover-shadow: rgba(20, 184, 166, 0.2); --ts-glow: rgba(20, 184, 166, 0.15); }  /* Soft Teal */
.service-quad-card.color-c8 { background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%); --hover-border: #475569; --hover-shadow: rgba(100, 116, 139, 0.2); --ts-glow: rgba(100, 116, 139, 0.15); } /* Soft Slate */

/* 🚀 DYNAMIC HOVER ENGINE (Shadow, Solid Border & Scale) */
.service-quad-card:hover {
  transform: translateY(-10px) scale(1.02);
  border: 1px solid var(--hover-border) !important; /* होवर करने पर मैचिंग डार्क बॉर्डर एक्टिव होगी */
  box-shadow: 0 20px 40px var(--hover-shadow), 0 4px 12px rgba(0, 0, 0, 0.05) !important; /* होवर सॉफ्ट ग्लो */
}

/* आइकॉन बॉक्स स्टाइल */
.quad-icon-box {
  font-size: 28px;
  margin-bottom: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.3s ease;
}

.service-quad-card:hover .quad-icon-box {
  background: #ffffff;
  transform: scale(1.1) rotate(6deg);
}

/* 🌟 हेडिंग और पैराग्राफ विथ परफेक्ट लाइट-थीम कंट्रास्ट */
.service-quad-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: #0a0f18; /* परफेक्ट डार्क टेक्स्ट */
  margin-bottom: 12px;
  font-family: 'Sora', sans-serif;
  text-shadow: 0 2px 8px var(--ts-glow); /* सॉफ्ट ग्लोइंग टेक्स्ट शैडो */
}

.service-quad-card p {
  color: #334155; /* एलीगेंट स्लेट रीडिंग कलर */
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: auto; 
}

/* ऐक्शन बटन (Learn More) */
.quad-action {
  font-size: 12px;
  font-weight: 700;
  color: #0a0f18 !important;
  background: rgba(255, 255, 255, 0.5);
  padding: 8px 16px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  width: max-content;
  transition: all 0.3s ease;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.service-quad-card:hover .quad-action {
  background: var(--hover-border);
  color: #ffffff !important; /* होवर पर बटन सॉलिड टोन में बदल जाएगी */
  border-color: var(--hover-border);
  transform: translateX(4px);
}

/* ==========================================================================
   📱 RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 1200px) {
  .wrap-services-custom { padding: 0 32px; }
  .services-quad-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .services-quad-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .wrap-services-custom { padding: 0 20px; }
  .services-quad-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
}




/* customer section */
/* ==========================================================================
   🧱 SUCCESS INTERVIEW CAROUSEL CORE ARCHITECTURE (Premium UI Layout)
   ========================================================================== */
.interview-carousel-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.08);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow-default);
  padding: 40px;
}

.interview-carousel-track {
  display: flex;
  position: relative;
  width: 100%;
  height: auto;
}

.interview-slide {
  min-width: 100%;
  display: none; /* डिफ़ॉल्ट रूप से छुपे रहेंगे */
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.interview-slide.active {
  display: block;
  opacity: 1;
}

.interview-flex-layout {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr; /* लेफ्ट साइड में इमेज, राइट में टेक्स्ट */
  gap: 48px;
  align-items: center;
}

/* इमेज फ्रेम स्टाइल */
.side-grid-image-frame {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(0, 82, 255, 0.06);
}

.side-grid-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.interview-slide:hover .side-grid-image-frame img {
  transform: scale(1.04);
}

.client-tag-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--btn-grad);
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* टेक्स्ट ब्लॉक स्टाइल */
.client-meta {
  font-family: 'Sora', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #0052ff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.slide-title {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 16px;
}

.slide-desc {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* 🎮 नेविगेशन एरो बटन्स (Controls) */
.int-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.15);
  color: #0052ff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--card-shadow-default);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.int-nav-btn:hover {
  background: #0052ff;
  color: #ffffff;
  border-color: #0052ff;
  box-shadow: var(--card-shadow-active);
}

.prev-btn { left: 16px; }
.next-btn { right: 16px; }

/* 🔘 डॉट्स इंडीकेटर्स */
.int-dots-container {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}

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

.int-dot.active {
  width: 24px;
  background: #0052ff;
  border-radius: 99px;
}

/* 📱 रेस्पॉन्सिव ब्रेकपॉइंट्स */
@media (max-width: 900px) {
  .interview-flex-layout {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .side-grid-image-frame {
    height: 240px;
  }
  .interview-carousel-wrapper {
    padding: 48px 24px 24px;
  }
  .int-nav-btn {
    top: 160px; /* मोबाइल पर एरो इमेज के ऊपर सेट हो जाएंगे */
  }
}




/*  why choose us  */
/* ==========================================================================
   🚀 TRIPLE-AXIS WHY CHOOSE US ENGINE (Premium White Grid Card Architecture)
   ========================================================================== */
#why-choose-us-engine {
  padding: 60px 0;
  background: transparent;
  width: 100%;
}

/* मास्टर व्हाइट कार्ड बॉक्स (स्क्रीनशॉट जैसा) */
.why-us-master-card {
  display: grid;
  grid-template-columns: 1.1fr 1.2fr 0.8fr; /* इमेज | टेक्स्ट | रॉकेट कार्ड */
  gap: 36px;
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.08);
  border-radius: 32px;
  padding: 44px;
  box-shadow: var(--card-shadow-default);
  align-items: center;
  position: relative;
  overflow: hidden;
}

/* 📸 1. LEFT SIDE - VIDEO/IMAGE WRAPPER */
.why-us-video-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.why-us-video-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* इमेज के ऊपर का प्रीमियम प्ले बटन */
.video-play-trigger {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 54px; height: 54px;
  background: #8b5cf6; /* ब्यूटीफुल वायलेट/पर्पल टोन */
  color: #ffffff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 24px rgba(139, 92, 246, 0.4);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding-left: 3px; /* विजुअल सेंटर अलाइनमेंट */
}

.why-us-master-card:hover .video-play-trigger {
  transform: translate(-50%, -50%) scale(1.1);
  background: #0052ff;
  box-shadow: 0 10px 24px rgba(0, 82, 255, 0.4);
}

/* ✍️ 2. CENTER SIDE - CONTENT ENGINE */
.eyebrow-mini {
  font-family: 'Sora', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #8b5cf6;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}

.why-us-heading {
  font-family: 'Sora', sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: #0a0f18;
  line-height: 1.25;
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}

/* चेकलिस्ट स्ट्रक्चर */
.why-us-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}

.why-us-checklist li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.check-icon {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(10, 15, 24, 0.06);
  color: #0a0f18;
  font-size: 11px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.why-us-checklist p {
  font-size: 13.5px;
  color: #475569;
  font-weight: 500;
}

.why-us-cta {
  padding: 10px 24px;
  font-size: 13.5px;
  background: #8b5cf6;
  box-shadow: 0 6px 16px rgba(139, 92, 246, 0.25);
}
.why-us-cta:hover {
  background: #0052ff;
  box-shadow: 0 6px 16px rgba(0, 82, 255, 0.25);
}

/* 📊 3. RIGHT SIDE - ROCKET GROWTH METRIC CARD */
.why-us-metric-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.metric-glass-card {
  width: 100%;
  max-width: 240px;
  background: #f8fafc;
  border: 1px solid rgba(0, 82, 255, 0.06);
  border-radius: 24px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
  overflow: hidden;
}

/* उड़ता हुआ 3D रॉकेट इफ़ेक्ट */
.floating-rocket-asset {
  font-size: 42px;
  position: absolute;
  top: 12px; right: 16px;
  animation: rocketFloat 4s ease-in-out infinite;
}

@keyframes rocketFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(5deg); }
}

.metric-card-body {
  margin-top: 36px;
  position: relative;
  z-index: 2;
}

.metric-meta {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  display: block;
  margin-bottom: 4px;
}

.metric-percentage {
  font-family: 'Sora', sans-serif;
  font-size: 32px;
  font-weight: 800;
  color: #10b981; /* स्क्रीनशॉट जैसा चमकीला हरा कलर */
  line-height: 1;
  margin-bottom: 4px;
}

.metric-timeline {
  font-size: 11px;
  color: #94a3b8;
  display: block;
}

/* ग्रैडिएंट चार्ट लाइन स्टाइल */
.mini-graph-svg-container {
  width: 100%;
  margin-top: 16px;
  height: 40px;
}

.mini-chart-line {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ==========================================================================
   📱 PERFECT COMPACT BREAKPOINTS RESPONSIVENESS
   ========================================================================== */
@media (max-width: 1100px) {
  .why-us-master-card {
    grid-template-columns: 1fr 1.2fr; /* टैबलेट स्क्रीन्स पर रॉकेट नीचे आ जायेगा */
    padding: 36px;
  }
  .why-us-metric-wrapper {
    grid-column: span 2;
    margin-top: 20px;
  }
  .metric-glass-card {
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 24px 40px;
  }
  .metric-card-body { margin-top: 0; }
  .floating-rocket-asset { position: relative; top: auto; right: auto; font-size: 48px; order: 2; }
  .mini-graph-svg-container { max-width: 200px; order: 3; margin-top: 0; }
}

@media (max-width: 768px) {
  .why-us-master-card {
    grid-template-columns: 1fr; /* मोबाइल स्क्रीन्स पर फुल वर्टिकल स्टैक */
    gap: 28px;
    padding: 24px;
  }
  .why-us-video-wrapper {
    height: 220px;
  }
  .why-us-metric-wrapper {
    grid-column: span 1;
  }
  .metric-glass-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px;
  }
  .floating-rocket-asset { position: absolute; top: 16px; right: 24px; }
  .mini-graph-svg-container { max-width: 100%; width: 100%; }
}



/* ==========================================================================
   📊 PREMIUM HERO EXTENSIONS (Happy Clients Pod & Bottom Floating Stats Panel)
   ========================================================================== */

/* 👥 Happy Clients Avatars Engine Layout */
.hero-happy-clients-pod {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.client-avatar-stack {
  display: flex;
  align-items: center;
}

.client-avatar-stack img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #ffffff; /* क्लीन व्हाइट रिंग आउटलाइन */
  margin-right: -12px; /* ओवरलैपिंग इफ़ेक्ट */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.client-avatar-stack img:hover {
  transform: translateY(-4px) scale(1.1);
  z-index: 5;
}

.client-reviews-meta {
  display: flex;
  flex-direction: column;
}

.reviews-title {
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  color: #0a0f18; /* डार्क नेवी रीडिंग */
}

.reviews-stars-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 1px;
}

.rating-num {
  font-size: 13px;
  font-weight: 800;
  color: #0a0f18;
}

.star-gold-icons {
  color: #f59e0b; /* इमेज जैसा परफेक्ट क्रिस्प स्टार गोल्ड */
  font-size: 12px;
  letter-spacing: 1px;
}

.reviews-count {
  font-size: 12px;
  color: #64748b; /* स्लेट म्यूटेड शेड */
  font-weight: 500;
}

/* 🏢 BOTTOM HORIZONTAL FLOATING STATS PANEL ENGINE (Saas Matrix Grid) */
.hero-floating-stats-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(255, 255, 255, 0.85); /* प्रीमियम लाइट ग्लास मोरफिज्म */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 82, 255, 0.08); /* थीम सिंक्ड बॉर्डर */
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 20px 40px rgba(0, 82, 255, 0.03), 0 4px 12px rgba(0, 0, 0, 0.01);
  width: 100%;
}

.stat-premium-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
}

/* सेपरेटर लाइन्स (इमेज की तरह हर बॉक्स के बीच) */
.stat-premium-box:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(0, 82, 255, 0.08);
}

/* विजुअल आइकॉन्स बैकग्राउंड पाड्स */
.stat-icon-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* इमेज टोन मैचिंग साइबर ब्लू-व्हाइट वेरिएंट्स */
.stat-icon-wrapper.ico-blue { background: rgba(0, 82, 255, 0.06); }
.stat-icon-wrapper.ico-cyan { background: rgba(0, 210, 255, 0.06); }
.stat-icon-wrapper.ico-purple { background: rgba(139, 92, 246, 0.06); }
.stat-icon-wrapper.ico-green { background: rgba(16, 185, 129, 0.06); }

.stat-data-block h3 {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #0052ff; /* सिग्नेचर साइबर ब्लू */
  line-height: 1.1;
}

.stat-data-block p {
  font-size: 12.5px;
  color: #5c6b82; /* म्यूटेड टेक्स्ट */
  font-weight: 600;
  margin-top: 2px;
}

/* ==========================================================================
   📱 MOBILE LAYOUT FLUID OVERRIDES
   ========================================================================== */
@media (max-width: 900px) {
  .hero-happy-clients-pod {
    justify-content: center; /* मोबाइल व्यू पर सेंटर अलाइन */
  }
  .hero-floating-stats-panel {
    grid-template-columns: repeat(2, 1fr); /* मोबाइल स्क्रीन्स पर 2x2 ब्लॉक ग्रिड */
    gap: 28px 16px;
    padding: 24px 16px;
    border-radius: 20px;
  }
  .stat-premium-box {
    justify-content: flex-start;
    padding-left: 12px;
  }
  /* सेपरेटर लाइन्स री-मैप */
  .stat-premium-box:nth-child(2n)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero-floating-stats-panel {
    grid-template-columns: 1fr; /* बहुत छोटे मोबाइल पर परफेक्ट सिंगल रो वर्टिकल स्टैक */
    gap: 20px;
  }
  .stat-premium-box::after {
    display: none !important;
  }
}


/* ROI */
/* ==========================================================================
   📊 EXACT MATCH IMAGE ROI DESIGN LAYOUT SYSTEM WITH DYNAMIC EMBEDS
   ========================================================================== */
.roas-impact-showcase {
  background: #f8fafc;
  /* padding: 60px 40px; */
  border-radius: 24px;
  width: 100%;
  max-width: 1200px;
  margin: 40px auto;
  box-shadow: 0 20px 50px rgba(0, 82, 255, 0.02);
  border: 1px solid rgba(0, 82, 255, 0.05);
}

.roas-header {
  text-align: center;
  margin-bottom: 40px;
}

.roas-header h3 {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #0b111e;
}

/* Dual Grid Configuration */
.roas-dual-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 44px;
}

.dashboard-mock-card {
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.02);
  padding: 24px;
  border: 1px solid #edf2f7;
}

.card-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 20px;
}

.card-top-bar .three-dots {
  color: #94a3b8;
  letter-spacing: 1px;
}

/* Live Flexible Dashboard Content Workspace */
.mock-dashboard-content {
  display: flex;
  gap: 20px;
  min-height: 250px;
  align-items: center;
  transition: all 0.4s ease;
}

/* Sidebar Analytics Panels */
.mock-metric-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 90px;
  flex-shrink: 0;
}

.metric-mini-box {
  background: #f8fafc;
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid #f1f5f9;
}

.m-label {
  display: block;
  font-size: 10.5px;
  color: #64748b;
  font-weight: 600;
  margin-bottom: 2px;
}

.m-val {
  font-size: 14.5px;
  font-weight: 800;
  color: #0f172a;
}

.color-green-engine {
  color: #10b981 !important;
}

/* Main Vector Graph Center Board */
.mock-main-chart-area {
  flex: 1;
  position: relative;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 200px;
}

.chart-floating-badge {
  position: absolute;
  top: 12px; right: 12px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.svg-graph-canvas {
  width: 100%;
  height: 120px;
  margin-top: 20px;
}

.svg-graph-canvas path {
  transition: d 0.5s ease, stroke 0.5s ease;
}

.chart-timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: #94a3b8;
  font-weight: 600;
  margin-top: 8px;
}

/* Progress Side Column Layout */
.mock-right-matrix-panel {
  width: 130px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex-shrink: 0;
}

.matrix-mini-header {
  font-size: 11px;
  font-weight: 800;
  color: #334155;
  text-transform: uppercase;
}

.progress-bar-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.p-label-flex {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}

.p-bar-bg {
  width: 100%;
  height: 6px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.p-bar-fill {
  height: 100%;
  background: #0052ff;
  border-radius: 4px;
  transition: width 0.5s ease, background 0.5s ease;
}

/* ==========================================================================
   🔺 PREMIUM PURE CSS FUNNEL GRAPHICS ENGINE
   ========================================================================== */
.funnel-graphics-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 10px 0;
}

.funnel-segment {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  height: 36px;
  transition: all 0.5s ease;
  clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
}

.funnel-segment.layer-top { width: 220px; background: #1d4ed8; }
.funnel-segment.layer-mid-high { width: 176px; background: #2563eb; clip-path: polygon(10% 0, 90% 0, 80% 100%, 20% 100%); }
.funnel-segment.layer-mid-low { width: 132px; background: #3b82f6; clip-path: polygon(13% 0, 87% 0, 78% 100%, 22% 100%); }
.funnel-segment.layer-bottom-neck { width: 88px; background: #60a5fa; clip-path: polygon(16% 0, 84% 0, 70% 100%, 30% 100%); height: 32px;}

/* Right Side Funnel Anchors */
.funnel-label-right {
  position: absolute;
  left: 105%;
  white-space: nowrap;
  color: #475569;
  font-size: 11px;
  font-weight: 600;
}

/* Funnel Bottom Output Base */
.funnel-tip-badge {
  width: 44px;
  height: 24px;
  background: #ef4444;
  color: #ffffff;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  transition: all 0.5s ease;
}

/* ==========================================================================
   🎛️ CONTROLLER RANGE LAYOUT MODULE 
   ========================================================================== */
.roas-interactive-controller-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.slider-control-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 320px;
}

.gradient-slider-track {
  width: 100%;
  height: 40px;
  border-radius: 99px;
  background: linear-gradient(90deg, #ff7e40 0%, #ffb040 45%, #40e0ff 55%, #00d4ff 100%);
  position: relative;
  cursor: pointer;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.15);
}

.slider-handle-dot {
  position: absolute;
  top: 4px; left: 4px;
  width: 32px; height: 32px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.gradient-slider-track.after-engine-active .slider-handle-dot {
  transform: translateX(276px);
}

.slider-labels {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #475569;
}

.state-transition-arrow {
  font-size: 26px;
  color: #0f172a;
}

/* Dual Status Capsule */
.status-badge-engine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.badge-capsule-border {
  display: flex;
  background: #ffffff;
  border: 2px solid #e2e8f0;
  border-radius: 99px;
  padding: 4px;
  gap: 4px;
  transition: all 0.4s ease;
}

.badge-capsule-border.glow-red { border-color: rgba(239, 68, 68, 0.3); box-shadow: 0 0 20px rgba(239, 68, 68, 0.15); }
.badge-capsule-border.glow-green { border-color: rgba(16, 185, 129, 0.3); box-shadow: 0 0 20px rgba(16, 185, 129, 0.2); }

.state-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border-radius: 99px;
  font-size: 12px;
  color: #94a3b8;
  font-weight: 700;
  transition: all 0.3s ease;
  cursor: pointer;
}

.state-pill .pill-meta { font-size: 11px; font-weight: 500; opacity: 0.9; }

.state-pill.red-pill.active { background: #ef4444; color: #ffffff; }
.state-pill.green-pill.active { background: #10b981; color: #ffffff; }

.badge-bottom-caption {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-top: 10px;
}

@media(max-width: 900px) {
  .roas-dual-display-grid { grid-template-columns: 1fr; gap: 24px; }
  .state-transition-arrow { transform: rotate(90deg); margin: 10px 0; }
}


/* service */
/* ==========================================================================
   🖼️ CONTAINER CARD FORMAT WITH SIGNATURE CYBER BLUE AMBIENT SHADOW ENGINE
   ========================================================================== */
.why-us-section-wrapper {
  background: #ffffff;
  padding: 80px 0;
  width: 100%;
  box-sizing: border-box;
}

.wrap-why-us-container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 🌟 Master Outer Panel Card Config with Active Blue Shadow Mechanics */
.why-us-master-dashboard-card {
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.06);
  border-radius: 28px;
  padding: 48px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: center;
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Default Ambient Cyber Blue Shadow System Mapping */
.why-us-master-dashboard-card.cyber-blue-ambient-shadow {
  box-shadow: 0 20px 50px rgba(0, 82, 255, 0.04), 
              0 4px 20px rgba(0, 82, 255, 0.02),
              inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

/* 🚀 Extreme Micro-Hover State Glow Up Trigger */
.why-us-master-dashboard-card.cyber-blue-ambient-shadow:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 82, 255, 0.22);
  box-shadow: 0 30px 60px rgba(0, 82, 255, 0.12), 
              0 10px 25px rgba(0, 210, 255, 0.08),
              inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

.img-blue-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  color: #0052ff !important;
  letter-spacing: 0.08em;
  background: #edf2f9;
  padding: 6px 18px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  margin-bottom: 20px;
}

.img-blue-eyebrow-pill.mini-size { font-size: 10px; padding: 5px 14px; }

.why-us-bold-title {
  font-family: 'Sora', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 14px;
  letter-spacing: -0.01em;
}
.why-us-bold-title .accent-navy-blue { color: #0052ff; }
.why-us-sublead-text { color: #64748b; font-size: 14.5px; line-height: 1.6; max-width: 480px; }

.exact-features-bento-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
  margin: 36px 0;
}

.exact-feature-item { display: flex; gap: 16px; align-items: start; }

.feat-icon-disc {
  width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.f-disc-blue { background: rgba(0, 82, 255, 0.06); }
.f-disc-purple { background: rgba(124, 58, 237, 0.06); }
.f-disc-navy { background: rgba(29, 78, 216, 0.06); }
.f-disc-cyan { background: rgba(6, 182, 212, 0.06); }

.feat-txt-block h4 {
  font-family: 'Sora', sans-serif; font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 4px;
}
.feat-txt-block p { font-size: 12.5px; color: #64748b; line-height: 1.4; }

.exact-why-us-ctas { display: flex; align-items: center; gap: 24px; }

.btn-royal-blue-exact {
  background: #0052ff; color: #ffffff !important; font-size: 13.5px; font-weight: 700;
  padding: 12px 26px; border-radius: 99px; box-shadow: 0 8px 20px rgba(0, 82, 255, 0.2);
  transition: all 0.3s ease;
}
.btn-royal-blue-exact:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 82, 255, 0.3); }

.link-ghost-dark-exact { font-size: 13.5px; font-weight: 700; color: #0052ff !important; display: flex; align-items: center; gap: 6px; }
.link-ghost-dark-exact .play-ico { font-size: 9px; }

/* 📉 DASHBOARD VIEWPANEL GRAPHICS SYSTEM */
.exact-why-us-dashboard-side {
  background: #020716;
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 25px 60px rgba(0, 36, 120, 0.15);
  position: relative;
}

.royal-top-layout-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 20px;
  margin-bottom: 24px;
}

.royal-white-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
}

.royal-card-meta-row { display: flex; justify-content: space-between; align-items: center; }
.graph-title-txt { font-size: 13px; font-weight: 700; color: #334155; }
.pill-badge-green {
  background: #10b981; color: #ffffff; font-size: 10px; font-weight: 800;
  padding: 3px 6px; border-radius: 5px;
}

.svg-graph-container-box { width: 100%; height: 80px; margin: 16px 0 10px; overflow: visible; }
.svg-path-engine { width: 100%; height: 100%; overflow: visible; }

.horizontal-metrics-strip-layout {
  display: flex; justify-content: space-between; border-top: 1px solid #f1f5f9; padding-top: 14px;
}
.strip-node-element { display: flex; flex-direction: column; gap: 2px; }
.lbl-m { font-size: 9.5px; color: #94a3b8; font-weight: 600; }
.val-m { font-size: 14px; color: #0f172a; font-weight: 800; }
.grow-m-trend { font-size: 9.5px; color: #10b981; font-weight: 700; }

.donut-box-lbl { font-size: 12px; font-weight: 700; color: #334155; display: block; margin-bottom: 12px; }
.donut-visual-structure-row { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.donut-chart-ring-graphic {
  width: 64px; height: 64px; border-radius: 50%;
  background: conic-gradient(#0052ff 0% 45%, #06b6d4 45% 73%, #7c3aed 73% 90%, #f97316 90% 100%);
  position: relative;
}
.donut-chart-ring-graphic::after {
  content: ""; position: absolute; inset: 16px; background: #ffffff; border-radius: 50%;
}

.donut-legends-data-list { list-style: none; width: 100%; display: flex; flex-direction: column; gap: 5px; }
.donut-legends-data-list li { display: flex; align-items: center; font-size: 10px; color: #64748b; font-weight: 600; }
.donut-legends-data-list li font { margin-left: auto; font-weight: 700; color: #1e293b; }
.leg-dot { width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; }
.color-google { background: #0052ff; } .color-seo { background: #06b6d4; } .color-social { background: #7c3aed; } .color-direct { background: #f97316; }

/* Speech Mascot Bubble Layer */
.embedded-mascot-speech-bubble-wrapper {
  position: absolute; right: -12px; bottom: 84px;
  display: flex; align-items: center; z-index: 5;
}
.speech-bot-img {
  width: 76px; height: 76px; object-fit: contain;
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
}
.speech-bubble-ui-text {
  background: #ffffff; color: #0f172a; padding: 10px 14px; border-radius: 12px;
  font-size: 11px; font-weight: 700; box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  width: 135px; line-height: 1.35; position: relative; margin-left: 2px;
}
.speech-bubble-ui-text::after {
  content: ""; position: absolute; right: 100%; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-right-color: #ffffff;
}

/* Bottom Metric Horizontal Strip */
.royal-bottom-counter-flex-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 24px;
}
.bottom-stat-unit { display: flex; align-items: center; gap: 10px; }
.unit-icon-frame { font-size: 16px; }
.unit-data-block h3 { font-family: 'Sora', sans-serif; font-size: 18px; font-weight: 800; color: #ffffff; line-height: 1; }
.unit-data-block p { font-size: 10.5px; color: #94a3b8; font-weight: 500; margin-top: 2px; }

/* ==========================================================================
   📱 SYSTEM FLUID BREAKPOINTS VIEWPORTS
   ========================================================================== */
@media(max-width: 1080px) {
  .why-us-master-dashboard-card { grid-template-columns: 1fr; gap: 40px; padding: 32px; }
  .embedded-mascot-speech-bubble-wrapper { display: none; }
}

@media(max-width: 650px) {
  .exact-features-bento-grid { grid-template-columns: 1fr; gap: 20px; }
  .royal-top-layout-grid { grid-template-columns: 1fr; }
  .royal-bottom-counter-flex-row { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .why-us-master-dashboard-card { padding: 24px 16px; border-radius: 20px; }
}






/* journery */
/* ==========================================================================
   💎 PREMIUM CONTAINER CARD VIEW FOR 5-STEP TIMELINE WITH CONSTANT BLUE SHADOW
   ========================================================================== */
.exact-process-card-section {
  background: #ffffff;
  padding: 60px 0;
  width: 100%;
  box-sizing: border-box;
}

.wrap-process-container {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 🌟 Master Outer Panel Card Config with Fixed Continuous Blue Shadow System */
.process-master-dashboard-card {
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.14); /* Crisp blueprint alpha border */
  border-radius: 28px;
  padding: 56px 48px;
  position: relative;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 🚀 Default State: Cyber Blue Shadow is ALWAYS visible and glowing now */
.process-master-dashboard-card.cyber-blue-process-shadow {
  box-shadow: 0 25px 55px rgba(0, 82, 255, 0.12), 
              0 10px 25px rgba(0, 210, 255, 0.06),
              inset 0 0 0 1px rgba(255, 255, 255, 0.8);
}

/* 🔥 Hover State: Deep lift elevation while compounding the baseline shadow intensity */
.process-master-dashboard-card.cyber-blue-process-shadow:hover {
  transform: translateY(-8px);
  border-color: rgba(0, 82, 255, 0.3);
  box-shadow: 0 35px 70px rgba(0, 82, 255, 0.18), 
              0 15px 35px rgba(0, 210, 255, 0.1),
              inset 0 0 0 1px rgba(255, 255, 255, 1);
}

.process-header-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 56px;
}

.process-mini-pill {
  font-size: 11px;
  font-weight: 800;
  color: #0052ff !important;
  letter-spacing: 0.08em;
  background: #edf2f9;
  padding: 6px 18px;
  border-radius: 99px;
  border: 1px solid #e2e8f0;
  margin-bottom: 16px;
}

.process-main-heading {
  font-family: 'Sora', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #0a0f18;
  letter-spacing: -0.01em;
}

/* Horizontal Flow Flex System Mapping */
.horizontal-process-flow-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  position: relative;
}

.process-node-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 16%;
  position: relative;
  z-index: 5;
}

/* Crisp Light Ring Nodes Logic */
.icon-glow-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

/* Tint Aura Shadows matching image dots logic */
.node-purple-glow { box-shadow: 0 8px 24px rgba(124, 58, 237, 0.06); }
.node-blue-glow { box-shadow: 0 8px 24px rgba(0, 82, 255, 0.06); }
.node-green-glow { box-shadow: 0 8px 24px rgba(16, 185, 129, 0.06); }
.node-orange-glow { box-shadow: 0 8px 24px rgba(234, 88, 12, 0.06); }
.node-gold-glow { box-shadow: 0 8px 24px rgba(234, 179, 8, 0.06); }

/* Micro Interaction Scales for Circles */
.process-node-step:hover .icon-glow-ring {
  transform: scale(1.12);
}
.process-node-step:hover .node-purple-glow { border-color: #7c3aed; box-shadow: 0 12px 30px rgba(124, 58, 237, 0.15); }
.process-node-step:hover .node-blue-glow { border-color: #0052ff; box-shadow: 0 12px 30px rgba(0, 82, 255, 0.15); }
.process-node-step:hover .node-green-glow { border-color: #10b981; box-shadow: 0 12px 30px rgba(16, 185, 129, 0.15); }
.process-node-step:hover .node-orange-glow { border-color: #ea580c; box-shadow: 0 12px 30px rgba(234, 88, 12, 0.15); }
.process-node-step:hover .node-gold-glow { border-color: #eab308; box-shadow: 0 12px 30px rgba(234, 179, 8, 0.15); }

.step-details-meta h3 {
  font-family: 'Sora', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.process-node-step:hover .step-details-meta h3 {
  color: #0052ff;
}

.step-details-meta p {
  font-size: 13px;
  color: #475569;
  font-weight: 600;
  line-height: 1.55;
}

/* 🏹 ANCHOR ARROWS DESIGN SYSTEM WITH HIGH CONTRAST VISIBILITY */
.flow-arrow-connector {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  margin: 0 -14px;
}

.dash-line-vector {
  width: 100%;
  height: 1px;
  border-top: 2px dashed #cbd5e1;
  position: relative;
  transition: border-color 0.4s ease;
}

.dash-line-vector::after {
  content: "";
  position: absolute;
  right: 0; top: -4px;
  border: 5px solid transparent;
  border-left-color: #94a3b8;
  transition: border-left-color 0.4s ease;
}

/* 🌟 Connectors light updates globally synced */
.process-master-dashboard-card:hover .dash-line-vector {
  border-top-color: rgba(0, 82, 255, 0.3);
}
.process-master-dashboard-card:hover .dash-line-vector::after {
  border-left-color: #0052ff;
}

.step-counter-badge {
  position: absolute;
  z-index: 2;
  font-size: 11px;
  font-weight: 800;
  color: #0052ff;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  padding: 2px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

/* ==========================================================================
   📱 SYSTEM MOBILE SCALED LIQUID BREAKPOINTS
   ========================================================================== */
@media(max-width: 1080px) {
  .process-master-dashboard-card { padding: 40px 24px; border-radius: 20px; }
  .horizontal-process-flow-row { flex-direction: column; align-items: center; gap: 28px; }
  .process-node-step { width: 280px; }
  .flow-arrow-connector { height: 48px; width: 1px; margin: 8px 0; }
  
  .dash-line-vector {
    width: 1px; height: 100%; border-top: none;
    border-left: 2px dashed #cbd5e1;
  }
  .dash-line-vector::after {
    right: -4px; bottom: 0; top: auto;
    border-left-color: transparent !important;
    border-top-color: #0052ff;
  }
}


/* ==========================================================================
   🌐 FIXED FLOATING LEFT SOCIAL DESK (COLORFUL ELEGANT EDITION)
   ========================================================================== */
.side-social-shield-left {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1900;
}

.social-side-node {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 82, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 82, 255, 0.04);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 🎨 डिफ़ॉल्ट ब्रांड कलर्स (हमेशा कलरफुल दिखेंगे) */
.social-side-node.fb-color { color: #1877f2; }
.social-side-node.linkedin-color { color: #0077b5; }

/* 🚀 माउस ले जाने (Hover) पर बैकग्राउंड सॉलिड टोन और आइकॉन वाइट इफ़ेक्ट */
.social-side-node.fb-color:hover { 
  background: #1877f2; 
  color: #ffffff; 
  border-color: #1877f2; 
}
.social-side-node.insta-color:hover { 
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); 
  border-color: transparent; 
}
.social-side-node.insta-color:hover svg { 
  stroke: #ffffff !important; 
}
.social-side-node.linkedin-color:hover { 
  background: #0077b5; 
  color: #ffffff; 
  border-color: #0077b5; 
}

/* लेफ्ट बटन्स का होवर एनीमेशन */
.social-side-node:hover {
  transform: scale(1.12) translateX(4px);
  box-shadow: 0 12px 24px rgba(0, 82, 255, 0.12);
}

/* ==========================================================================
   💬 STICKY VERTICAL PILL WHATSAPP HOTLINE (Exact Image Architecture -w)
   ========================================================================== */
.sticky-whatsapp-trigger-right {
  position: fixed;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  
  /* 🎨 स्क्रीनशॉट जैसा व्हाइट कंटेनर और स्मूथ कर्व्स */
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 14px;
  padding: 14px 10px;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1900;
  
  /* प्रीमियम सॉफ्ट ड्रॉप शैडो */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

/* 🚀 होवर इफ़ेक्ट: कार्ड थोड़ा सा लेफ्ट उठेगा और ग्लो करेगा */
.sticky-whatsapp-trigger-right:hover {
  transform: translateY(-50%) translateX(-4px);
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.15);
}

/* 🟢 ऊपर का व्हाट्सएप आइकन पाड विथ वाइब्रेंट ग्रीन बैकग्राउंड */
.wa-icon-holder-w {
  width: 36px;
  height: 36px;
  background: #25d366;
  color: #ffffff !important;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
  flex-shrink: 0;
}

.wa-icon-holder-w svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ✍️ वर्टिकल टेक्स्ट इंजन जो टेक्स्ट को सीधा खड़ा करेगा */
.wa-vertical-text-w {
  /* font-family: 'Sora', sans-serif; */
  font-size: 14px;
  font-weight: 900;
  color: #1e293b; /* प्रीमियम डार्क चारकोल टेक्स्ट */
  white-space: nowrap;
  
  /* जादुई प्रॉपर्टीज़ टेक्स्ट को सीधा वर्टिकल करने के लिए */
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* टेक्स्ट को नीचे से ऊपर पढ़ने योग्य बनाने के लिए */
  letter-spacing: 0.5px;
}

/* ==========================================================================
   📱 MOBILE AUTO-RESPONSIVE RESET
   ========================================================================== */
@media (max-width: 900px) {
  /* मोबाइल स्क्रीन पर यह नीचे की तरफ आ जाएगा ताकि कस्टमाइज्ड कर्सर या रीडिंग न रुके */
  .sticky-whatsapp-trigger-right {
    right: 16px;
    top: auto;
    bottom: 96px; /* चैटबॉट के ऊपर परफेक्ट गैप */
    transform: none;
    padding: 10px;
    border-radius: 12px;
    gap: 8px;
  }
  
  .sticky-whatsapp-trigger-right:hover {
    transform: translateY(-4px);
  }
  
  .wa-icon-holder-w {
    width: 32px;
    height: 32px;
    border-radius: 8px;
  }
  
  .wa-icon-holder-w svg {
    width: 17px;
    height: 17px;
  }
  
  .wa-vertical-text-w {
    font-size: 12.5px;
  }
}

/* client */
/* ==========================================================================
   🖼️ SCREENSHOT SYNCED STRATEGIC EVALUATION LAYOUT ARCHITECTURE
   ========================================================================== */
.enterprise-glow-shield {
  background: #ffffff !important;
  border: 1px solid rgba(0, 82, 255, 0.05) !important;
  border-radius: 28px !important;
  padding: 36px !important;
  box-shadow: 0 30px 70px rgba(0, 40, 150, 0.025), 0 4px 20px rgba(0, 0, 0, 0.005) !important;
}

.interview-flex-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr !important;
  gap: 40px !important;
  align-items: flex-start !important;
}

.side-grid-image-frame {
  height: 420px !important; /* Makes image block large as per screenshot layout */
  border-radius: 18px !important;
  border: none !important;
}

.slide-title {
  font-size: 27px !important;
  font-weight: 800 !important;
  color: #07132c !important;
  letter-spacing: -0.01em;
}

.slide-desc {
  font-size: 14.5px !important;
  color: #5c6b82 !important;
  line-height: 1.6 !important;
  margin-bottom: 16px;
}

/* 📊 4-COLUMN BENTO GRID STATS PANEL CONFIG */
.slide-metrics-bento {
  display: grid;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 14px;
  margin-top: 28px;
  width: 100%;
}

.mini-stat-card {
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 14px;
  padding: 20px 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.01);
  transition: transform 0.3s ease;
}

.mini-stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0, 82, 255, 0.04);
}

.stat-icon-aura {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.stat-icon-aura.c-blue { background: rgba(0, 82, 255, 0.06); }
.stat-icon-aura.c-pink { background: rgba(234, 88, 12, 0.06); }
.stat-icon-aura.c-green { background: rgba(16, 185, 129, 0.06); }
.stat-icon-aura.c-purple { background: rgba(124, 58, 237, 0.06); }

.mini-stat-card h3 {
  font-family: 'Sora', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #07132c;
  line-height: 1.1;
  margin-bottom: 4px;
}

.mini-stat-card p {
  font-size: 11px;
  color: #64748b;
  line-height: 1.3;
  font-weight: 500;
}

/* 📈 Clean Vector CSS Line Waves */
.mini-line-wave {
  width: 100%;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 0;
}
.blue-wave { background: #0052ff; width: 60%; border-radius: 0 4px 0 0; }
.pink-wave { background: #ea580c; width: 45%; border-radius: 0 4px 0 0; }
.green-wave { background: #10b981; width: 70%; border-radius: 0 4px 0 0; }
.purple-wave { background: #7c3aed; width: 50%; border-radius: 0 4px 0 0; }

/* 🕹️ FLOATING ROUNDED NAVIGATION BUTTONS */
.prev-btn-clean, .next-btn-clean {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  color: #0052ff;
  border-radius: 50%;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
  z-index: 50;
  transition: all 0.3s ease;
}

.prev-btn-clean { left: -22px; }
.next-btn-clean { right: -22px; }

.prev-btn-clean:hover, .next-btn-clean:hover {
  background: #0052ff;
  color: #ffffff;
  border-color: #0052ff;
}

/* 🔘 CLEAN SLIDER DOTS MECHANICS */
.int-dots-container-clean {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.int-dot-clean {
  width: 8px;
  height: 8px;
  background: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.int-dot-clean.active {
  width: 20px;
  background: #0052ff;
  border-radius: 99px;
}

/* 🏢 CORPORATE STRIP ROW LOGOS BRANDS */
.corporate-logos-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 36px;
  flex-wrap: wrap;
  gap: 20px;
}

.logo-unit {
  font-family: 'Sora', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.c-l-icon { font-size: 13px; }

/* 📱 MOBILE RESPONSIVE ADAPTATION SHIELD */
@media (max-width: 950px) {
  .interview-flex-layout { grid-template-columns: 1fr !important; gap: 24px !important; }
  .side-grid-image-frame { height: 260px !important; }
  .slide-metrics-bento { grid-template-columns: repeat(2, 1fr) !important; }
  .prev-btn-clean { left: 8px; top: 150px; }
  .next-btn-clean { right: 8px; top: 150px; }
  .corporate-logos-strip { justify-content: center; gap: 28px 40px; }
}



/* testimonial */
/* ==========================================================================
   🎡 INFINITE 3D ARC CONTINUOUS SCROLLER (Makkhan Jaisa Smooth Loop)
   ========================================================================== */
#testimonials-premium-hub-t {
  padding: 80px 0;
  background: transparent;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.curved-deck-outer-container-t {
  max-width: 100%;
  margin: 40px auto 0;
  padding: 60px 0; /* एक्स्ट्रा पैडिंग ताकि 3D उभार ऊपर से कटे नहीं */
  overflow: hidden;
  position: relative;
}

/* 🚀 यह ट्रैक लगातार बिना रुके पिक्सेल-दर-पिक्सेल आगे बढ़ेगा */
.curved-deck-track-t {
  display: flex;
  gap: 32px;
  width: max-content;
  will-change: transform;
  transform-style: preserve-3d;
  perspective: 1000px;
}

/* 💬 WhatsApp Chat Card Core Design */
.wa-mock-chat-bubble-t {
  flex-shrink: 0;
  width: 290px;
  height: 380px;
  border-radius: 24px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 45px rgba(0, 40, 120, 0.05);
  cursor: pointer;
  background: #ffffff;
  /* ट्रांसफ़ॉर्म पर ट्रांज़िशन हटा दिया है ताकि लगातार चलते समय कार्ड्स कांपे (jerk) नहीं */
  transition: box-shadow 0.4s ease, background 0.4s ease;
}

/* 🔥 होवर करने पर कस्टमाइज्ड फोकस स्केल अप */
.wa-mock-chat-bubble-t:hover {
  z-index: 9999 !important;
  box-shadow: 0 30px 60px rgba(0, 82, 255, 0.16) !important;
}

/* 🎨 BRAND GRADIENTS */
.wa-mock-chat-bubble-t.bg-gradient-emerald-t { background: linear-gradient(180deg, #ffffff 0%, #ffffff 65%, #a7f3d0 100%); border: 1px solid #e2e8f0; color: #1e293b; }
.wa-mock-chat-bubble-t.bg-gradient-light-purple-t { background: linear-gradient(180deg, #ffffff 0%, #ffffff 65%, #c7d2fe 100%); border: 1px solid #e2e8f0; color: #1e293b; }
.wa-mock-chat-bubble-t.bg-gradient-dark-obsidian-t { background: linear-gradient(180deg, #111827 0%, #111827 65%, #6ee7b7 100%); border: none; color: #f9fafb; }
.wa-mock-chat-bubble-t.bg-gradient-cyan-aura-t { background: linear-gradient(180deg, #ffffff 0%, #ffffff 65%, #99f6e4 100%); border: 1px solid #e2e8f0; color: #1e293b; }
.wa-mock-chat-bubble-t.bg-gradient-royal-purple-t { background: linear-gradient(180deg, #1f1a3a 0%, #1f1a3a 65%, #c084fc 100%); border: none; color: #f9fafb; }

.wa-chat-content-scroller-t { display: flex; flex-direction: column; gap: 12px; height: 100%; overflow-y: auto; }
.wa-chat-content-scroller-t::-webkit-scrollbar { display: none; }
.wa-bubble-meta-header-t { text-align: center; margin-bottom: 14px; }
.wa-bubble-meta-header-t span { font-size: 10px; background: rgba(0, 0, 0, 0.05); color: #64748b; padding: 3px 10px; border-radius: 6px; font-weight: 700; }
.wa-mock-chat-bubble-t:not([class*="bg-gradient-dark"]):not([class*="bg-gradient-royal"]) .wa-bubble-meta-header-t span { color: #64748b; }
.bg-gradient-dark-obsidian-t .wa-bubble-meta-header-t span, .bg-gradient-royal-purple-t .wa-bubble-meta-header-t span { background: rgba(255, 255, 255, 0.1); color: #94a3b8; }
.wa-msg-row-t { max-width: 90%; padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.45; font-weight: 500; position: relative; }
.wa-time-stamp-t { display: block; font-size: 9px; color: #94a3b8; text-align: right; margin-top: 4px; }
.msg-incoming-t { background: #f1f5f9; color: #1e293b; align-self: flex-start; border-top-left-radius: 2px; }
.msg-outgoing-t { background: #e0f2fe; color: #0369a1; align-self: flex-end; border-top-right-radius: 2px; }
.msg-incoming-dark-t { background: #1f2937; color: #f9fafb; align-self: flex-start; border-top-left-radius: 2px; }
.msg-outgoing-dark-t { background: #064e3b; color: #34d399; align-self: flex-end; border-top-right-radius: 2px; }

/* ==========================================================================
   🎯 ACTIVE CLICK FOCUS MODE (Click Karne Par Card Bada Aur Seedha Hoga)
   ========================================================================== */
/* ==========================================================================
   🎯 ACTIVE CLICK FOCUS MODE (Click Karne Par Card Bada Aur Seedha Hoga)
   ========================================================================== */
.wa-mock-chat-bubble-t.active-click-t {
  transform: translateY(-30px) rotate(0deg) scale(1.1) !important;
  z-index: 99999 !important;
  box-shadow: 0 35px 70px rgba(0, 82, 255, 0.25) !important;
  border-color: #0052ff !important;
  opacity: 1 !important;
}

/* मोबाइल और टैबलेट स्क्रीन्स के लिए रेस्पॉन्सिविटी सेफ्टी */
@media (max-width: 1300px) {
  .wa-mock-chat-bubble-t.active-click-t {
    transform: scale(1.05) !important;
  }
}