:root {
  --bg-top: #f9fcff;
  --bg-bottom: #e6f0ff;
  --text-dark: #0b0b0c;
  --accent-blue: #008cff;
  --accent-orange: #ff6a1a;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  color: var(--text-dark);
  background: radial-gradient(60rem 30rem at 85% 10%, var(--bg-bottom) 0%, transparent 60%),
              linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

/* Navbar */
.navbar { background: transparent !important; }
.nav-link {
  color: var(--text-dark);
  font-weight: 500;
  margin: 0 12px;
}
.nav-link:hover { color: var(--accent-blue); }
.logo-square {
  width: 26px; height: 26px; border-radius: 4px;
  background: var(--accent-blue);
  display: inline-block;
}
@media (min-width: 992px) {
  .center-nav {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
  }
}








/* Navbar logo */
.navbar-logo {
  height: 90px;              /* base height */
  width: auto;               /* maintain aspect ratio */
  object-fit: contain;
  transition: transform 0.3s ease;
}

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

/* Adjust on smaller screens */
@media (max-width: 992px) {
  .navbar-logo {
    height: 36px;
  }
}

@media (max-width: 576px) {
  .navbar-logo {
    height: 32px;
  }
}

.nav-link.active {
  border-bottom: 3px solid #ff6a1a;
  color: #007bff;
  font-weight: 600;
}









/* ===== Desktop (>=992px): hover + smooth reveal, full width ===== */
@media (min-width: 992px){
  .mega-dropdown { position: static; }

  .mega-dropdown .dropdown-menu{
    position: absolute;
    top: 100%;
    left: 50%;
    width: 100vw;
    padding: 0;                 /* inner padding container-xxl se aayega */
    padding-top: 12px;          /* ⬅ gap ko padding se solve kiya */
    border: none;
    border-radius: 0 0 16px 16px;
    background: #fdfdff;
    box-shadow: 0 12px 32px rgba(16,52,120,.15);
    z-index: 1000;

    display: block;             /* BS override */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(16px);
    transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
  }

  /* invisible hover bridge so cursor drop pe band na ho */
  .mega-dropdown .dropdown-menu::before{
    content:"";
    position:absolute;
    left:0; right:0; top:-12px; height:12px;
  }

  .mega-dropdown:hover .dropdown-menu,
  .mega-dropdown .dropdown-menu:hover{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity .28s ease, transform .28s ease;
  }
}


/* mobile: click to open (accordion style) */
@media (max-width: 991.98px){
  .mega-dropdown .dropdown-menu{
    position: static;
    width: 100%;
    left: auto;
    display: block;           /* << FIX: Bootstrap ke display:none ko override */
    transform: none;
    max-height: 0;            /* start closed */
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s ease, opacity .3s ease;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0;
    pointer-events: none;
  }
  .mega-dropdown.is-open .dropdown-menu{
    max-height: 1200px;       /* enough height */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mega-dropdown .container-xxl{ padding:16px; }
  .mega-dropdown .row{ gap:12px; }
  .mega-dropdown .col-md-6{ width:100%; }
}


/* ================================================================================================================= */

/* Service cards */
.svc-box{
  background:#fff;
  border:1px solid #e6edff;
  border-radius:12px;
  padding:18px 20px;
  box-shadow:0 6px 18px rgba(16,52,120,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}
.svc-box:hover{ 
  transform:translateY(-4px); box-shadow:0 12px 28px rgba(16,52,120,.16); 

}

.svc-box-title{
  font-weight:700;
  margin-bottom:12px;
  color:var(--text-dark);
  font-size:16px;
  border-bottom:2px solid var(--accent-blue);
  display:inline-block;
  padding-bottom:4px;
}

.svc-list{ list-style:none; padding:0; margin:0; }
.svc-list li{ margin-bottom:8px; }
.svc-list a{ text-decoration:none; font-size:15px; color:#516073; transition:color .2s ease; }
.svc-list a:hover{ color:var(--accent-blue); font-weight:600; }



/* Buttons */
.btn-orange {
  background: var(--accent-orange);
  color: #fff;
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: .5rem;
  transition: all .2s ease;
}
.btn-orange:hover {
  background: #ff853a;
  box-shadow: 0 8px 20px rgba(255,106,26,.4);
}
.btn-outline-blue {
  border: 1.6px solid var(--accent-blue);
  color: var(--accent-blue);
  font-weight: 600;
  padding: .7rem 1.4rem;
  border-radius: .5rem;
  transition: all .2s ease;
}
.btn-outline-blue:hover {
  background: var(--accent-blue);
  color: #fff;
}

/* Hero */
.hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  padding-block: clamp(36px, 8vh, 88px);
}
.hero h1 {
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 550;
  margin-bottom: 16px;
}
.hero .highlight {
  color: var(--accent-blue);
}
.hero .lead {
  color: #333;
  font-size: clamp(16px, 1.1vw, 20px);
  margin-bottom: 26px;
}
.hero-note {
  color: #555;
}
/* make the hero image truly fluid */
.hero-img{
  width: 100%;
  height: auto;
  max-width: 650px;      /* caps size on desktop */
  display: inline-block; /* avoids weird inline gaps */
}

/* mobile/tablet tweaks */
@media (max-width: 991.98px){
  .hero { min-height: unset; padding-block: 56px 32px; }
  .hero-img { max-width: 440px; }
}

@media (max-width: 575.98px){
  .hero-img { max-width: 90vw; }  /* fill most of the screen, but not edge-to-edge */
}

/* ============================================================================================================= */

/* ===================== 
        BENEFITS
 ===================== */

.section-soft{
  /* keep the same hero/brand background */
  /* background:
    radial-gradient(60rem 30rem at 85% 10%, #e6f0ff 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-top), var(--bg-bottom)); */

    background-color: white;
}

.benefits{
  padding-block: clamp(40px, 9vh, 110px);
}
.benefits-title{
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--text-dark);
  margin-bottom: .25rem;
}
.benefits-title .accent{ color: var(--accent-blue); }
.benefits-sub{
  max-width: 860px;
  margin: 0 auto 1.25rem;
  color:#516073;
}

/* card */
.benefit-card{
  position: relative;
  height: 350px;
  background:#fff;
  border-radius: 12px; /* kam rounded, square look */
  border:1px solid #e8efff;
  padding: 20px;
  aspect-ratio: 1 / 1;   /* square ratio */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  box-shadow:
    0 14px 28px rgba(28,39,79,.08),
    0 4px 10px rgba(28,39,79,.06);
  transition: transform .25s ease, box-shadow .25s ease;
  overflow: hidden;
}

/* subtle gradient edge glow */
.benefit-border{
  position:absolute; inset:0; border-radius:12px;
  padding:1px;
  background: linear-gradient(120deg,#bcd3ff, #7b7ff6 40%, #bcd3ff 80%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.45; pointer-events:none; transition:opacity .25s ease;
}

/* icon badge */
.benefit-head{ display:flex; justify-content:center; margin-bottom:1rem; }
.icon-badge{
  width:52px; height:52px; border-radius:14px;
  display:grid; place-items:center;
  color:#fff;
  background: linear-gradient(135deg,#1997ff, #7bb6ff);
  box-shadow: 0 16px 34px rgba(25,151,255,.25);
  position: relative;
}
.icon-badge::after{
  content:""; position:absolute; inset:-10px; border-radius:18px;
  background: radial-gradient(26px 26px at 50% 50%, rgba(25,151,255,.16), transparent 60%);
  z-index:-1;
}

/* text */
.benefit-title{
  font-weight:700; color:#0f1728; margin:0 0 .5rem;
}
.benefit-text{
  color:#516073; margin:0;
  line-height:1.55;
}

/* hover polish */
.benefit-card:hover{
  transform: translateY(-6px);
  box-shadow:
    0 26px 48px rgba(28,39,79,.12),
    0 10px 18px rgba(28,39,79,.08);
}
.benefit-card:hover .benefit-border{ opacity:.9; }

/* tighter spacing on small screens */
@media (max-width: 575.98px){
  .benefit-card{
    padding:18px;
    aspect-ratio: auto; /* small screen pe normal ho jaye */
  }
}



/* ===================== 
        BENEFITS END
 ===================== */

/* ============================================================================================================= */

 /* ============ 
 Section 3: Core Services Highlights
 ============ */

/* ============ 
 Section 3: Core Services Highlights
 ============ */

.core-section{ padding-block: clamp(44px, 9vh, 110px); }

.core-title{
  font-weight:800; letter-spacing:-.2px; color:#0b0b0c;
}
.core-title .nowrap{ white-space:nowrap; }
.core-sub{
  max-width:880px; margin:10px auto 0; color:#516073;
}

/* left visual cluster */
.metric-cluster{
  position:relative; width:min(520px, 92%); margin:0 auto;
  aspect-ratio: 1 / 1;  /* keeps the circles layout balanced */
  background:
    radial-gradient(38% 38% at 50% 40%, rgba(0,140,255,.05), transparent 60%);
  border-radius:28px;
}

/* floating icons */
.float-icon{
  --size:58px;
  position:absolute; width:var(--size); height:var(--size);
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,#1696ff,#7db7ff);
  border-radius:16px;
  box-shadow:0 16px 30px rgba(22,150,255,.25);
  transform: translate(-50%,-50%);
}
.fi-call  { left:18%; top:55%; }
.fi-chat  { left:48%; top:30%; }
.fi-bot   { left:48%; top:64%; }
.fi-globe { left:32%; top:85%; }
.float-icon::before{
  content:""; width:22px; height:22px; display:block; mask-size:contain; mask-repeat:no-repeat; background:#fff;
}
.fi-call::before  { mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V21a1 1 0 01-1 1C10.07 22 2 13.93 2 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z"/></svg>'); }
.fi-chat::before  { mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M20 2H4a2 2 0 00-2 2v14l4-4h14a2 2 0 002-2V4a2 2 0 00-2-2z"/></svg>'); }
.fi-bot::before   { mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a1 1 0 011 1v1h2a2 2 0 012 2v1h3a1 1 0 010 2h-1v7a3 3 0 01-3 3H8a3 3 0 01-3-3V9H4a1 1 0 110-2h3V6a2 2 0 012-2h2V3a1 1 0 011-1zm-4 9a1 1 0 100 2 1 1 0 000-2zm8 0a1 1 0 100 2 1 1 0 000-2z"/></svg>'); }
.fi-globe::before { mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 2c1.86 0 3.58.63 4.95 1.69C15.84 7.31 14.02 8 12 8s-3.84-.69-4.95-2.31A7.96 7.96 0 0112 4zm0 16a7.96 7.96 0 01-4.95-1.69C8.16 16.69 9.98 16 12 16s3.84.69 4.95 2.31A7.96 7.96 0 0112 20z"/></svg>'); }

/* metric card */
.metric-card{
  position:absolute; left:50%; top:55%; transform:translate(-50%,-50%);
  width:230px; background:#fff; border-radius:18px;
  border:1px solid #e7eefc;
  box-shadow:0 18px 36px rgba(16,52,120,.12);
  padding:14px 14px 12px;
}
.metric-head{ display:flex; justify-content:space-between; gap:8px; margin-bottom:10px; }
.metric-head .line { flex:1; height:10px; background:linear-gradient(90deg,#eaf2ff,#cfe2ff); border-radius:6px; }
.metric-head .spark{ width:58px; height:38px; background: radial-gradient(60% 60%, #e8f1ff, #d7e7ff 60%); border-radius:10px; }

.metric-body{ display:flex; justify-content:space-between; gap:8px; }
.metric .label{ font-size:.78rem; color:#6a7a94; }
.metric .value{ display:block; font-weight:800; font-size:1.35rem; color:#0f1728; }

.metric-foot{ margin-top:10px; }
.metric-foot .bar{ height:10px; background:linear-gradient(90deg,#dfeaff,#b5d0ff); border-radius:6px; }

/* right feature list card (updated: white box removed) */
.card-soft{
  background: transparent;   /* no white background */
  border: 0;                 /* no border */
  box-shadow: none;          /* no shadow */
  padding:22px;              /* keep padding */
  position: relative;
  z-index: 2;                /* keep it above the left visual */
}

.feature-list{ display:grid; gap:14px; }

/* 🔹 UPDATED: icon left of heading, description below */
.feature-item{
  display:flex; 
  flex-direction:column;      /* stack heading row + paragraph */
  align-items:flex-start;
  gap:6px;
  padding:13px;
  margin-left: 30px;
  border-radius:14px;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease;
}
/* .feature-item:hover{
  background:linear-gradient(180deg,#f7fbff, #eef6ff);
  transform: translateY(-2px);
  box-shadow:0 10px 18px rgba(16,52,120,.08);
} */

/* heading row with icon + title */
.feature-head{
  display:flex;
  align-items:center;
  gap:10px;                  /* space between icon and title */
}

.badge-round{
  width:34px; height:34px; border-radius:8px;
  display:grid; place-items:center; color:#fff;
}
.badge-bolt{     background:linear-gradient(135deg,#ffb169,#ff8a3d); }
.badge-coverage{ background:linear-gradient(135deg,#3bc1ff,#1696ff); }
.badge-insight{  background:linear-gradient(135deg,#7b7ff6,#b293ff); }

.feature-title{ margin:0; font-weight:700; color:#0f1728; }
.feature-text{ margin:0; color:#516073; }

/* responsive */
@media (max-width: 991.98px){
  .metric-cluster{ aspect-ratio:auto; height:360px; }
  .metric-card{ left:50%; top:58%; }
}
@media (max-width: 575.98px){
  .metric-cluster{ height:300px; }
  .metric-card{ width:210px; }
}




 /* ============ 
 Section 3: Core Services Highlights
 
 ============ */

/* ============================================================================================================= */


 /*  ===============
  Challaneges start
===================  */ 

.tv-chal{
  padding: clamp(56px,8vw,96px) 20px;
background-color: white;
}

.tv-chal__grid{
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px,4vw,48px);
  align-items: center;
}

/* LEFT visual */
.tv-chal__visual{
  margin: 0;
}
.tv-chal__visual img{

    background: none !important;
  box-shadow: none !important;
  width: 100%;
  height: auto;
  display: block;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,.06);
  /* keep shape pleasant even with large images */
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* RIGHT content */
.tv-chal__content h2{
  color: var(--text-dark);
  margin: 0 0 12px;
  letter-spacing: .2px;
  font: 800 clamp(26px,3.3vw,42px)/1.2 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.tv-chal__lead{
  margin: 0 0 18px;
  color: #4a5562;
  font: 400 clamp(15px,1.5vw,18px)/1.7 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* key points grid like the mockup */
.tv-chal__points{
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
}

.tv-chal__point{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  align-items: start;
}

.tv-chal__point h3{
  margin: 0 0 4px;
  color: var(--text-dark);
  font: 800 20px/1.3 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
.tv-chal__point p{
  margin: 0;
  color: #5a6673;
  font: 400 15px/1.7 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* bullets */
.dot{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; transform: translateY(6px); }
.dot--blue{ background: var(--accent-blue); }
.dot--aqua{ background: #0cc7c1; } /* close to the mockup's aqua; define in root if needed */

/* closing note */
.tv-chal__note{
  margin: 18px 0 0;
  color: #4a5562;
  font: 400 15px/1.7 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Responsive */
@media (max-width: 1024px){
  .tv-chal__grid{ gap: 28px; }
}
@media (max-width: 960px){
  .tv-chal__grid{ grid-template-columns: 1fr; }
  .tv-chal__visual{ order: 2; }
  .tv-chal__content{ order: 1; }
}
@media (max-width: 560px){
  .tv-chal__points{ grid-template-columns: 1fr; gap: 14px; }
  .tv-chal__point h3{ font-size: 18px; }
  .tv-chal__point p{ font-size: 14px; }
}



 /* Challenge bullets (unified)  */
:root{
  --dash-w: 28px;           /* width of the dash */
  --dash-h: 8px;            /* height of the dash */
  --dash-color: var(--accent-blue, #0052CC); /* fallback to primary blue */
}

.dot{
  display: inline-block;
  width: var(--dash-w);
  height: var(--dash-h);
  background: var(--dash-color);
  border-radius: 999px;     /* perfect pill */
  flex: 0 0 var(--dash-w);  /* consistent width inside flex rows */
  margin-top: 6px;          /* aligns with the heading baseline */
}

.dot--blue{ background: var(--dash-color); }
.dot--aqua{ background: var(--dash-color); } /* keep same color for now */


 /*  ===============
  Challaneges End
===================  /* 

/* ============================================================================================================= */
.approach-section {
  padding: clamp(60px, 10vh, 120px) 0;
  background: #f9fcff;
}

.approach-header {
  max-width: 800px;
  margin: 0 auto 50px;
}

.approach-title {
  font-weight: 800;
  color: #0b0b0c;
  margin-bottom: 12px;
}

.approach-sub {
  color: #516073;
  font-size: 1.05rem;
}

.approach-left-title {
  font-weight: 700;
  font-size: 1.8rem;
  margin-bottom: 18px;
  color: #0b0b0c;
}

.approach-left-text {
  color: #516073;
  font-size: 1rem;
  line-height: 1.6;
}

.approach-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-left: 2px solid #e0ecff;
  padding-left: 24px;
}

.approach-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.approach-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3bc1ff, #1696ff);
  display: grid;
  place-items: center;
  color: #fff;
  flex-shrink: 0;
}

.approach-item-title {
  margin: 0;
  font-weight: 700;
  color: #0f1728;
  font-size: 1.2rem;
}

.approach-item-text {
  margin: 4px 0 0;
  color: #516073;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 991.98px) {
  .approach-list {
    border-left: none;
    padding-left: 0;
  }
  .approach-item {
    align-items: center;
  }
}


/* ============================================================================================================= */
/* ========================================SERVICE START===================================================== */

/* Section */
.svc-section{
  padding: clamp(48px, 8vw, 96px) 20px;
  background: linear-gradient(180deg, var(--bg-top, #f9fcff), var(--bg-bottom, #e6f0ff));
}

.svc-head{ text-align:center; margin-bottom: clamp(20px, 4vw, 36px); }
.svc-title{
  margin:0; color: var(--text-dark, #0b0b0c);
  font: 900 clamp(24px, 3.2vw, 40px)/1.2 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Slider shell */
.svc-slider{
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
}

.svc-viewport{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.svc-viewport::-webkit-scrollbar{ display:none; }

.svc-track{
  display: flex;
  gap: 20px;
  padding: 6px 8px 12px;
}

/* Card */
.svc-card{
  scroll-snap-align: start;
  flex: 0 0 calc(33.333% - 13.4px); /* 3 per view desktop */
  background:#fff;
  border-radius: 18px;
  border:1px solid #e7eefc;
  box-shadow: 0 18px 36px rgba(16,52,120,.12);
  padding: 18px;
  display:flex; flex-direction:column; gap:14px;
}

.svc-badge{
  align-self:flex-start;
  font: 600 12px/1 Inter, system-ui;
  padding:8px 12px; border-radius: 10px;
  color:#fff;
}
.svc-badge--core{ background: var(--accent-blue, #008cff); }
.svc-badge--ai  { background: #17c6cc; }

.svc-card-head{ display:flex; align-items:center; gap:10px; }
.svc-card-title{
  margin:0; color:#0f1728; font: 800 20px/1.2 Inter, system-ui;
}

.svc-icon{
  width:46px; height:46px; border-radius: 50%;
  display:grid; place-items:center; color:#fff;
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}
.svc-icon--blue{ background: linear-gradient(135deg,#3bc1ff,#1696ff); }
.svc-icon--gold{ background: linear-gradient(135deg,#ffd79a,#ff9f58); }

.svc-list{
  list-style:none; margin:0; padding:0; display:grid; gap:8px; color:#344355;
}
.svc-list li{
  position:relative; padding-left:18px; font:400 15px/1.6 Inter, system-ui;
}
.svc-list li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:8px; height:8px; border-radius:50%; background:#19c2c7;
}

.svc-highlight{ background:#f7fafc; border-radius:12px; padding:12px; }
.svc-chip{
  display:inline-flex; align-items:center; gap:8px;
  font:600 14px/1.3 Inter, system-ui; color:#344355;
}

.svc-btn{
  margin-top:auto; align-self:flex-start;
  display:inline-block; text-decoration:none; color:#fff;
  background: linear-gradient(135deg,#1696ff,#0078eb);
  padding:12px 18px; border-radius: 999px; font: 700 14px/1 Inter, system-ui;
  box-shadow: 0 12px 26px rgba(0,120,235,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
}
.svc-btn:hover{ transform: translateY(-2px); box-shadow: 0 16px 32px rgba(0,120,235,.32); }

/* current desktop/tablet arrows (keep as-is, you already have something like this) */
.svc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 10;
}
.svc-arrow.left  { left: -60px; }
.svc-arrow.right { right: -60px; }

/* 👇 mobile fix: arrows go below the cards, not overlapping */
@media (max-width: 640px){
  .svc-slider{ padding-bottom: 72px; }   /* space for arrows + dots */
  .svc-arrow{
    top: auto;
    bottom: 36px;        /* sit above the dots */
    transform: none;     /* no vertical translate */
    width: 40px;
    height: 40px;
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
  }
  .svc-arrow.left  { left: 12px; }
  .svc-arrow.right { right: 12px; }
}
@media (max-width: 640px){
  .svc-viewport{ padding: 0 4px; } /* thoda inner padding */
}

/* Dots */
.svc-dots{ display:flex; justify-content:center; gap:8px; margin-top: 12px; }
.svc-dots button{
  width:8px; height:8px; border-radius:50%; border:0; background:#cfe0ff; cursor:pointer;
}
.svc-dots button[aria-current="true"]{ background: var(--accent-blue,#008cff); }

/* Responsive */
@media (max-width: 1024px){
  .svc-card{ flex-basis: calc(50% - 10px); } /* 2 per view */
}
@media (max-width: 640px){
  .svc-card{ flex-basis: 100%; } /* 1 per view */
  .svc-arrow.left  { left: 4px; }
  .svc-arrow.right { right: 4px; }
}










/* =======================================SERVICE END===================================================== */
/* ===================== FAQ SECTION ===================== */
.faq-dark{
  --faq-grad-1: #1696ff;
  --faq-grad-2: #233352;
  --faq-card: #ffffff;
  --faq-ink: #0b0b0c;
  --faq-muted: #5b6a7d;
  --faq-blue: #008cff;

  padding: clamp(56px, 9vh, 110px) 20px;
  background: radial-gradient(1200px 600px at 50% -100px, rgba(255,255,255,.06) 0%, transparent 60%),
              linear-gradient(180deg, var(--faq-grad-1), var(--faq-grad-2));
}

.faq-wrap{ max-width: 1120px; margin: 0 auto; }

.faq-head{
  text-align:center; color:#eaf1ff; margin-bottom: clamp(26px, 4vw, 40px);
}
.faq-head h2{
  margin:0 0 8px; font: 900 clamp(26px,3.2vw,40px)/1.2 Inter, system-ui, sans-serif;
  color:#f5f8ff;
}
.faq-head p{ margin:0; color:#b9c6e0; font: 400 16px/1.7 Inter, system-ui; }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 26px;
  align-items: start; /* 👈 ye line add karo */
}

.faq-item {
  background: var(--faq-card);
  border-radius: 18px;
  border: 1px solid #e8eefb;
  box-shadow: 0 16px 40px rgba(9, 16, 40, .25);
  transition: transform .14s ease, box-shadow .14s ease;
  align-self: start; /* 👈 ye line add karo */
}

.faq-panel[hidden] {
  display: none !important; /* 👈 ye bhi important hai */
}
.faq-item:hover{
  transform:translateY(-3px);
  box-shadow:0 20px 44px rgba(9, 16, 40, .32);
}

.faq-toggle {
  all: unset;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 16px 18px;   /* padding thoda kam kar diya */
  font: 600 17px/1.4 Inter, system-ui;
  color: var(--faq-ink);
  width: 100%;
  box-sizing: border-box; /* icon overflow fix */
}

.faq-toggle .ico {
  flex-shrink: 0;           /* icon ko shrink hone se roka */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--faq-blue);
  display: grid;
  place-items: center;
  position: relative;
  margin-left: 12px;        /* text se gap */
}


.faq-toggle .ico::before,
.faq-toggle .ico::after{
  content:""; position:absolute; background:#fff;
  transition:.2s ease;
}
.faq-toggle .ico::before{
  width:12px; height:2px;
}
.faq-toggle .ico::after{
  width:2px; height:12px;
}
.faq-toggle[aria-expanded="true"] .ico::after{ transform:scaleY(0); }

.faq-panel{
  padding:0 22px 18px;
  color:var(--faq-muted);
  font:400 15px/1.6 Inter, system-ui;
}

.faq-cta{
  text-align:center; margin-top:48px;
}
.faq-cta h3{
  margin:0 0 14px; font:700 20px/1.4 Inter, system-ui; color:#fff;
}
.btn-cta{
  display:inline-block;
  padding:14px 32px;
  border-radius:28px;
  font-weight:600;
  font-size:16px;
  background:linear-gradient(135deg,#1696ff,#0073e6);
  color:#fff; text-decoration:none;
  transition:background .25s ease, transform .2s ease;
}
.btn-cta:hover{ background:linear-gradient(135deg,#1ba0ff,#008cff); transform:translateY(-2px); }

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

/* =========================================Growth==================================================== */



.audit-section {
  padding: 100px 0;
  background: #fff;  /* background white */
}

.audit-left h1 {
  font-size: 2.7rem;
  font-weight: 800;
  color: #0b0b0c;
  line-height: 1.3;
}

.audit-left p {
  margin: 24px 0;
  color: #516073;
  font-size: 1.1rem;
  max-width: 440px;   /* width kam */
}

.btn-group {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 28px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  border-radius: 0 !important;  /* 👈 forcefully remove rounding */
}

.btn-orange {
  background: #ff6a1a;
  color: #fff;
  border: 2px solid #ff6a1a;
}

.btn-orange:hover {
  background: #e85c12;
  border-color: #e85c12;
}

.btn-outline {
  border: 2px solid #007bff;
  color: #007bff;
  background: transparent;
  border-radius: 0 !important;  /* 👈 outline button pe bhi force */
}

.btn-outline:hover {
  background: #007bff;
  color: #fff;
}

.btn.full {
  display: block;
  text-align: center;
  margin-top: 20px;
}

/* Right side card */
.testimonial-card {
  background: linear-gradient(135deg, #f9faff, #f3f6ff);
  border-radius: 20px;
  padding: 50px 28px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.08);
  max-width: 420px;   /* width kam */
  margin: auto;
  height: 100%;       /* height barao */
}

.profile-pic {
  margin-top: -70px;
  margin-bottom: 18px;
}

.profile-pic img {
  width: 310px;
  height: 310px;
  border-radius: 50%;
  border: 5px solid #fff;
  object-fit: cover;
}

.quote-box p {
  font-size: 1rem;
  font-style: italic;
  margin-bottom: 28px;
  color: #0b0b0c;
  line-height: 1.6;
}

.stats-box {
  display: flex;
  justify-content: space-around;
  margin-bottom: 28px;
}

.stat h3 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  color: #0b0b0c;
}

.stat span {
  font-size: 0.95rem;
  color: #516073;
}

@media (max-width: 768px) {
  .audit-left {
    text-align: center;
    margin-bottom: 50px;
  }
  .audit-left p {
    margin: 16px auto;
  }
  .btn-group {
    justify-content: center;
  }
  .testimonial-card {
    max-width: 100%;
  }
}







/* ============================================================================================================= */

 /* 
    Footer
 
 */
 .footer {
  background: linear-gradient(135deg, #0f172a, #1e3a8a);
  color: #f5f7fa;
  padding: 60px 0 30px;
  position: relative;
  margin-top: 60px;

}

.footer-logo {
  font-weight: 800;
  font-size: 1.6rem;
  color: #fff;
  margin-bottom: 10px;
}

.footer-tagline {
  color: #cbd5e1;
  font-size: 0.95rem;
  max-width: 260px;
}

.footer-title {
  font-size: 1.1rem;
  margin-bottom: 14px;
  font-weight: 600;
  color: #fff;
}

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

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

.footer-links a {
  color: #cbd5e1;
  text-decoration: none;
  transition: color 0.25s ease;
}

.footer-links a:hover {
  color: #38bdf8;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  margin-right: 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1.2rem;
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: #38bdf8;
  color: #0f172a;
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 30px;
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: #cbd5e1;
}

.footer-bottom a {
  color: #cbd5e1;
  text-decoration: none;
  margin-left: 10px;
  transition: color 0.25s ease;
}

.footer-bottom a:hover {
  color: #38bdf8;
}










.footer-socials {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.footer-socials a {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: 0.3s ease;
}

.footer-socials a i {
  color: white;
  font-size: 18px;
}

.footer-socials a:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}




















@media (max-width: 768px) {
  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }
}
/* ==========================
FOOTER EMD
================== */



/* ===== Final CTA band (just above footer) ===== */
.section-contrast{
  background:
    radial-gradient(60rem 30rem at 85% 10%, #e6f0ff 0%, transparent 60%),
    linear-gradient(180deg, #f7fbff, #eef6ff);
}

.cta-band{ padding-block: clamp(46px, 9vh, 110px); }

.cta-title{
  font-weight:800; letter-spacing:-.2px; color:#0b0b0c;
  margin-bottom:.35rem;
}
.cta-sub{ color:#516073; max-width:720px; }

.cta-bullets{ margin:14px 0 0; padding-left:0; list-style:none; }
.cta-bullets li{
  position:relative; padding-left:28px; margin:.35rem 0; color:#334155;
}
.cta-bullets li::before{
  content:""; position:absolute; left:0; top:.45rem; width:16px; height:16px;
  border-radius:6px; background:linear-gradient(135deg,#3bc1ff,#1696ff);
  box-shadow:0 10px 18px rgba(22,150,255,.18);
  mask: none;
}

/* trust metrics row */
.cta-metrics{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:18px;
}
.cta-metrics .metric{
  background:#fff; border:1px solid #e7eefc; border-radius:14px;
  padding:10px 14px; min-width:110px;
  box-shadow:0 12px 24px rgba(16,52,120,.08);
}
.cta-metrics .num{
  font-weight:800; font-size:1.4rem; color:#0f1728; line-height:1;
}
.cta-metrics .num .unit{ font-weight:700; font-size:.95rem; margin-left:2px; }
.cta-metrics .label{ display:block; font-size:.8rem; color:#64748b; }

/* right visual – stat tiles card */
.cta-card{
  background:#fff; border:1px solid #e7eefc; border-radius:18px;
  padding:18px; width:min(420px, 100%);
  margin-inline:auto;
  box-shadow:0 22px 44px rgba(16,52,120,.12);
}
.mini-tile{
  background:linear-gradient(180deg,#f9fbff,#f1f7ff);
  border:1px solid #e6efff; border-radius:14px; padding:14px 10px; text-align:center;
}
.mini-tile .kpi{ font-weight:800; color:#0f1728; font-size:1.25rem; line-height:1; }
.mini-tile .kcap{ font-size:.8rem; color:#62748a; }

.logo-strip{
  display:flex; align-items:center; gap:22px; margin-top:28px; flex-wrap:wrap;
  color:#6b7c93;
}
.logo-strip img{ height:26px; opacity:.9; filter:grayscale(1); }

/* buttons match theme (already present in your CSS) */
/* .btn-accent, .btn-outline-accent { ... } */

@media (max-width: 991.98px){
  .cta-card{ margin-top:10px; }
}