body{
margin:0;
font-family:Poppins,sans-serif;
color:#333;
background:
radial-gradient(circle at top,#fdfdff,#eef1f7);
line-height:1.6;
}

/* TOPBAR */
.topbar{
  background:linear-gradient(90deg,#0f172a,#1e293b);
  color:#e2e8f0;

  text-align:center;

  font-size:14px;     /* smaller text */
  line-height:15px;   /* control height */

  padding:0;          /* remove padding */
  min-height:15px;    /* fixed slim height */

  display:flex;
  align-items:center;
  justify-content:center;
}

/* HEADER */
.header{
position:sticky;
top:0;
z-index:1000;

display:flex;
justify-content:space-between;
align-items:center;
padding:8px 40px;

background:#3E1E5E; /* solid color */

box-shadow:0 4px 15px rgba(0,0,0,0.1);
transition:0.3s;
}

.logo img{
height:50px;
}

/* NAV */
nav a{
color:white;
text-decoration:none;
margin-left:25px;
font-weight:500;
}

nav a:hover{
color:#19C2C9;
}

nav{
display:flex !important;
gap:30px;
align-items:center;
}

/* ===== MEGA MENU ===== */

/* PANEL */
.mm-menu{
  position:absolute;
  top:70px;
  left:50%;
  transform:translateX(-50%);
  
  width:1200px;
  max-width:95vw;

  background:#fff;
  padding:60px 0 70px;

  box-shadow:0 30px 70px rgba(0,0,0,0.12);

  opacity:0;
  visibility:hidden;

  transition:.3s ease;

  z-index:999999; /* 🔥 IMPORTANT */
}

/* SHOW */
.mm-item:hover .mm-menu{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}

/* INNER WRAPPER */
.mm-wrap{
width:1200px;
max-width:92%;
margin:auto;

display:flex;
gap:70px;
}

/* LEFT */
.mm-platforms{
width:260px;
display:flex;
flex-direction:column;
gap:16px;

border-right:1px solid #eee;
padding-right:30px;
}

.mm-platforms span{
font-size:16px;
font-weight:600;
cursor:pointer;
padding:10px 0;
transition:.2s;
}

.mm-platforms span:hover{
color:#4f6cff;
transform:translateX(6px);
}

/* RIGHT */
.mm-content{
flex:1;
display:none;
gap:60px;
animation:fade .25s ease;
}

.mm-content.active{
display:flex;
}

@keyframes fade{
from{opacity:0; transform:translateY(8px);}
to{opacity:1; transform:translateY(0);}
}

.mm-col{
max-width:480px;
}

.mm-col h4{
font-size:18px;
margin-bottom:6px;
}

.mm-col p{
font-size:15px;
color:#555;
margin-bottom:22px;
line-height:1.6;
}

/* BOX */
.mm-highlight{
width:320px;
padding:35px;
background:#f7f9ff;
border-radius:16px;
}

.mm-highlight h3{
font-size:22px;
margin-bottom:10px;
}

.mm-highlight p{
font-size:15px;
color:#555;
margin-bottom:14px;
}

.mm-highlight a{
text-decoration:none;
font-weight:600;
color:#4f6cff;
}

.mm-highlight a:hover{
text-decoration:underline;
}

/* HERO */
.hero{
text-align:center;
padding:120px 20px;
background:linear-gradient(to bottom,#f4f6fb,#ffffff);
}

.hero h1{
font-size:42px;
color:#3E1E5E;
margin-bottom:15px;
}

/* BUTTON */
.btn{
background:#19C2C9;
color:white;
padding:14px 28px;
border-radius:6px;
text-decoration:none;
font-weight:600;
display:inline-block;
margin-top:10px;
}

/* SECTIONS */
.services{
padding:80px 20px;
text-align:center;
}

section{
  position:static;
}

section:after{
content:"";
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background:radial-gradient(circle,rgba(25,194,201,.04),transparent 70%);
pointer-events:none;
}
.services h2{
color:#3E1E5E;
margin-bottom:40px;
}

/* SERVICE CARDS */
.service-box{
background:white;
padding:35px;
margin:20px auto;
max-width:650px;
border-radius:10px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:0.3s;
}

.service-box:hover{
transform:translateY(-5px);
}

/* PROCESS */

.process-section{
display:flex;
align-items:center;
justify-content:space-between;
padding:100px 12%;
background:#f9fbff;
gap:60px;
}

.process-left{
flex:1;
}

.process-left h2{
font-size:40px;
margin-bottom:30px;
}

.step{
display:flex;
align-items:center;
margin-bottom:25px;
background:white;
padding:18px 22px;
border-radius:12px;
box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.step span{
font-size:20px;
font-weight:700;
color:#4f6cff;
margin-right:15px;
}

.process-right{
flex:1;
text-align:center;
}

.process-right img{
width:100%;
max-width:450px;
border-radius:18px;
box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.proof-section{
padding:120px 10%;
background:#fff;
}

.proof-wrap{
display:flex;
justify-content:space-between;
gap:60px;
align-items:center;
max-width:1100px;
margin:auto;
}

/* LEFT */
.proof-left h2{
font-size:44px;
line-height:1.2;
margin-bottom:15px;
}

.proof-left p{
color:#555;
max-width:420px;
margin-bottom:25px;
}

.proof-btn{
display:inline-block;
padding:14px 28px;
background:#111;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:600;
}

/* RIGHT STATS */
.proof-right{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.stat h3{
font-size:34px;
color:#4f6cff;
margin-bottom:5px;
}

.stat p{
font-size:14px;
color:#555;
}

/* INDUSTRIES */
.industries-row{
text-align:center;
margin-top:80px;
color:#666;

/* animation base */
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

/* active animation */
.industries-row.show{
opacity:1;
transform:translateY(0);
}

.industries-row span{
margin:0 14px;
font-weight:600;
color:#111;
position:relative;
}

/* divider line */
.industries-row span:not(:last-child)::after{
content:"|";
margin-left:14px;
color:#cbd5e1;
font-weight:400;
}


/* MOBILE */
@media(max-width:768px){

.proof-wrap{
flex-direction:column;
text-align:center;
}

.proof-left p{
margin:auto;
}

}
/* WHY SECTION */
.smart-features{
padding:70px 8%;
text-align:center;
background:linear-gradient(180deg,#f6f8fb,#eef2f7);
overflow:hidden;
}

.smart-features h2{
font-size:34px;
margin-bottom:8px;
}

.sf-sub{
color:#667;
margin-bottom:45px;
}

/* GRID */

.sf-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1200px;
margin:auto;
}

/* CARD */

.sf-card{
background:white;
border-radius:14px;
overflow:hidden;
border:1px solid #e6e9f2;
transition:.35s;
display:flex;
flex-direction:column;

/* ANIMATION */
  opacity:1;
  transform:none;
  animation:none;
}

.sf-card:nth-child(2){animation-delay:.15s;}
.sf-card:nth-child(3){animation-delay:.3s;}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

.sf-card:hover{
transform:translateY(-10px);
box-shadow:0 25px 45px rgba(0,0,0,.10);
}

/* IMAGE AREA */

.sf-img{
background:#eef2f7;
padding:30px;
height:230px;
display:flex;
align-items:center;
justify-content:center;
}

.sf-img img{
max-width:100%;
max-height:190px;
object-fit:contain;
transition:.4s;
}

/* subtle zoom on hover */
.sf-card:hover img{
transform:scale(1.05);
}

/* TEXT */

.sf-content{
padding:22px;
text-align:left;
}

.sf-content h3{
margin-bottom:8px;
font-size:18px;
}

.sf-content p{
font-size:14px;
color:#555;
line-height:1.6;
margin-bottom:10px;
}

.mini{
font-size:12px;
color:#7a8699;
}

/* MOBILE */

@media(max-width:900px){
.sf-grid{
grid-template-columns:1fr;
}
}

/* SHINE EFFECT */

.sf-card{
position:relative;
overflow:hidden;
}

/* shine layer */
.sf-card::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:60%;
height:100%;
background:linear-gradient(
120deg,
transparent,
rgba(255,255,255,0.6),
transparent
);
transform:skewX(-25deg);
}

/* hover shine */
.sf-card:hover::after{
animation:shineMove .9s ease;
}

/* click shine (extra premium) */
.sf-card:active::after{
animation:shineMove .6s ease;
}

@keyframes shineMove{
100%{
left:130%;
}
}

/* CTA */
.cta-clean{
padding:40px 20px;
text-align:center;

/* darker gradient for contrast */
background:linear-gradient(135deg,#3f1f5f,#5e3a8a);

color:white;
}

.cta-inner{
max-width:720px;
margin:auto;
}

/* HEADING FIX */
.cta-clean h2{
font-size:26px;
font-weight:600;
margin-bottom:10px;
color:#ffffff !important; /* force white */
}

/* TEXT */
.cta-clean p{
font-size:15px;
margin-bottom:18px;
color:rgba(255,255,255,.9);
}

/* BUTTON */
.btn-cta{
display:inline-block;
padding:12px 24px;
background:white;
color:#3f1f5f;
border-radius:6px;
text-decoration:none;
font-weight:600;
font-size:14px;
transition:.25s;
}

.btn-cta:hover{
transform:translateY(-2px);
box-shadow:0 8px 18px rgba(0,0,0,.25);
}
.cta-clean h2{
color:#ffffff !important;

background:none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color:#ffffff !important;

font-size:26px;
font-weight:600;
margin-bottom:10px;
}

.split-hero{
padding:90px 6%;
background:#f7f9fc;
}

.split-hero.light{
background:white;
}

.split-wrap{
display:flex;
align-items:center;
gap:70px;
max-width:1300px;
margin:auto;
}

.split-wrap.reverse{
flex-direction:row-reverse;
}

/* TEXT */

.split-text{
flex:1;
}

.split-text h2{
font-size:36px;
margin-bottom:12px;
}

.lead{
font-weight:600;
margin-bottom:10px;
}

.split-text p{
color:#555;
line-height:1.6;
margin-bottom:16px;
}

.split-text ul{
margin-bottom:20px;
padding-left:18px;
}

.split-text li{
margin-bottom:6px;
}

/* BIG IMAGE */

.split-img{
flex:1;
}

.split-img img{
width:100%;
height:480px; /* BIG IMAGE */
object-fit:cover;
border-radius:20px;
box-shadow:0 30px 60px rgba(0,0,0,.15);
}

/* BUTTON */

.split-btn{
display:inline-block;
padding:12px 26px;
background:#111;
color:white;
border-radius:6px;
text-decoration:none;
font-weight:600;
}

/* MOBILE */

@media(max-width:900px){
.split-wrap{
flex-direction:column;
text-align:center;
}

.split-img img{
height:300px;
}
}
/* FOOTER */
footer{
background:#2c1a44;
color:white;
text-align:center;
padding:40px 20px;
}

/* CONTACT FORM */
.contact-section{
padding:80px 20px;
text-align:center;
}

form{
max-width:500px;
margin:auto;
}

form input,form textarea{
width:100%;
padding:14px;
margin:10px 0;
border-radius:6px;
border:1px solid #ddd;
font-family:Poppins;
}

form textarea{
height:120px;
}

/* IMAGES */
img{
max-width:100%;
height:auto;
}

/* WHATSAPP FIXED */
/* WHATSAPP FIXED */
.whatsapp{
  position:fixed !important;
  bottom:25px;
  right:25px;

  background:#25D366;
  color:white;

  font-size:26px;
  width:55px;
  height:55px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;
  text-decoration:none;

  box-shadow:0 6px 18px rgba(0,0,0,.25);

  z-index:99999;
  transition:.3s;
}

.whatsapp:hover{
  transform:scale(1.12);
}

body{
  transform:none !important;
}

.whatsapp{
  animation:pulse 2s infinite;
}

@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.6);}
  70%{box-shadow:0 0 0 14px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}

.whatsapp-wrap{
  position:fixed;
  bottom:25px;
  right:25px;
  z-index:99999;
}

/* Popup Box */
.audit-popup{
  position:absolute;  /* fixed mat rakho */
  bottom:80px;
  right:0;

  width:320px;
  max-width:90vw;   /* screen se bahar nahi jayega */

  background:#ffffff;
  border-radius:18px;
  padding:24px;

  box-shadow:0 30px 80px rgba(0,0,0,.18);

  opacity:0;
  transform:translateY(20px) scale(.96);
  pointer-events:none;
  transition:.35s ease;

  z-index:99998;
}

/* Active state */
.audit-popup.active{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* Heading */
.audit-popup h3{
  margin-bottom:14px;
  font-size:18px;
  font-weight:600;
}

/* Inputs */
.audit-popup input,
.audit-popup select{
  width:90%;
  padding:11px;
  margin-bottom:10px;

  border-radius:8px;
  border:1px solid #e5e7eb;
  font-size:14px;

  transition:.2s;
}

.audit-popup input:focus,
.audit-popup select:focus{
  border-color:#25D366;
  outline:none;
}

/* Button */
.audit-popup button{
  width:100%;
  padding:11px;

  border:none;
  border-radius:8px;
  background:#25D366;
  color:white;
  font-weight:600;
  cursor:pointer;

  transition:.3s;
}

.audit-popup button:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(37,211,102,.3);
}
/* MOBILE */
@media(max-width:768px){

.header{
flex-direction:column;
text-align:center;
}

nav a{
display:block;
margin:8px 0;
}

.hero{
padding:70px 20px;
}

.hero h1{
font-size:28px;
}

.service-box{
margin:15px;
padding:25px;
}

}

/* CASE STUDIES */

.case-pro{
padding:100px 10%;
background:#f7f9fc;
text-align:center;
}

.case-pro h2{
font-size:34px;
margin-bottom:50px;
}

/* GRID */

.case-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
max-width:1100px;
margin:auto;
}

/* CARD */

.case-card{
background:white;
padding:28px;
border-radius:12px;
text-align:left;
text-decoration:none;
color:#111;
border:1px solid #e6e9f2;
transition:.3s;
display:block;
}

.case-card:hover{
transform:translateY(-8px);
box-shadow:0 20px 40px rgba(0,0,0,.08);
}

/* TEXT */

.case-card h4{
color:#4f6cff;
margin-bottom:6px;
font-size:14px;
}

.case-card h3{
margin-bottom:10px;
font-size:22px;
}

.case-card p{
font-size:14px;
color:#555;
margin-bottom:14px;
}

.case-card span{
font-size:13px;
color:#4f6cff;
font-weight:600;
}

/* MOBILE */

@media(max-width:900px){
.case-grid{
grid-template-columns:1fr;
}
}

/* TESTIMONIALS */

.testimonials{
background:linear-gradient(180deg,#f8f9fd,#eef1f7);
padding:90px 20px;
text-align:center;
overflow:hidden;
position:relative;
}

/* subtle background glow shapes */

.testimonials::before{
content:"";
position:absolute;
width:320px;
height:320px;
background:#e6ecff;
border-radius:50%;
top:-120px;
left:-120px;
opacity:.6;
}

.testimonials::after{
content:"";
position:absolute;
width:280px;
height:280px;
background:#f1e7ff;
border-radius:50%;
bottom:-120px;
right:-120px;
opacity:.5;
}

.testimonials h2{
margin-bottom:35px;
font-size:30px;
position:relative;
z-index:1;
}

/* CARD */

.testimonial{
background:white;
padding:45px 40px;
border-radius:18px;
box-shadow:0 20px 50px rgba(62,30,94,.10);
font-size:16.5px;
line-height:1.7;
max-width:720px;
margin:auto;
position:relative;
z-index:1;

/* animation */
opacity:0;
transform:translateY(25px) scale(.98);
transition:.5s ease;

display:none;
}

/* ACTIVE */

.testimonial.active{
display:block;
opacity:1;
transform:translateY(0) scale(1);
}

/* QUOTE MARK */

.testimonial:before{
content:"“";
font-size:80px;
color:#19C2C9;
position:absolute;
top:-18px;
left:22px;
opacity:.12;
font-family:serif;
}

/* NAME */

.testimonial h4{
margin-top:15px;
font-size:14px;
color:#4f6cff;
font-weight:600;
}

/* hover */

.testimonial:hover{
transform:translateY(-6px);
box-shadow:0 25px 65px rgba(62,30,94,.18);
}

/* MOBILE FRIENDLY */

@media(max-width:768px){

.testimonials{
padding:70px 15px;
}

.testimonials h2{
font-size:24px;
}

.testimonial{
padding:30px 22px;
font-size:15px;
border-radius:14px;
}

.testimonial:before{
font-size:60px;
top:-10px;
left:15px;
}

}
.testimonials::before,
.testimonials::after{
filter:blur(1px);
}




/* ANIMATIONS */

.service-box,
.case-box{
animation:fadeUp 1s ease;
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* STICKY HEADER */
.header{
position:sticky;
top:0;
z-index:1000;
}
.stats{
display:flex;
justify-content:center;
gap:60px;
padding:80px 20px;
background:white;
text-align:center;
}

.stat h2{
font-size:40px;
color:#3E1E5E;
}

.logo-slider{
border-top:1px solid rgba(255,255,255,.1);
}

.logo-slider h2{
color:white;
-webkit-text-fill-color:white;
margin-bottom:15px;
}

.logo-slider p{
color:#cfcfe6;
}

.logo-track img{
height:65px;
filter:grayscale(100%) brightness(1.5);
opacity:.85;
}

.logo-track img{
height:85px;
opacity:.75;
filter:grayscale(100%);
transition:0.4s;
}

.logo-track img:hover{
filter:grayscale(0);
opacity:1;
transform:scale(1.25);
}
.testimonials h2,
.logo-slider h2{
margin-bottom:50px;
}
.testimonials{
background:linear-gradient(180deg,#ecfdf5,#d1fae5);
padding:10px 20px;
}

.testimonial{
background:white;
padding:20px;
border-radius:25px;
box-shadow:0 20px 60px rgba(62,30,94,.15);
font-size:20px;
line-height:1.7;
} 
 
 .logo-slider{
padding:50px 20px;
background:linear-gradient(135deg,#1a1238,#2a1f4f);
text-align:center;
}

/* Center content */
.logo-slider h2,
.logo-slider p,
.logo-track{
max-width:1100px;
margin-left:auto;
margin-right:auto;
}
.logo-slider{
  padding:30px 15px;   /* height kam */
  background:linear-gradient(135deg,#241a4d,#3a2c73);
  text-align:center;
  overflow:hidden;
}

.logo-track{
display:flex;
gap:90px;
align-items:center;
    animation:scrollLogos 40s linear infinite;
width:max-content;
margin-top:40px;
}

@keyframes scrollLogos{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

/* Pause on hover */
.logo-track:hover{
animation-play-state:paused;
}
.reveal{
opacity:0;
transform:translateY(60px);
transition:1s ease;
}

.reveal.active{
opacity:1;
transform:translateY(0);
}
.header{
transition:0.3s;
}

.hero{
background-image:url('../images/hero-bg.jpg');
background-attachment:scroll;
background-size:cover;
background-position:center;
color:white;
}
.client-logos{
text-align:center;
padding:70px 20px;
background:#f4f6fb;
}

.logo-row{
display:flex;
justify-content:center;
gap:40px;
flex-wrap:wrap;
margin-top:30px;
}

.logo-row img{
height:40px;
opacity:0.7;
transition:0.3s;
}

.logo-row img:hover{
opacity:1;
}

.team{
padding:80px 20px;
text-align:center;
}

.team-grid{
display:flex;
gap:30px;
justify-content:center;
flex-wrap:wrap;
}

.member img{
width:150px;
height:150px;
border-radius:50%;
object-fit:cover;
}

.timeline{
background:#eef1f7;
padding:70px 20px;
text-align:center;
}

.timeline-box{
max-width:600px;
margin:auto;
line-height:2;
}
.container-small{
max-width:700px;
margin:auto;
padding:90px 20px;
}

/* HERO */
/* ===== GLOBAL ===== */

body{
margin:0;
font-family:Poppins,sans-serif;
color:#333;
background:#f9fafc;
line-height:1.6;
}

h1,h2,h3,h4{
margin:0 0 15px;
font-weight:600;
color:#111;
}

section{
padding:80px 10%;
}

/* ===== HERO ===== */

.about-hero{
  background:
  linear-gradient(rgba(0,0,0,.40),rgba(0,0,0,.40)),
  url('../images/hero-AB-bg.jpg');

  background-size:cover;
  background-position:center;
  color:white;
  text-align:center;
  padding:100px 10%;
}
.about-hero h1,
.about-hero p{
  color:white !important;
}

.about-hero h1{
  background:none !important;
  -webkit-text-fill-color:white !important;
}

.about-hero h1{
font-size:48px;
margin-bottom:10px;
}

.about-hero p{
font-size:20px;
opacity:0.9;
}

/* ===== SPLIT SECTION ===== */

.about-split{
display:grid;
grid-template-columns:1fr 1fr;
gap:50px;
align-items:center;
background:white;
padding:25px 60px;
}

.about-split img{
box-shadow:0 20px 20px rgba(0,0,0,0.1);
}

/* ===== SERVICES / BOX GRID ===== */

.services{
background:#f4f6fb;
text-align:center;
}

.service-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
margin-top:40px;
}

.service-box{
background:white;
padding:35px;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,0.05);
transition:0.3s;
}

.service-box:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,0.1);
}

.process{
background:#f4f6fb;
text-align:center;
}

/* ===== ABOUT CAPABILITIES ===== */

.about-capabilities{
background:#ffffff;
text-align:center;
padding:80px 10%;
}

.about-capabilities h2{
font-size:36px;
margin-bottom:10px;
}

.about-capabilities .sub{
max-width:700px;
margin:0 auto 40px;
color:#666;
}

.cap-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.cap-box{
background:#f8fafc;
padding:35px;
border-radius:14px;
border:1px solid #eef1f6;
transition:0.3s;
}

.cap-box:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,0.08);
background:white;
}

.cap-box h3{
color:#1e3a8a;
font-size:20px;
margin-bottom:10px;
}

.cap-box p{
color:#555;
font-size:15px;
}
.process-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
margin-top:40px;
}

.process-box{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
transition:0.3s;
}

.process-box:hover{
transform:translateY(-8px);
}

/* ===== INSIDE SECTION ===== */

.inside{
padding:80px 10%;
text-align:center;
background:#f8fafc;
overflow:hidden;
}

.inside .sub{
max-width:600px;
margin:10px auto 40px;
color:#666;
}

.inside-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:30px;
}

.inside-card{
background:white;
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:0.4s;
transform:translateY(40px);
opacity:0;
animation:fadeUp 1s forwards;
}

.inside-card:nth-child(2){animation-delay:0.2s;}
.inside-card:nth-child(3){animation-delay:0.4s;}
.inside-card:nth-child(4){animation-delay:0.6s;}

.inside-card img{
width:100%;
height:200px;
object-fit:cover;
}

.inside-card h4{
padding:20px;
font-size:18px;
}

.inside-card:hover{
transform:translateY(-10px) scale(1.03);
}

/* animation */

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

/* ===== FOUNDER ===== */

.founder{
background:white;
text-align:center;
}

.founder .service-box{
max-width:700px;
margin:auto;
font-size:18px;
}

/* ===== CTA ===== */

.cta{
text-align:center;
background:linear-gradient(135deg,#0f172a,#1e40af);
color:white;
}

.btn{
display:inline-block;
margin-top:20px;
padding:14px 28px;
background:#2563eb;
color:white;
text-decoration:none;
border-radius:30px;
font-weight:600;
transition:0.3s;
}

.btn:hover{
background:#1d4ed8;
transform:scale(1.05);
}

/* ===== MOBILE ===== */

@media(max-width:768px){

.about-split{
grid-template-columns:1fr;
}

.about-hero h1{
font-size:34px;
}

section{
padding:60px 6%;
}

}

/* MOBILE */
@media(max-width:900px){
.role-grid{
flex-direction:column;
}
.mindset-grid,
.timeline-line{
flex-direction:column;
align-items:center;
}
}

/* CTA */
.about-cta-x{
background:linear-gradient(135deg,#3E1E5E,#5B2D82);
color:white;
text-align:center;
padding:100px 20px;
}

/* MOBILE */
@media(max-width:900px){
.story-grid,
.culture-grid{
flex-direction:column;
}
.values-grid,
.process-grid{
grid-template-columns:1fr 1fr;
}
}
/* ULTRA HERO */
.ultra-hero{
background:linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
url('/images/hero--EC-bg.jpg');
color:white;
text-align:center;
padding:140px 20px;
}

/* BENEFIT BAR */
.benefit-bar{
display:flex;
justify-content:center;
gap:40px;
padding:20px;
background:#3E1E5E;
color:white;
flex-wrap:wrap;
}

/* COMPARISON */
.compare{
padding:70px 20px;
text-align:center;
}
.compare table{
margin:auto;
border-collapse:collapse;
}
.compare td,.compare th{
border:1px solid #ddd;
padding:15px 25px;
}

/* PRICING */
.pricing{
background:#f4f6fb;
padding:80px 20px;
text-align:center;
}
.price-grid{
display:flex;
justify-content:center;
gap:30px;
flex-wrap:wrap;
}
.price-card{
  background:white;
  padding:40px;
  border-radius:16px;
  box-shadow:0 15px 35px rgba(0,0,0,.06);
  transition:.3s;
}

.price-card:hover{
  transform:translateY(-8px);
}

.price-card.highlight{
  border:2px solid #19C2C9;
}

.ultra-hero h1,
.ultra-hero p,
.ultra-hero a{
  color:white !important;
}

.ultra-hero h1{
  -webkit-text-fill-color:white !important;
  background:none !important;
}

.highlight{
border:2px solid #19C2C9;
}

/* ===================== */
/* FAQ MODERN */
/* ===================== */

.faq-modern{
  padding:110px 10%;
  background:white;
  max-width:900px;
  margin:auto;
}

.faq-modern h2{
  text-align:center;
  margin-bottom:50px;
}



.faq-item{
  border-bottom:1px solid #e5e7eb;
  padding:18px 0;
}

.faq-question{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  font-size:18px;
  font-weight:600;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 0;
}

.faq-question span{
  font-size:20px;
  transition:.3s;
}

.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:.4s ease;
}

.faq-answer p{
  margin-top:10px;
  color:#555;
  font-size:15px;
  line-height:1.6;
}

.faq-item.active .faq-answer{
  max-height:200px;
}

.faq-item.active .faq-question span{
  transform:rotate(45deg);
}

/* STICKY CTA */
.sticky-cta{
position:fixed;
bottom:20px;
left:20px;
background:#19C2C9;
color:white;
padding:14px 20px;
border-radius:30px;
text-decoration:none;
font-weight:600;
}
/* ===== MODERN COLOR SECTIONS ===== */

/* Alternate section colors */
.services:nth-child(even){
background:#f4f6fb;
}

.services:nth-child(odd){
background:white;
}

/* Card Upgrade */
.service-box{
background:white;
padding:40px;
margin:20px auto;
max-width:650px;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,0.08);
transition:0.35s;
border:1px solid rgba(0,0,0,0.04);
}

.service-box:hover{
transform:translateY(-12px);
box-shadow:0 30px 60px rgba(0,0,0,0.12);
}

/* Gradient headings */
h2{
background:linear-gradient(90deg,#3E1E5E,#19C2C9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* Hero overlay fix */
.hero{
background:
linear-gradient(rgba(20,10,40,0.65),rgba(20,10,40,0.65)),
url('../images/hero-bg.jpg');
background-size:cover;
background-position:center;
color:white;
}

/* Benefit bar glow */
.benefit-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px;
  flex-wrap:wrap;

  padding:14px 20px;   /* height reduced */
  background:linear-gradient(90deg,#3E1E5E,#5B2D82);

  color:white;
  font-size:14px;
  font-weight:500;
  letter-spacing:.3px;
}

.benefit-bar div{
  position:relative;
  opacity:.95;
}

/* separator line */
.benefit-bar div:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-30px;
  top:50%;
  transform:translateY(-50%);
  width:1px;
  height:16px;
  background:rgba(255,255,255,.25);
}

/* Buttons upgrade */
.btn{
background:linear-gradient(90deg,#19C2C9,#0ea5a8);
color:white;
padding:15px 34px;
border-radius:40px;
font-weight:600;
letter-spacing:.3px;
box-shadow:0 10px 25px rgba(25,194,201,.35);
transition:0.3s;
}

.btn:hover{
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(25,194,201,.45);
}

/* CTA premium look */
.cta{
background:linear-gradient(120deg,#3E1E5E,#5B2D82);
}

/* Timeline card look */
.timeline-box{
background:white;
padding:30px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.05);
}

/* Navbar glass effect */
.header{
position:sticky;
top:0;
z-index:1000;

display:flex;
justify-content:space-between;
align-items:center;
padding:5px 30px;

background:#3E1E5E; /* solid color */

box-shadow:0 4px 15px rgba(0,0,0,0.1);
transition:0.3s;
}


/* Logo hover */
.logo img{
transition:0.3s;
}
.logo img:hover{
transform:scale(1.05);
}

/* Subtle background pattern */
body{
background:linear-gradient(#f9fafc,#eef1f7);
}
/* SCROLL ANIMATION */
.fade-in{
opacity:0;
transform:translateY(40px);
transition:1s ease;
}

.fade-in.show{
opacity:1;
transform:translateY(0);
}
.btn{
transition:0.3s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}
img{
transition:0.4s;
}

.service-box:hover img{
transform:scale(1.05);
}
.ultra-hero{
  background:
  linear-gradient(rgba(0,0,0,.65),rgba(0,0,0,.65)),
  url('../images/hero--EC-bg.jpg');

  background-size:cover;
  background-position:center;
  background-attachment:scroll;

  color:white;
  text-align:center;

  padding:85px 20px 75px;   /* compact height */
}

.ultra-hero h1{
  font-size:44px;
  font-weight:700;
  margin-bottom:12px;
}

.ultra-hero p{
  font-size:18px;
  opacity:.9;
}

.hero-buttons{
margin-top:25px;
}

.ultra-hero span{
color:#19C2C9;
}

.ghost{
background:transparent;
border:2px solid white;
}
.feature-strip{
display:flex;
justify-content:center;
gap:50px;
padding:30px;
background:white;
font-weight:600;
flex-wrap:wrap;
}

.service-grid-ecom{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-top:50px;
}

.service-card-ecom{
  background:white;
  padding:35px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.05);
  transition:.3s;
  border:1px solid #eef1f6;
}

.service-card-ecom:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.service-card-ecom h3{
  margin-bottom:10px;
  font-size:18px;
}

.service-card-ecom p{
  font-size:14px;
  color:#555;
}

@media(max-width:900px){
  .service-grid-ecom{
    grid-template-columns:1fr;
  }
}


.compare-modern{
  padding:100px 10%;
  text-align:center;
  background:#f7f9fc;
}

.compare-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
  margin-top:50px;
}

.compare-box{
  background:white;
  padding:40px;
  border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  text-align:left;
}

.compare-box.highlight{
  border:2px solid #19C2C9;
}

.compare-box ul{
  margin-top:20px;
}

.compare-box li{
  margin-bottom:12px;
  color:#555;
}

@media(max-width:900px){
  .compare-grid{
    grid-template-columns:1fr;
  }
}

.modern-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:30px;
padding:80px 10%;
}

.modern-card{
background:white;
padding:40px;
border-radius:14px;
box-shadow:0 15px 35px rgba(0,0,0,0.06);
transition:0.3s;
}

.modern-card:hover{
transform:translateY(-10px);
}
.logos img{
height:60px;      /* pehle 40 tha */
width:auto;
object-fit:contain;
}


/* ===== ULTRA FOOTER ===== */
/* ===== ULTRA FOOTER ===== */

.ultra-footer{
  background:linear-gradient(135deg,#140f2d,#24153a,#37235e);
  color:white;

  padding:32px 6% 15px;   /* balanced spacing */

  position:relative;
  overflow:hidden;
  margin-top:auto;
}

/* subtle glow */
.ultra-footer::before{
  content:"";
  position:absolute;
  width:400px;
  height:400px;
  background:#19C2C9;
  filter:blur(120px);
  opacity:.10;
  top:-150px;
  right:-120px;
}

/* ===== GRID WRAP ===== */

.footer-wrap{
  max-width:1400px;      /* center container */
  margin:auto;           /* center align */

  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap:45px;

  align-items:start;
  position:relative;
  z-index:1;
}
.brand{
  max-width:100%;
}

/* ===== BRAND COLUMN ===== */

.brand{
  max-width:250px;
}

.trust-line{
  margin-top:12px;
  font-size:12px;
  opacity:.75;
  letter-spacing:.1px;
}

/* ===== HEADINGS ===== */

.ultra-footer h2{
  margin:0 0 15px;
  font-size:22px;
  color:white;
}

.ultra-footer h4{
  margin:0 0 18px;
  font-size:15px;
  letter-spacing:.5px;
  opacity:.9;
  color:white;
}

/* ===== TEXT ===== */

.f-col p{
  margin:6px 0;
  font-size:13.1px;
  line-height:1.6;
  opacity:.85;
}

/* ===== LINKS ===== */

.f-col a{
  display:block;
  text-decoration:none;
  color:white;
  opacity:.75;
  margin:6px 0;
  font-size:14px;
  transition:.3s;
}

.f-col a:hover{
  opacity:1;
  color:#19C2C9;
  transform:translateX(4px);
}

/* ===== BADGE ===== */

.badge{
  display:inline-block;
  margin-top:14px;
  padding:7px 14px;
  background:rgba(255,255,255,.08);
  border-radius:20px;
  font-size:13px;
}

/* ===== SOCIALS ===== */

.socials{
  margin-top:10px;
}

.socials a{
  display:inline-block;
  margin-right:12px;
  font-size:14px;
}

/* ===== BOTTOM BAR ===== */

.footer-bottom{
  margin-top:5px;

  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;

  padding-top:15px;
  border-top:1px solid rgba(255,255,255,.12);

  max-width:1500px;
  margin-left:auto;
  margin-right:auto;

  font-size:13px;
  opacity:.75;
}
.heart{
  text-shadow:0 0 8px rgba(255,46,99,.5);
}

/* ===== MOBILE ===== */
@media(max-width:1000px){
  .footer-wrap{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:600px){
  .footer-wrap{
    grid-template-columns:1fr;
  }
}

#loader{
position:fixed;
width:100%;
height:100%;
background:white;
display:flex;
justify-content:center;
align-items:center;
z-index:9999;
}

.spinner{
width:45px;
height:45px;
border:4px solid #eee;
border-top:4px solid #19C2C9;
border-radius:50%;
animation:spin 1s linear infinite;
}

@keyframes spin{
100%{transform:rotate(360deg);}
}

#progressBar{
position:fixed;
top:0;
left:0;
height:4px;
background:linear-gradient(90deg,#19C2C9,#3E1E5E);
width:0%;
z-index:9999;
}
.floating-cta{
position:fixed;
bottom:0;
width:100%;
background:#19C2C9;
color:white;
text-align:center;
padding:2px;
font-weight:600;
z-index:999;
}

.floating-cta a{
color:white;
margin-left:10px;
text-decoration:underline;
}
.ultra-hero{
background-attachment:scroll;
}
/* ===== IMPACT SECTION ===== */
/* ===== SELLER IMPACT SECTION ===== */

.impact-section{
text-align:center;
padding:100px 12%;
position:relative;
overflow:hidden;

/* bold conversion background */
background:linear-gradient(135deg,#ffffff 0%,#f0f4ff 60%,#e9efff 100%);
}

.impact-section{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;   /* 🔥 THIS centers horizontally */
}

.impact-section::before{
  content:"TRUSTED BY GROWING BUSINESSES";
  position:absolute;
  top:0;

  background:#4f6cff;
  color:white;
  padding:8px 22px;
  font-size:14px;
  letter-spacing:1px;
  font-weight:600;
  border-radius:0 0 12px 12px;

  transform:translateY(-100%);
  animation:slideDown 1.0s ease-out forwards;
}
@keyframes slideDown{
  from{
    transform:translateY(-100%);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}
/* Headline */
.impact-section h1{
font-size:56px;
max-width:900px;
margin:auto;
color:#111;
line-height:1.1;
font-weight:800;
}

.impact-section span{
color:#4f6cff;
}
.impact-section h2 {
  font-size: 22px;
  font-weight: 500;
  margin-top: 15px;
  margin-bottom: 20px;
  color: #444;
}
/* Subtext */
.sub{
margin-top:5px;
font-size:20px;
color:#444;
max-width:700px;
margin-left:auto;
margin-right:auto;
}

/* SELLER POINTS */
.impact-points{
margin-top:20px;
display:flex;
justify-content:center;
gap:25px;
flex-wrap:wrap;
}

.impact-points div{
background:white;
padding:18px 28px;
border-radius:14px;
font-weight:700;
color:#222;
border:1px solid #e5e9ff;
box-shadow:0 8px 18px rgba(0,0,0,.06);
transition:.25s;
}

.impact-points div:hover{
transform:scale(1.05);
background:#4f6cff;
color:white;
}

/* POWER CTA BUTTON */
.impact-btn{
display:inline-block;
margin-top:60px;
padding:20px 44px;
background:linear-gradient(135deg,#4f6cff,#3451ff);
color:white;
border-radius:14px;
text-decoration:none;
font-weight:700;
font-size:19px;
letter-spacing:.5px;
transition:.3s;
box-shadow:0 12px 30px rgba(52,81,255,.35);
}

.impact-btn:hover{
transform:translateY(-5px) scale(1.03);
box-shadow:0 18px 40px rgba(52,81,255,.45);
}

/* MOBILE */
@media(max-width:768px){

.impact-section h1{
font-size:38px;
}

.sub{
font-size:17px;
}

}
.html{
  scroll-behavior:smooth;
}

.img{
  image-rendering:auto;
  backface-visibility:hidden;
}
body{
  overflow-x:hidden;
}

/* ULTRA SMOOTH SCROLL FIX */
*{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  transform:translateZ(0);
}

section,
.service-box,
.sf-card,
.testimonial,
.case-card,
.header{
  transform:translateZ(0);
  will-change:transform;
}

.header{
  overflow:visible !important;
}

.mm-item{
  position:static;
}

.mm-menu{
  pointer-events:auto;
}

.mm-platforms span{
  display:block;
  padding:12px 18px;
  position:relative;
  transition:.25s;
}

.mm-platforms span::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  height:0%;
  width:4px;
  background:#4f46e5;
  border-radius:4px;
  transition:.25s;
  transform:translateY(-50%);
}

.mm-platforms span:hover::before{
  height:70%;
}

.mm-platforms span:hover{
  background:#f5f7ff;
  padding-left:26px;
  color:#4f46e5;
}

.home{
  padding-bottom:30px; /* CTA height */
}
.contact-real{
  padding:90px 8%;
  background:#f7f9fc;
}

/* HEAD */
.real-head{
  text-align:center;
  max-width:650px;
  margin:auto;
  margin-bottom:50px;
}

.real-head h1{
  font-size:34px;
  color:#3E1E5E;
  margin-bottom:10px;
}

/* WRAP */
.real-wrap{
  display:flex;
  gap:50px;
  max-width:1100px;
  margin:auto;
}

/* FORM */
.real-form{
  flex:1;
  background:white;
  padding:40px;
  border-radius:16px;
  box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.real-form h3{
  margin-bottom:20px;
  font-size:22px;
}

.real-form input,
.real-form textarea{
  width:95%;
  padding:14px;
  margin:12px 0;
  border-radius:8px;
  border:1px solid #e5e7eb;
  font-family:Poppins;
  font-size:14px;
  transition:.3s;
}

.real-form input:focus,
.real-form textarea:focus{
  border-color:#3E1E5E;
  outline:none;
  box-shadow:0 0 0 3px rgba(62,30,94,.08);
}

.real-form textarea{
  height:130px;
  resize:none;
}

/* Button Upgrade */
.real-form button{
  width:100%;
  padding:15px;
  background:linear-gradient(90deg,#3E1E5E,#5B2D82);
  color:white;
  border:none;
  border-radius:10px;
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  transition:.3s;
}

.real-form button:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 25px rgba(62,30,94,.25);
}

/* Success / Error Message */
.form-message{
  margin-top:10px;
  font-size:14px;
  font-weight:500;
}

/* INFO */
.real-info{
  flex:1;
}

.real-info p{
  color:#555;
  line-height:1.6;
}

.real-info ul{
  margin:20px 0;
  line-height:2;
  color:#444;
}

.real-contact{
  background:white;
  padding:20px;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}

/* MOBILE */
@media(max-width:900px){
  .real-wrap{
    flex-direction:column;
  }
}

/* ============================= */
/* RESEARCH PAGE IMPROVEMENTS */
/* ============================= */

/* HERO ALIGNMENT */
.research-hero{
  position:relative;
  padding:100px 10% 80px;
  text-align:center;
  color:white;

  background:
  linear-gradient(rgba(20,10,40,.75),rgba(20,10,40,.75)),
  url('../images/hero-R-bg.jpg');

  background-size:cover;
  background-position:center;
  background-attachment:scroll;
}

.research-hero h1{
  font-size:56px;
  font-weight:700;
  line-height:1.1;
  max-width:900px;
  margin:auto;
  color:white;
}

.research-hero p{
  margin-top:22px;
  font-size:20px;
  max-width:700px;
  margin-left:auto;
  margin-right:auto;
  opacity:.95;
}

/* ===================== */
/* RESEARCH PROCESS */
/* ===================== */

.research-process{
  padding:120px 10%;
  background:#ffffff;
}

.process-head{
  text-align:center;
  max-width:700px;
  margin:auto;
  margin-bottom:70px;
}

.process-head h2{
  font-size:38px;
  margin-bottom:15px;
}

.process-head p{
  color:#555;
  font-size:16px;
  line-height:1.6;
}

/* GRID */

.process-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

/* CARD */

.process-card{
  background:#f9fafc;
  padding:40px;
  border-radius:14px;
  border:1px solid #eef1f6;
  transition:.3s;
  position:relative;
}

.process-card:hover{
  background:#ffffff;
  box-shadow:0 15px 35px rgba(0,0,0,.06);
  transform:translateY(-6px);
}

/* STEP NUMBER */

.step-number{
  font-size:14px;
  font-weight:700;
  letter-spacing:1px;
  color:#19C2C9;
  margin-bottom:12px;
}

/* TITLE */

.process-card h3{
  font-size:20px;
  margin-bottom:12px;
  color:#111;
}

/* TEXT */

.process-card p{
  font-size:15px;
  color:#555;
  line-height:1.6;
}

/* MOBILE */

@media(max-width:900px){
  .process-grid{
    grid-template-columns:1fr;
  }
}

/* WHO WE WORK */
.who-we-work{
  padding:100px 10%;
  background:#f7f9fc;
  text-align:center;
}

.who-we-work h2{
  font-size:34px;
  margin-bottom:50px;
}

.focus-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
}

.focus-grid div{
  background:white;
  padding:30px;
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  transition:.3s;
}

.focus-grid div:hover{
  transform:translateY(-6px);
}

.focus-grid h4{
  margin-bottom:12px;
  font-size:18px;
}

.focus-grid p{
  font-size:14px;
  color:#555;
  line-height:1.6;
}

/* SERVICES CLEAN ALIGN */
.services{
  padding:100px 10%;
}

.services h2{
  text-align:center;
  margin-bottom:60px;
}

.service-box{
  max-width:850px;
  margin:0 auto 25px;
  padding:35px;
  background:white;
  border-radius:14px;
  box-shadow:0 8px 25px rgba(0,0,0,.05);
  transition:.3s;
}

.service-box:hover{
  transform:translateY(-5px);
}

/* PROCESS */
.why{
  padding:100px 10%;
  background:#ffffff;
  text-align:center;
}

.why ul{
  margin-top:25px;
  list-style:none;
}

.why li{
  margin-bottom:12px;
  font-size:15px;
  color:#444;
}

/* EXTERNAL SITE */
.external-site{
  padding:100px 10%;
  background:#eef2f7;
  text-align:center;
}

.external-site h2{
  margin-bottom:15px;
}

.external-site p{
  max-width:650px;
  margin:0 auto 25px;
  color:#555;
}

/* CTA TIGHTER */
.cta{
  padding:90px 10%;
}
.process-right svg{
  width: 100%;
  max-width: 500px;
  height: auto;
}

.process-right{
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-top-image{
  width:100%;
  height:500px;          /* 👈 yahan height control karo */
  overflow:hidden
}

.contact-top-image img{
 width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%; 
}

/* ============================= */
/* AMAZON FOCUS PAGE */
/* ============================= */
/* ============================= */
/* ELITE AMAZON HERO */
/* ============================= */

.amazon-hero-elite{
  padding:50px 6% 50px;
  background:linear-gradient(180deg,#ffffff,#f4f7fb);
  position:relative;
}

.hero-elite-wrap{
  display:flex;
  align-items:center;
  gap:80px;
  max-width:1400px;
  margin:auto;
}

.hero-elite-left{
  flex:1;
}

.hero-badge{
  display:inline-block;
  padding:8px 18px;
  background:#FF9900;
  color:#111;
  font-size:13px;
  border-radius:20px;
  margin-bottom:20px;
  font-weight:600;
}

.hero-elite-left h1{
  font-size:58px;
  line-height:1.05;
  margin-bottom:25px;
}

.hero-elite-left span{
  color:#FF9900;
}

.hero-elite-desc{
  font-size:18px;
  line-height:1.7;
  color:#555;
  margin-bottom:30px;
  max-width:650px;
}

.hero-elite-buttons{
  display:flex;
  gap:25px;
  align-items:center;
  margin-bottom:35px;
}

.text-link{
  text-decoration:none;
  font-weight:600;
  color:#111;
}

.text-link:hover{
  color:#19C2C9;
}

/* MINI PROOF */

.hero-mini-proof{
  display:flex;
  gap:40px;
  flex-wrap:wrap;
}

.hero-mini-proof div strong{
  display:block;
  font-size:16px;
}

.hero-mini-proof div span{
  font-size:13px;
  color:#666;
}

/* RIGHT SIDE */

.hero-elite-right{
  flex:1;
  position:relative;
}

.visual-card{
  background:white;
  padding:25px;
  border-radius:20px;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.visual-card img{
  width:1%;
  border-radius:12px;
}

/* FLOATING NOTES */

.floating-note{
  position:absolute;
  background:rgba(16,185,129,0.12);
  color:#065f46;
  padding:10px 18px;
  border-radius:14px;
  font-size:13px;
  font-weight:500;
  backdrop-filter:blur(8px);
  border:1px solid rgba(16,185,129,.3);
  box-shadow:0 8px 20px rgba(16,185,129,.2);
}

.note-1{
  top:40px;
  right:-20px;
}

.note-2{
  bottom:50px;
  left:-30px;
}
.floating-note:hover{
  transform:translateY(-3px);
  transition:all .3s ease;
}

/* RESPONSIVE */

@media(max-width:1000px){

.hero-elite-wrap{
  flex-direction:column;
  text-align:center;
}

.hero-elite-left h1{
  font-size:40px;
}

.hero-mini-proof{
  justify-content:center;
}

.floating-note{
  display:none;
}

}

/* FLOATING METRICS */

.hero-floating-metrics{
  display:flex;
  justify-content:center;
  gap:40px;
  margin-top:80px;
  flex-wrap:wrap;
}

.metric-box{
  background:white;
  padding:20px 35px;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  text-align:center;
}

.metric-box strong{
  display:block;
  font-size:22px;
}

.metric-box span{
  font-size:14px;
  color:#666;
}

/* RESPONSIVE */

@media(max-width:1000px){

.hero-pro-wrap{
  flex-direction:column;
  text-align:center;
}

.hero-pro-left h1{
  font-size:38px;
}

.mobile-overlay{
  position:static;
  margin-top:15px;
}

}

/* ================= AMAZON ABOUT ================= */

/* ================= AMAZON ABOUT ================= */

.amazon-about{
  padding:20px 8%;
  background:white;
}

.about-wrap{
  display:flex;
  align-items:center;
  gap:70px;
  max-width:1300px;
  margin:auto;
}

.about-image{
  flex:1;
}

.about-image img{
  width:100%;
  border-radius:18px;
  box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.about-content{
  flex:1;
}

.about-content h2{
  font-size:40px;
  margin-bottom:20px;
}

.about-content p{
  margin-bottom:15px;
  color:#555;
  line-height:1.7;
}

.about-content ul{
  margin-top:20px;
  line-height:2;
}

@media(max-width:1000px){
.about-wrap{
  flex-direction:column;
  text-align:center;
}
}

/* ================= PROBLEM SECTION ================= */

/* ================= PROBLEM SECTION (IMPROVED) ================= */

/* ================= SERVICES ================= */
.amazon-services-deep{
  padding:120px 10%;
  background:white;
}

.amazon-services-deep h2{
  text-align:center;
  margin-bottom:70px;
  font-size:38px;
}

.service-deep-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.deep-block{
  padding:40px;
  border:1px solid #eef1f6;
  border-radius:18px;
  transition:.3s;
}

.deep-block:hover{
  box-shadow:0 20px 40px rgba(0,0,0,.06);
  transform:translateY(-6px);
}

.deep-block h3{
  margin-bottom:15px;
}

@media(max-width:900px){
.service-deep-grid{
  grid-template-columns:1fr;
}
}

/* ================= RESPONSIVE ================= */

@media(max-width:1000px){

.problem-grid{
  grid-template-columns:repeat(2,1fr);
}

.service-deep{
  grid-template-columns:1fr;
}

}

@media(max-width:600px){

.amazon-hero h1{
  font-size:36px;
}

.problem-grid{
  grid-template-columns:1fr;
}

}

/* ================= PROBLEM SECTION FINAL ================= */



/* Top accent line */
.problem-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg,#19C2C9,#4f46e5);
  border-radius: 6px;
  transition: width .3s ease;
}

/* Hover */
.problem-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
}

.problem-card:hover::before {
  width: 90px;
}

/* TYPOGRAPHY */

.problem-card h3{
  font-size:20px;
  margin-bottom:15px;
}

.problem-card p{
  font-size:15px;
  color:#555;
  line-height:1.6;
}

.container-small{
  max-width:1300px;  /* 🔥 important */
  margin:0 auto;
  width:100%;
}

/* RESPONSIVE */

@media(max-width:1200px){
  .problem-grid {
    grid-template-columns: repeat(3,1fr);
  }
}



@media(max-width:480px){
  .problem-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== PROBLEM SECTION SAME STRUCTURE BOTH PAGES ===== */

/* ===== PROBLEM SECTION FINAL CLEAN ===== */
/* ===== UNIFIED PROBLEM SECTION (AMAZON + FLIPKART) ===== */

.amazon-problems{
    padding:5px 0;
  background:linear-gradient(180deg,#f8fafc,#eef2f7);
}

.amazon-problems h2{
  font-size:38px;
  text-align:center;
  margin-bottom:50px;
}

.problem-grid{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:25px;                     /* balanced spacing */
  max-width:1250px;             /* tighter container */
  margin:0 auto;
}

.problem-card{
  min-height:210px;             /* equal visual height */
  background:white;
  border-radius:22px;
  padding:35px 22px;
  text-align:center;
  display:flex;
  flex-direction:column;
  justify-content:center;
  box-shadow:0 15px 35px rgba(0,0,0,0.06);

  transition: 
    transform 0.35s cubic-bezier(.4,0,.2,1),
    box-shadow 0.35s cubic-bezier(.4,0,.2,1);
}
.problem-card{
  position:relative;   /* 🔥 important */
  overflow:hidden;     /* clean animation feel */
}

.problem-card::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 4px;
  background: linear-gradient(90deg,#19C2C9,#4f46e5);
  border-radius: 6px;

  transition: 
    width 0.35s cubic-bezier(.4,0,.2,1),
    opacity 0.3s ease;
}

.problem-card:hover::before{
  width: 110px;      /* smoother stretch */
  opacity: 0.95;
}
.problem-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 25px 55px rgba(0,0,0,0.10);
}
@media(max-width:1200px){
  .problem-grid{
    grid-template-columns:repeat(3,1fr);
  }
}

@media(max-width:768px){
  .problem-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:480px){
  .problem-grid{
    grid-template-columns:1fr;
  }
}


/* ===================================================
   AMAZON BRAND THEME (Scoped Safe)
=================================================== */

.amazon-page .amazon-hero-elite{
  background:linear-gradient(180deg,#ffffff,#fff6e6);
}

/* Badge */
.amazon-page .hero-badge{
  background:#ED8224;
  color:#111;
  font-weight:700;
  box-shadow:0 8px 20px rgba(255,153,0,.35);
}

/* Heading Accent */
.amazon-page .amazon-hero-elite h1 span{
  color:#FF9900;
}

/* CTA Button */
.amazon-page .btn{
  background:#FF9900;
  color:#111;
  font-weight:700;
  box-shadow:0 12px 25px rgba(255,153,0,.35);
  transition:.3s;
}

.amazon-page .btn:hover{
  background:#FF9900;
  transform:translateY(-3px);
}

/* Floating Notes */
.amazon-page .floating-note{
  border-left:4px solid #FF9900;
  box-shadow:0 10px 25px rgba(255,153,0,.15);
}

/* =========================================
   UNIVERSAL MOBILE SYSTEM
========================================= */

@media (max-width: 768px){

  /* Stop horizontal scrolling everywhere */
  html, body{
    overflow-x:hidden;
  }

  /* Reduce section spacing */
  section{
    padding:60px 20px !important;
  }

  /* Headings responsive */
  h1{
    font-size:32px !important;
    line-height:1.2 !important;
  }

  h2{
    font-size:26px !important;
  }

  h3{
    font-size:20px !important;
  }

  p{
    font-size:15px !important;
  }

  /* All flex layouts stack vertically */
  .hero-elite-wrap,
  .about-wrap,
  .proof-wrap,
  .process-section,
  .real-wrap,
  .split-wrap{
    flex-direction:column !important;
    text-align:center !important;
    gap:35px !important;
  }

  /* All grids become 1 column */
  .problem-grid,
  .service-grid,
  .service-deep-grid,
  .sf-grid,
  .case-grid,
  .focus-grid,
  .compare-grid,
  .process-grid,
  .inside-grid,
  .service-grid-ecom{
    grid-template-columns:1fr !important;
  }

  /* Buttons full width */
  .btn,
  .impact-btn,
  .proof-btn,
  .btn-cta{
    width:100%;
    text-align:center;
  }

  /* Hide floating decorative elements */
  .floating-note,
  .note-1,
  .note-2{
    display:none !important;
  }

  /* Images scale properly */
  img{
    max-width:100%;
    height:auto;
  }

  /* Hero image fix */
  .visual-card img{
    width:100% !important;
  }

  /* Reduce giant paddings */
  .amazon-hero-elite,
  .ultra-hero,
  .impact-section{
    padding:70px 20px !important;
  }

}



/* =========================================
   HOME PAGE MOBILE FIX
   (Only for index.html)
========================================= */

@media(max-width:768px){

  body.home{
    overflow-x:hidden;
  }

  /* IMPACT HERO */
  body.home .impact-section{
    padding:70px 20px !important;
  }

  body.home .impact-section h1{
    font-size:32px !important;
    line-height:1.2;
  }

  body.home .sub{
    font-size:16px;
  }

  body.home .impact-points{
    flex-direction:column;
    gap:15px;
  }

  body.home .impact-btn{
    width:100%;
    padding:16px;
    font-size:16px;
  }

  /* PROCESS SECTION */
  body.home .process-section{
    flex-direction:column !important;
    gap:40px;
    padding:60px 20px !important;
  }

  body.home .process-left h2{
    font-size:26px;
  }

  body.home .step{
    padding:15px;
  }

  /* PROOF SECTION */
  body.home .proof-wrap{
    flex-direction:column !important;
    text-align:center;
    gap:40px;
  }

  body.home .proof-left h2{
    font-size:28px;
  }

  body.home .proof-btn{
    width:100%;
  }

  body.home .proof-right{
    grid-template-columns:1fr !important;
    gap:20px;
  }

  /* SMART FEATURES */
  body.home .sf-grid{
    grid-template-columns:1fr !important;
  }

  body.home .sf-card{
    padding:20px;
  }

  /* SPLIT SECTIONS */
  body.home .split-wrap{
    flex-direction:column !important;
    text-align:center;
    gap:40px;
  }

  body.home .split-text h2{
    font-size:26px;
  }

  body.home .split-btn{
    width:100%;
  }

  body.home .split-img img{
    height:auto !important;
  }

  /* CASE STUDIES */
  body.home .case-grid{
    grid-template-columns:1fr !important;
  }

  body.home .case-card{
    padding:20px;
  }

  /* TESTIMONIALS */
  body.home .testimonial{
    padding:25px 20px;
    font-size:15px;
  }

  /* LOGO SLIDER FIX */
  body.home .logo-track{
    gap:40px;
  }

  body.home .logo-track img{
    height:50px;
  }

  /* CTA CLEAN */
  body.home .cta-clean{
    padding:60px 20px !important;
  }

  body.home .btn-cta{
    width:100%;
  }

  /* FLOATING CTA */
  body.home .floating-cta{
    font-size:14px;
    padding:10px;
  }

}

/* FIX HERO CUTTING UNDER HEADER */

/* DESKTOP */
.menu-toggle{
  display:none;
}

/* MOBILE */
@media(max-width:768px){

/* =========================
   DESKTOP NAV
========================= */

/* =========================
   DESKTOP NAV
========================= */

.main-nav{
  display:flex;
  gap:30px;
  align-items:center;
}

.menu-toggle{
  display:none;
}

/* =========================
   MOBILE NAV
========================= */

@media(max-width:900px){

  .menu-toggle{
    display:block;
    color:white;
    font-size:28px;
    cursor:pointer;
  }

  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:#3E1E5E;
    flex-direction:column;
    align-items:center;
    display:none !important;
  }

  .main-nav.active{
    display:flex !important;
  }


}
}


