: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%);
  }
}

/* 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: 85%;
  height: auto;
  max-width: 650px;      /* caps size on desktop */
  display: inline-block; /* avoids weird inline gaps */
}


.hero-right {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-right::before {
  content: "";
  position: absolute;
  width: 120%;
  height: 120%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,140,255,0.25), transparent 70%);
  filter: blur(40px);
  z-index: 0;
}

.hero-right img {
  position: relative;
  z-index: 1;
}


/* 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 */
}




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

/* ===== Services Core Section ===== */
.svc-core{
  padding: clamp(56px, 9vh, 96px) 20px;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}

.svc-core .container{ max-width: 1180px; margin: 0 auto; }

.svc-headline{
  text-align: center;
  margin: 0 0 6px;
  font: 800 clamp(28px, 4vw, 44px)/1.1 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  text-transform: uppercase;              /* SERVICES (capital) */
  color: var(--text-dark);
  letter-spacing: .5px;
}

.svc-subheadline{
  text-align: center;
  margin: 0 auto 26px;        /* center + spacing */
  color: #516073;
  max-width: 820px;
}

/* "Core Services" with underline (centered) */
.svc-kicker{
  position: relative;
  display: inline-block;
  margin: 18px auto 26px;     /* auto margin center karega */
  font: 700 20px/1 'Poppins', system-ui;
  color: var(--text-dark);
  padding-bottom: 8px;
  text-align: center;         /* text bhi center ho jaye */
}
.svc-kicker::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom:0;
  width: 140px; height: 3px;
  background: linear-gradient(90deg, var(--accent-blue), rgba(0,140,255,.2));
  border-radius: 2px;
}

/* Grid */
.svc-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;                  /* a little more breathing room */
}

/* Card */
.svc-card{
  background: #fff;
  border: 1px solid #e6edff;
  border-radius: 14px;                              /* slight radius */
  padding: 22px 20px 18px;                          /* bigger card */
  min-height: 300px;                                /* taller cards */
  box-shadow: 0 14px 32px rgba(16,52,120,.08);      /* soft shadow */
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;

  /* make content stack & allow button to stick to bottom */
  display: flex;
  flex-direction: column;
}
.svc-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 22px 48px rgba(16,52,120,.14);
  border-color: #d7e6ff;
}

/* Icon */
.svc-icon{
  width: 48px; height: 48px;                        /* a bit larger */
  border-radius: 10px;
  display:grid; place-items:center;
  color:#fff;
  margin-bottom: 12px;
  box-shadow: 0 12px 24px rgba(0,123,233,.2);
}
.svc-icon-voice  { background: linear-gradient(135deg,#3bb9ff,#008cff); }
.svc-icon-chat   { background: linear-gradient(135deg,#7b7ff6,#3c63ff); }
.svc-icon-mail   { background: linear-gradient(135deg,#ffb169,#ff8a3d); }
.svc-icon-social { background: linear-gradient(135deg,#20d3d8,#00b2d6); }

/* Titles & text */
.svc-title{
  text-align: center;
  margin: 0 0 8px;
  font: 800 18px/1.25 'Poppins', system-ui;
  color: #0f2a50;
}
.svc-desc{
  margin: 0 0 16px;
  color: #516073;
  font-size: 14.5px;
  /* let description grow to push button down uniformly */
  flex-grow: 1;
}

/* Button (fixed to bottom of each card) */
.svc-btn{
  display:inline-block;
  margin-top: auto;               /* keeps all buttons aligned at bottom */
  padding: 10px 14px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  color:#fff;
  background: linear-gradient(135deg,#1996ff,#007be9);
  border: 2px solid transparent;
  box-shadow: 0 10px 22px rgba(0,123,233,.22);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.svc-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(0,123,233,.30);
}

/* Responsive */
@media (max-width: 1024px){
  .svc-grid{ grid-template-columns: repeat(2, 1fr); }
  .svc-card{ min-height: 260px; }
}
@media (max-width: 575.98px){
  .svc-grid{ grid-template-columns: 1fr; }
  .svc-card{ min-height: 240px; }
}








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




/* ===== Services: AI-Enhanced (same look as core) ===== */
.svc-adv{
  padding: clamp(56px, 9vh, 96px) 20px;
  background: linear-gradient(180deg, var(--bg-top), var(--bg-bottom));
}
.svc-adv .container{ max-width: 1180px; margin: 0 auto; }

/* reuse .svc-headline and .svc-subheadline from core */

.svc-grid-3{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 22px; }
.svc-grid-2{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

/* same .svc-card / .svc-title / .svc-desc / .svc-btn styles already defined in your file */

/* New icon colorways for AI set */
.svc-icon-bot       { background: linear-gradient(135deg,#4dd1ff,#1996ff); }
.svc-icon-sentiment { background: linear-gradient(135deg,#a78bfa,#6d5dfc); }
.svc-icon-predict   { background: linear-gradient(135deg,#ffb169,#ff8a3d); }
.svc-icon-assist    { background: linear-gradient(135deg,#20d3d8,#00b2d6); }
.svc-icon-translate { background: linear-gradient(135deg,#7ed957,#32c94d); }

/* Responsive */
@media (max-width: 1024px){
  .svc-grid-3{ grid-template-columns: repeat(2, 1fr); }
  .svc-grid-2{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px){
  .svc-grid-3,
  .svc-grid-2{ grid-template-columns: 1fr; }
}

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