/* =========================================================
   NexInfinity Tech — Stylesheet  (Enhanced)
   Palette: Primary #2563EB · Secondary #4F46E5 · Accent #06B6D4
            Success #10B981 · Bg #FFFFFF · Section Bg #F8FAFC
========================================================= */

:root {
  --primary:    #2563EB;
  --secondary:  #4F46E5;
  --accent:     #06B6D4;
  --success:    #10B981;
  --bg:         #FFFFFF;
  --section-bg: #F0F4FF;
  --card-bg:    #FFFFFF;
  --border:     #E5E7EB;
  --text:       #0F172A;
  --text-soft:  #64748B;
  --shadow-sm:  0 1px 4px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow-md:  0 8px 28px rgba(15,23,42,.10);
  --shadow-lg:  0 24px 56px rgba(37,99,235,.18);
  --shadow-xl:  0 32px 72px rgba(37,99,235,.22);
  --radius:     20px;
  --radius-sm:  12px;
  --transition: all .35s cubic-bezier(.4,0,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; animation-iteration-count:1 !important;
      transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

*, *::before, *::after { box-sizing:border-box; }
html { scroll-behavior:smooth; }

body {
  font-family:'Inter', sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.72;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6 {
  font-family:'Poppins', sans-serif;
  color:var(--text);
  font-weight:700;
  letter-spacing:-0.025em;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; margin:0; padding:0; }

::selection { background:var(--primary); color:#fff; }

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline:2px solid var(--primary);
  outline-offset:3px;
}

.text-gradient {
  background:linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-py  { padding:110px 0; }
.bg-section  { background:var(--section-bg); }

@media (max-width:768px) { .section-py { padding:72px 0; } }

.section-eyebrow {
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--primary);
  background:linear-gradient(90deg, rgba(37,99,235,.10), rgba(6,182,212,.08));
  padding:7px 18px;
  border-radius:999px;
  margin-bottom:18px;
  border:1px solid rgba(37,99,235,.15);
}

.section-title { font-size:clamp(1.85rem, 3vw, 2.65rem); margin-bottom:16px; }
.section-desc  { color:var(--text-soft); font-size:1.05rem; }

/* =========================================================
   BUTTONS
========================================================= */
.btn {
  border-radius:var(--radius-sm);
  font-weight:600;
  padding:12px 28px;
  transition:var(--transition);
  letter-spacing:.01em;
}

.btn-primary-gradient {
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  border:none;
  color:#fff;
  box-shadow:0 8px 22px rgba(37,99,235,.30);
  position:relative;
  overflow:hidden;
}
.btn-primary-gradient::after {
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:50%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform:skewX(-20deg);
  transition:left .6s ease;
}
.btn-primary-gradient:hover { transform:translateY(-3px); box-shadow:0 16px 32px rgba(37,99,235,.38); color:#fff; }
.btn-primary-gradient:hover::after { left:120%; }

.btn-outline-soft {
  border:1.5px solid var(--border);
  color:var(--text);
  background:#fff;
}
.btn-outline-soft:hover {
  border-color:var(--primary);
  color:var(--primary);
  transform:translateY(-3px);
  box-shadow:var(--shadow-sm);
}

/* =========================================================
   NAVBAR
========================================================= */
#mainNav {
  padding:18px 0;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  transition:var(--transition);
  border-bottom:1px solid transparent;
}
#mainNav.scrolled {
  padding:12px 0;
  box-shadow:0 2px 20px rgba(15,23,42,.08);
  border-bottom:1px solid rgba(229,231,235,.7);
}

.navbar-brand {
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:var(--text) !important;
  display:flex;
  align-items:center;
  gap:8px;
}
.logo-mark {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px; height:36px;
  border-radius:10px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  font-size:1.15rem;
  box-shadow:0 4px 14px rgba(37,99,235,.40);
  animation:logoPulse 3.2s ease-in-out infinite;
}
@keyframes logoPulse {
  0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,.38); }
  50%      { box-shadow:0 0 0 7px rgba(37,99,235,0); }
}
.logo-thin { font-weight:400; color:var(--text-soft); margin-left:2px; }

.nav-link {
  font-weight:500;
  color:var(--text) !important;
  margin:0 10px;
  position:relative;
  padding:6px 0 !important;
  font-size:.96rem;
}
.nav-link::after {
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  border-radius:2px;
  transition:var(--transition);
}
.nav-link:hover::after { width:100%; }
.nav-link:hover { color:var(--primary) !important; }

/* =========================================================
   HERO
========================================================= */
.hero {
  position:relative;
  padding:180px 0 100px;
  overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 92% 8%,  rgba(6,182,212,.10), transparent 65%),
    radial-gradient(ellipse 55% 45% at 4%  92%,  rgba(79,70,229,.09), transparent 65%),
    radial-gradient(ellipse 80% 70% at 50% 50%,  rgba(37,99,235,.04), transparent 70%),
    var(--bg);
}

.hero-bg-shape {
  position:absolute;
  border-radius:50%;
  filter:blur(72px);
  z-index:0;
  animation:blobDrift 16s ease-in-out infinite;
}
.shape-1 {
  width:500px; height:500px;
  background:radial-gradient(circle, rgba(37,99,235,.13), rgba(6,182,212,.06));
  top:-160px; right:-120px;
}
.shape-2 {
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(79,70,229,.11), rgba(16,185,129,.06));
  bottom:-120px; left:-120px;
  animation-delay:-7s;
  animation-direction:reverse;
}
@keyframes blobDrift {
  0%,100% { transform:translate(0,0) scale(1); }
  33%      { transform:translate(28px,20px) scale(1.07); }
  66%      { transform:translate(-18px,12px) scale(0.95); }
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
  font-weight:600;
  color:var(--secondary);
  background:linear-gradient(90deg, #EEF2FF, #E0F2FE);
  border:1px solid #C7D2FE;
  padding:8px 20px;
  border-radius:999px;
  margin-bottom:24px;
}

.hero-title {
  font-size:clamp(2.2rem, 4.5vw, 3.4rem);
  line-height:1.13;
  margin-bottom:16px;
  position:relative;
  z-index:1;
}

.hero-typed-wrap {
  font-family:'Poppins', sans-serif;
  font-size:1.45rem;
  font-weight:600;
  color:var(--text-soft);
  margin-bottom:20px;
}
.typed-text  { font-weight:700; }
.typed-cursor { color:var(--primary); }

.hero-desc {
  color:var(--text-soft);
  font-size:1.08rem;
  max-width:540px;
  margin-bottom:36px;
  line-height:1.75;
}

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

.hero-art  { position:relative; z-index:1; }
.hero-svg  { width:100%; height:auto; filter:drop-shadow(0 20px 40px rgba(37,99,235,.10)); }

/* SVG animations */
.float-slow   { animation:floatY 6s ease-in-out infinite; }
.float-medium { animation:floatY 4.5s ease-in-out infinite; }
.float-medium2{ animation:floatY 5s ease-in-out infinite reverse; }
.float-fast   { animation:floatY 3.5s ease-in-out infinite; }
.float-slow2  { animation:floatY 5.5s ease-in-out infinite reverse; }
@keyframes floatY {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-14px); }
}
.orbit-slow { animation:rotateOrbit 22s linear infinite; transform-origin:280px 240px; }
@keyframes rotateOrbit { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.rotate-slow { animation:rotateOrbit 14s linear infinite; }

/* Counters */
.counters-row {
  margin-top:80px;
  background:linear-gradient(135deg, rgba(255,255,255,.95), rgba(240,244,255,.95));
  border:1px solid rgba(229,231,235,.8);
  border-radius:var(--radius);
  box-shadow:var(--shadow-lg);
  padding:40px 10px;
  position:relative;
  z-index:1;
  backdrop-filter:blur(8px);
}
.counter-box {
  text-align:center;
  padding:12px 20px;
  border-right:1px solid var(--border);
}
.counter-box:last-child { border-right:none; }
.counter-box h3 { font-size:2.3rem; color:var(--primary); margin-bottom:4px; }
.counter-box .static-value { font-size:2.3rem; color:var(--primary); }
.counter-box p { color:var(--text-soft); font-size:.93rem; margin:0; font-weight:500; }

@media (max-width:991px) {
  .counter-box { border-right:none; border-bottom:1px solid var(--border); padding-bottom:20px; margin-bottom:10px; }
}

/* =========================================================
   ABOUT
========================================================= */
.about-art { position:relative; max-width:500px; margin:0 auto; }
.about-art svg { width:100%; height:auto; filter:drop-shadow(0 12px 32px rgba(37,99,235,.08)); }

.value-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:26px;
  height:100%;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.value-card::before {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(37,99,235,.04), rgba(6,182,212,.03));
  opacity:0;
  transition:var(--transition);
}
.value-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:rgba(37,99,235,.22); }
.value-card:hover::before { opacity:1; }
.value-card i { font-size:1.7rem; color:var(--primary); margin-bottom:12px; display:inline-block; }
.value-card h5 { margin-bottom:8px; font-size:1.05rem; }
.value-card p  { color:var(--text-soft); font-size:.94rem; margin:0; }

/* =========================================================
   SERVICE CARDS
========================================================= */
.service-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:36px 30px;
  height:100%;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.service-card::before {
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--primary), var(--accent));
  transform:scaleX(0);
  transform-origin:left;
  transition:var(--transition);
  border-radius:3px 3px 0 0;
}
.service-card::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(37,99,235,.03), rgba(6,182,212,.02));
  opacity:0;
  transition:var(--transition);
}
.service-card:hover::before  { transform:scaleX(1); }
.service-card:hover::after   { opacity:1; }
.service-card:hover {
  transform:translateY(-10px);
  box-shadow:var(--shadow-lg);
  border-color:rgba(37,99,235,.12);
}

.service-icon {
  --ic1:var(--primary);
  --ic2:var(--accent);
  width:62px; height:62px;
  border-radius:18px;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--ic1) 14%, transparent),
    color-mix(in srgb, var(--ic2) 10%, transparent));
  color:var(--ic1);
  font-size:1.65rem;
  margin-bottom:22px;
  transition:var(--transition);
  position:relative;
  z-index:1;
}
.service-card:hover .service-icon {
  background:linear-gradient(135deg, var(--ic1), var(--ic2));
  color:#fff;
  transform:scale(1.12) rotate(-6deg);
  box-shadow:0 12px 28px -6px color-mix(in srgb, var(--ic1) 55%, transparent);
}
.service-card h5 { font-size:1.12rem; margin-bottom:10px; position:relative; z-index:1; }
.service-card p  { color:var(--text-soft); font-size:.95rem; margin:0; position:relative; z-index:1; }

/* =========================================================
   TECHNOLOGIES — MARQUEE
========================================================= */
.tech-marquee {
  display:flex;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  padding:8px 0;
}
.tech-track {
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  padding:6px 7px;
  flex-shrink:0;
  animation:marqueeScroll 36s linear infinite;
}
.tech-marquee:hover .tech-track { animation-play-state:paused; }
@keyframes marqueeScroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-100%); }
}
.tech-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 24px;
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:999px;
  font-weight:600;
  font-size:.91rem;
  color:var(--text);
  transition:var(--transition);
  cursor:default;
  white-space:nowrap;
  box-shadow:var(--shadow-sm);
}
.tech-pill:hover {
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  color:#fff;
  border-color:transparent;
  transform:translateY(-5px) scale(1.05);
  box-shadow:0 10px 24px rgba(37,99,235,.28);
}

/* =========================================================
   WHY CHOOSE US
========================================================= */
.why-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px 28px;
  height:100%;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.why-card::after {
  content:"";
  position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--success), var(--accent));
  transform:scaleX(0);
  transform-origin:left;
  transition:var(--transition);
}
.why-card:hover { transform:translateY(-8px); box-shadow:var(--shadow-md); }
.why-card:hover::after { transform:scaleX(1); }

.why-icon {
  --ic1:var(--success);
  --ic2:var(--accent);
  width:58px; height:58px;
  border-radius:50%;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--ic1) 16%, transparent),
    color-mix(in srgb, var(--ic2) 14%, transparent));
  color:var(--ic1);
  display:flex; align-items:center; justify-content:center;
  font-size:1.45rem;
  margin-bottom:20px;
  transition:var(--transition);
}
.why-card:hover .why-icon {
  background:linear-gradient(135deg, var(--ic1), var(--ic2));
  color:#fff;
  transform:scale(1.1) rotate(8deg);
  box-shadow:0 10px 22px -4px color-mix(in srgb, var(--ic1) 45%, transparent);
}
.why-card h5 { font-size:1.08rem; margin-bottom:8px; }
.why-card p  { color:var(--text-soft); font-size:.94rem; margin:0; }

/* =========================================================
   TIMELINE (PROCESS)
========================================================= */
.timeline {
  display:flex;
  overflow-x:auto;
  gap:0;
  padding-bottom:20px;
  scrollbar-width:thin;
  scrollbar-color:var(--border) transparent;
}
.timeline-step {
  flex:1 0 200px;
  text-align:center;
  padding:0 18px;
  position:relative;
}
.timeline-step .step-num {
  width:54px; height:54px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--primary);
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:1.05rem;
  margin:0 auto 20px;
  position:relative;
  z-index:1;
  transition:var(--transition);
  box-shadow:0 0 0 6px rgba(37,99,235,.07);
}
.timeline-step:hover .step-num {
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  transform:scale(1.12);
  box-shadow:0 8px 20px rgba(37,99,235,.30);
}
.timeline-step::before {
  content:"";
  position:absolute;
  top:27px; left:-50%;
  width:100%; height:2px;
  background:linear-gradient(90deg, var(--border), rgba(37,99,235,.20));
  z-index:0;
}
.timeline-step:first-child::before { display:none; }
.timeline-step h6 { font-size:.98rem; margin-bottom:8px; }
.timeline-step p  { color:var(--text-soft); font-size:.85rem; margin:0; line-height:1.5; }

/* =========================================================
   PORTFOLIO  — images fully visible with overlay on hover
========================================================= */
.portfolio-card {
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  box-shadow:var(--shadow-md);
  border:1px solid var(--border);
  height:300px;               /* Fixed height so images fill card */
  transition:var(--transition);
}
.portfolio-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-xl);
}

/* Image container fills the whole card */
.portfolio-img {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:hidden;
}

/* The actual <img> — covers the whole card */
.portfolio-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .65s cubic-bezier(.4,0,.2,1);
}
.portfolio-card:hover .portfolio-img img { transform:scale(1.10); }

/* Colour-tint overlay (gradient) layered on top of the image */
.portfolio-img .portfolio-tint {
  position:absolute;
  inset:0;
  opacity:.50;
  mix-blend-mode:multiply;
  transition:opacity .4s ease;
}
.portfolio-card:hover .portfolio-tint { opacity:.30; }

/* Persistent dark-to-transparent scrim at the bottom for legibility */
.portfolio-img::after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top, rgba(10,15,30,.70) 0%, rgba(10,15,30,.20) 55%, transparent 100%);
  z-index:1;
}

/* Title always visible at bottom */
.portfolio-title-label {
  position:absolute;
  left:22px; bottom:22px;
  color:#fff;
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.12rem;
  z-index:3;
  text-shadow:0 2px 10px rgba(0,0,0,.35);
  transition:var(--transition);
}

/* Tag + button appear on hover */
.portfolio-overlay {
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:22px;
  opacity:0;
  transition:var(--transition);
  z-index:4;
}
.portfolio-card:hover .portfolio-overlay { opacity:1; }
.portfolio-card:hover .portfolio-title-label { bottom:56px; }

.portfolio-overlay .tag {
  color:rgba(255,255,255,.90);
  font-size:.82rem;
  font-weight:600;
  background:rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.25);
  padding:4px 12px;
  border-radius:999px;
}
.portfolio-overlay .btn {
  background:#fff;
  color:var(--text);
  font-size:.84rem;
  padding:8px 18px;
  transform:translateY(10px);
  transition:var(--transition);
  box-shadow:var(--shadow-sm);
}
.portfolio-card:hover .portfolio-overlay .btn { transform:translateY(0); }
.portfolio-overlay .btn:hover { background:var(--primary); color:#fff; }

/* =========================================================
   TESTIMONIALS
========================================================= */
.testimonial-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:52px 56px;
  max-width:740px;
  margin:0 auto;
  text-align:center;
  box-shadow:var(--shadow-md);
  position:relative;
  overflow:hidden;
}
.testimonial-card::before {
  content:"\201C";
  position:absolute;
  top:-10px; left:28px;
  font-family:'Poppins', sans-serif;
  font-size:10rem;
  line-height:1;
  color:var(--primary);
  opacity:.06;
  pointer-events:none;
}

/* Avatar ring with real photo */
.testimonial-avatar {
  width:80px; height:80px;
  border-radius:50%;
  padding:3px;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  margin:0 auto 18px;
  box-shadow:0 8px 22px rgba(37,99,235,.25);
}
.testimonial-avatar img {
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  object-position:top;
  display:block;
  border:3px solid #fff;
}

.testimonial-stars  { color:#F59E0B; margin-bottom:16px; font-size:1rem; letter-spacing:.05em; }
.testimonial-quote  { font-size:1.12rem; color:var(--text); margin-bottom:20px; font-style:italic; line-height:1.75; }
.testimonial-name   { font-weight:700; font-size:1rem; margin-bottom:3px; }
.testimonial-role   { color:var(--text-soft); font-size:.88rem; }

.carousel-control-prev, .carousel-control-next { width:54px; opacity:1; }
.carousel-btn-icon {
  width:46px; height:46px;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--border);
  color:var(--text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.carousel-btn-icon:hover { background:var(--primary); color:#fff; border-color:var(--primary); transform:scale(1.08); }

.carousel-indicators-custom {
  position:static;
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:30px;
}
.carousel-indicators-custom button {
  width:10px; height:10px;
  border-radius:50%;
  border:none;
  background:var(--border);
  transition:var(--transition);
  cursor:pointer;
}
.carousel-indicators-custom button.active {
  background:var(--primary);
  width:28px;
  border-radius:6px;
}

/* =========================================================
   FAQ
========================================================= */
.accordion-item {
  border:1px solid var(--border) !important;
  border-radius:var(--radius-sm) !important;
  margin-bottom:14px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:var(--transition);
}
.accordion-item:hover { box-shadow:var(--shadow-md); }
.accordion-button {
  font-family:'Poppins', sans-serif;
  font-weight:600;
  font-size:1rem;
  color:var(--text);
  background:#fff;
  padding:20px 26px;
}
.accordion-button:not(.collapsed) {
  color:var(--primary);
  background:linear-gradient(90deg, rgba(37,99,235,.04), rgba(6,182,212,.03));
  box-shadow:none;
}
.accordion-button:focus { box-shadow:none; outline:2px solid var(--primary); outline-offset:-2px; }
.accordion-button::after { filter:invert(38%) sepia(80%) saturate(1700%) hue-rotate(202deg); }
.accordion-body { color:var(--text-soft); padding:4px 26px 24px; line-height:1.72; }

/* =========================================================
   CTA SECTION
========================================================= */
.cta-section {
  position:relative;
  background:linear-gradient(120deg, var(--primary) 0%, var(--secondary) 55%, var(--accent) 100%);
  padding:100px 0;
  text-align:center;
  color:#fff;
  overflow:hidden;
}
/* Subtle grain texture overlay for depth */
.cta-section::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  opacity:.20;
  pointer-events:none;
}
/* Decorative glowing blobs */
.cta-section::after {
  content:"";
  position:absolute;
  width:500px; height:500px;
  border-radius:50%;
  background:rgba(255,255,255,.06);
  top:-150px; right:-120px;
  pointer-events:none;
}
.cta-section .container { position:relative; z-index:1; }
.cta-section h2  { color:#fff; font-size:clamp(1.9rem, 3vw, 2.6rem); margin-bottom:14px; }
.cta-section p   { color:rgba(255,255,255,.88); font-size:1.08rem; margin-bottom:38px; }
.cta-btns        { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }
.cta-section .btn-light { color:var(--primary); font-weight:700; box-shadow:0 8px 22px rgba(0,0,0,.15); }
.cta-section .btn-light:hover { transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.20); }
.cta-section .btn-outline-light { border:2px solid rgba(255,255,255,.60); }
.cta-section .btn-outline-light:hover { background:rgba(255,255,255,.15); color:#fff; transform:translateY(-3px); }

/* =========================================================
   CONTACT
========================================================= */
.contact-info-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:38px;
  height:100%;
  box-shadow:var(--shadow-sm);
}
.contact-info-item {
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:28px;
}
.contact-info-item i {
  width:48px; height:48px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(6,182,212,.07));
  color:var(--primary);
  display:flex; align-items:center; justify-content:center;
  font-size:1.25rem;
  flex-shrink:0;
  transition:var(--transition);
}
.contact-info-item:hover i {
  background:linear-gradient(135deg, var(--primary), var(--accent));
  color:#fff;
  transform:scale(1.08);
}
.contact-info-item strong { display:block; font-size:.94rem; margin-bottom:2px; }
.contact-info-item span  { color:var(--text-soft); font-size:.92rem; }

.social-icons { display:flex; gap:10px; margin-top:10px; }
.social-icons a {
  width:42px; height:42px;
  border-radius:10px;
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--text);
  transition:var(--transition);
  font-size:1rem;
}
.social-icons a:hover {
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  border-color:transparent;
  color:#fff;
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(37,99,235,.28);
}

/* Footer overrides — icons must be visible on dark background */
.footer .social-icons a {
  color:#94A3B8;
  border-color:#1E293B;
  background:#0F172A;
}
.footer .social-icons a:hover {
  background:linear-gradient(135deg, var(--primary), var(--secondary));
  border-color:transparent;
  color:#fff;
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(37,99,235,.35);
}

.contact-form {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:38px;
  box-shadow:var(--shadow-md);
}
.contact-form .form-label { font-weight:600; font-size:.9rem; margin-bottom:7px; }
.contact-form .form-control, .contact-form .form-select {
  border:1.5px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 16px;
  font-size:.95rem;
  transition:var(--transition);
  background:#FAFBFF;
}
.contact-form .form-control:focus, .contact-form .form-select:focus {
  border-color:var(--primary);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.form-success {
  display:none;
  margin-top:16px;
  background:rgba(16,185,129,.08);
  color:#047857;
  border:1px solid rgba(16,185,129,.25);
  padding:14px 18px;
  border-radius:10px;
  font-size:.92rem;
}
.form-success.show { display:block; }

/* =========================================================
   FOOTER
========================================================= */
.footer {
  background:linear-gradient(180deg, #080E1C 0%, #0B1220 100%);
  color:#94A3B8;
  padding:80px 0 28px;
  position:relative;
  overflow:hidden;
}
.footer::before {
  content:"";
  position:absolute;
  width:600px; height:400px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,99,235,.07), transparent 70%);
  top:-150px; right:-100px;
  pointer-events:none;
}
.footer-logo {
  font-family:'Poppins', sans-serif;
  font-weight:700;
  font-size:1.3rem;
  color:#fff;
  display:flex; align-items:center; gap:8px;
  margin-bottom:16px;
}
.footer .logo-thin { color:#64748B; }
.footer-desc { font-size:.92rem; line-height:1.75; margin-bottom:20px; }
.footer h6 { color:#fff; font-weight:600; margin-bottom:18px; font-size:1rem; }
.footer-links li { margin-bottom:12px; }
.footer-links a {
  color:#94A3B8;
  font-size:.92rem;
  transition:var(--transition);
  display:inline-flex; align-items:center; gap:6px;
}
.footer-links a::before {
  content:"›";
  color:var(--accent);
  font-weight:700;
  opacity:0;
  transition:var(--transition);
}
.footer-links a:hover { color:var(--accent); padding-left:6px; }
.footer-links a:hover::before { opacity:1; }

.footer-subscribe {
  display:flex;
  border:1px solid #1E293B;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#0F172A;
  transition:var(--transition);
}
.footer-subscribe:focus-within { border-color:var(--primary); box-shadow:0 0 0 3px rgba(37,99,235,.15); }
.footer-subscribe input {
  flex:1;
  background:transparent;
  border:none;
  padding:11px 16px;
  color:#fff;
  font-size:.9rem;
}
.footer-subscribe input::placeholder { color:#475569; }
.footer-subscribe input:focus { outline:none; }
.footer-subscribe button {
  background:linear-gradient(90deg, var(--primary), var(--secondary));
  border:none;
  color:#fff;
  padding:0 20px;
  transition:var(--transition);
  font-size:1rem;
}
.footer-subscribe button:hover { opacity:.88; transform:scale(1.04); }

.footer hr { border-color:#1E293B; margin:44px 0 26px; }
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:.85rem;
  flex-wrap:wrap;
  gap:12px;
}
#backToTop {
  width:44px; height:44px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--primary), var(--accent));
  border:none;
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:var(--transition);
  box-shadow:0 6px 18px rgba(37,99,235,.40);
}
#backToTop:hover { transform:translateY(-5px); box-shadow:0 12px 26px rgba(37,99,235,.45); }

/* =========================================================
   RESPONSIVE — full multi-breakpoint overhaul
   lg  = 991px  (tablet landscape / small desktop)
   md  = 768px  (tablet portrait)
   sm  = 576px  (large phone)
   xs  = 420px  (small phone)
========================================================= */

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

  /* Navbar */
  .navbar-collapse {
    background:rgba(255,255,255,.97);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    margin-top:14px;
    padding:20px 24px;
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow-lg);
  }
  .navbar-nav  { margin-bottom:16px; }
  .nav-link    { margin:6px 0; font-size:1rem; }
  .navbar-toggler { border:none; padding:4px 8px; font-size:1.4rem; color:var(--text); }
  .navbar-toggler:focus { box-shadow:none; }

  /* Hero */
  .hero { padding:130px 0 70px; text-align:center; }
  .hero-title { font-size:clamp(2rem, 5vw, 2.8rem); }
  .hero-desc  { max-width:100%; margin-left:auto; margin-right:auto; }
  .hero-btns  { justify-content:center; }
  .eyebrow    { margin-left:auto; margin-right:auto; }
  .hero-typed-wrap { text-align:center; }

  /* Hero image */
  .hero-img-wrap { margin:0 auto; max-width:480px; }
  .hero-badge-card { display:none; }

  /* Counters */
  .counters-row { margin-top:48px; }
  .counter-box  {
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:16px 10px;
    margin-bottom:0;
  }
  .counter-box:last-child { border-bottom:none; }

  /* About */
  .about-art { text-align:center; }
  .about-img-wrap { margin:0 auto 56px; }
  .about-img-frame { display:none; }
  .about-stat-badge { left:10px; }

  /* Timeline — make it vertical on tablet */
  .timeline { flex-direction:column; overflow-x:visible; }
  .timeline-step {
    flex:none;
    width:100%;
    display:flex;
    align-items:flex-start;
    text-align:left;
    padding:0 0 32px 72px;
    position:relative;
  }
  .timeline-step::before {
    width:2px;
    height:calc(100% - 54px);
    top:54px;
    left:26px;
    background:linear-gradient(180deg, rgba(37,99,235,.30), var(--border));
  }
  .timeline-step:last-child::before { display:none; }
  .timeline-step .step-num {
    position:absolute;
    left:0; top:0;
    margin:0;
  }

  /* Portfolio */
  .portfolio-card { height:260px; }

  /* Testimonials */
  .testimonial-card { padding:36px 28px; }
  .carousel-control-prev { left:-8px; }
  .carousel-control-next { right:-8px; }

  /* Contact */
  .contact-info-card { margin-bottom:0; }

  /* Footer */
  .footer { padding:60px 0 24px; }
  .footer .col-lg-2,
  .footer .col-lg-3 { margin-top:8px; }
}

/* ---- md: ≤ 768px ---- */
@media (max-width:768px) {

  .section-py { padding:72px 0; }

  /* Hero */
  .hero { padding:120px 0 60px; }
  .hero-title { font-size:clamp(1.85rem, 6vw, 2.4rem); }
  .hero-typed-wrap { font-size:1.2rem; }
  .hero-desc { font-size:1rem; }

  /* Section titles */
  .section-title { font-size:clamp(1.6rem, 5vw, 2rem); }

  /* Service cards — 2 columns */
  #servicesGrid .col-md-6 { width:50%; }

  /* Why cards — 2 columns */
  #whyGrid .col-md-6 { width:50%; }

  /* Portfolio — 2 columns */
  #portfolioGrid .col-md-6 { width:50%; }

  /* Testimonials */
  .testimonial-card { padding:30px 22px; }
  .testimonial-quote { font-size:1rem; }

  /* Contact form padding */
  .contact-form { padding:28px 22px; }
  .contact-info-card { padding:28px 22px; }

  /* CTA */
  .cta-section { padding:72px 0; }
  .cta-btns { gap:12px; }
}

/* ---- sm: ≤ 576px ---- */
@media (max-width:576px) {

  .section-py { padding:60px 0; }

  /* Navbar brand smaller */
  .navbar-brand { font-size:1.1rem; }
  .logo-mark    { width:30px; height:30px; font-size:1rem; }

  /* Hero */
  .hero { padding:110px 0 52px; }
  .hero-title { font-size:1.75rem; line-height:1.2; }
  .hero-typed-wrap { font-size:1.1rem; }
  .hero-btns { flex-direction:column; gap:12px; }
  .hero-btns .btn { width:100%; text-align:center; }
  .hero-img-wrap { max-width:100%; }

  /* Counters — 2×2 grid */
  .counters-row { padding:24px 8px; margin-top:36px; }
  .counter-box  { padding:14px 8px; }
  .counter-box h3,
  .counter-box .static-value { font-size:1.8rem; }

  /* About image */
  .about-stat-badge {
    position:static;
    margin-top:16px;
    border-radius:12px;
    animation:none;
    justify-content:flex-start;
  }
  .about-img-wrap { padding-bottom:0; margin-bottom:24px; }

  /* Service cards — full width on phone */
  #servicesGrid .col-md-6 { width:100%; }
  .service-card { padding:26px 22px; }

  /* Why cards — full width on phone */
  #whyGrid .col-md-6 { width:100%; }

  /* Portfolio — full width on phone */
  #portfolioGrid .col-md-6 { width:100%; }
  .portfolio-card { height:240px; }

  /* Testimonial */
  .testimonial-card { padding:28px 18px; }
  .testimonial-card::before { font-size:7rem; }

  /* CTA */
  .cta-section { padding:60px 0; }
  .cta-section h2 { font-size:1.6rem; }
  .cta-btns { flex-direction:column; gap:12px; }
  .cta-btns .btn { width:100%; }

  /* Contact */
  .contact-form  { padding:22px 16px; }
  .contact-info-card { padding:22px 16px; }
  .contact-info-item { gap:12px; }
  .contact-info-item i { width:40px; height:40px; font-size:1.1rem; }

  /* Footer */
  .footer { padding:48px 0 20px; }
  .footer-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
  .social-icons { flex-wrap:wrap; }

  /* Accordion */
  .accordion-button { padding:16px 18px; font-size:.95rem; }
  .accordion-body   { padding:4px 18px 18px; }
}

/* ---- xs: ≤ 420px ---- */
@media (max-width:420px) {

  .hero-title { font-size:1.55rem; }
  .hero-typed-wrap { font-size:1rem; }
  .section-title { font-size:1.45rem; }
  .eyebrow { font-size:.75rem; padding:6px 14px; }
  .section-eyebrow { font-size:.72rem; padding:6px 12px; }

  /* Counters single column */
  .counters-row .col-6 { width:100%; }
  .counter-box { border-bottom:1px solid var(--border) !important; }
  .counter-box:last-child { border-bottom:none !important; }

  /* Portfolio */
  .portfolio-card { height:210px; }
  .portfolio-title-label { font-size:.95rem; left:14px; bottom:14px; }

  /* Timeline vertical — tighter */
  .timeline-step { padding-bottom:24px; padding-left:62px; }
  .timeline-step .step-num { width:44px; height:44px; font-size:.9rem; }
  .timeline-step::before { top:44px; left:22px; }

  /* Testimonial */
  .testimonial-card { padding:22px 14px; }
  .testimonial-quote { font-size:.95rem; }
  .testimonial-avatar { width:66px; height:66px; }

  /* Footer subscribe */
  .footer-subscribe { flex-direction:column; border-radius:var(--radius-sm); }
  .footer-subscribe input { padding:12px 16px; }
  .footer-subscribe button { padding:12px; border-radius:0 0 var(--radius-sm) var(--radius-sm); }
}

/* =========================================================
   HERO IMAGE BLOCK  (replaces old SVG)
========================================================= */
.hero-img-wrap {
  position: relative;
  max-width: 520px;
  margin: 0 auto 0 0;
  z-index: 1;
}

/* Gradient glow halo behind the photo */
.hero-img-wrap::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 30px;
  background: linear-gradient(135deg, var(--primary), var(--accent), var(--secondary));
  z-index: -1;
  opacity: .22;
  filter: blur(3px);
}

.hero-main-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform .6s ease;
}
.hero-img-wrap:hover .hero-main-img { transform: scale(1.025); }

/* Floating badge — shared base */
.hero-badge-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229,231,235,.7);
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: var(--shadow-md);
  animation: floatY 4.5s ease-in-out infinite;
}
.hero-badge-card i {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--success), var(--accent));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.hero-badge-card strong { display: block; font-size: .92rem; line-height: 1.25; color: var(--text); }
.hero-badge-card span   { color: var(--text-soft); font-size: .74rem; }

/* Top-right badge */
.hero-badge-card:not(.hero-badge-card2) {
  top: -18px;
  right: -18px;
  animation-delay: 0s;
}

/* Bottom-left badge */
.hero-badge-card2 {
  bottom: -18px;
  left: -18px;
  animation-delay: -2.2s;
  animation-direction: reverse;
}
.hero-badge-card2 i {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
}

@media (max-width: 991px) {
  .hero-badge-card { display: none; }
  .hero-img-wrap   { margin: 0 auto; }
}

/* =========================================================
   ABOUT IMAGE BLOCK  (replaces old SVG)
========================================================= */
.about-img-wrap {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
  padding-bottom: 28px;
}

.about-main-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 24px;
  box-shadow: var(--shadow-xl);
  object-fit: cover;
  aspect-ratio: 4 / 3.2;
  position: relative;
  z-index: 2;
  transition: transform .6s ease;
}
.about-img-wrap:hover .about-main-img { transform: scale(1.025); }

/* Offset accent frame behind the image */
.about-img-frame {
  position: absolute;
  top: 18px;
  left: -18px;
  right: 18px;
  bottom: 8px;
  border-radius: 28px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  z-index: 1;
  opacity: .18;
}

/* Floating stat badge */
.about-stat-badge {
  position: absolute;
  z-index: 3;
  bottom: 0px;
  left: -14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(229,231,235,.7);
  border-radius: 16px;
  padding: 14px 20px;
  box-shadow: var(--shadow-md);
  animation: floatY 5s ease-in-out infinite;
}
.about-stat-badge i {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.about-stat-badge strong { display: block; font-size: .96rem; line-height: 1.25; color: var(--text); }
.about-stat-badge span   { color: var(--text-soft); font-size: .76rem; }

@media (max-width: 991px) {
  .about-img-wrap   { margin-bottom: 52px; }
  .about-img-frame  { display: none; }
  .about-stat-badge { left: 10px; }
}