/* ================================================================
   home.css  –  Shivap Solutions  |  Home Page Styles ONLY
   ================================================================ */

/* ── Shared base ── */
* { font-family: 'Poppins', sans-serif; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background: #fff; color: #1e293b; -webkit-font-smoothing: antialiased; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #1d4ed8; border-radius: 10px; }

/* ── Gradient text ── */
.grad {
  background: linear-gradient(135deg, #1d4ed8, #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.grad-orange {
  background: linear-gradient(135deg, #f97316, #dc2626);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Reveal utility (controlled by header.js) ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal.vis { opacity: 1; transform: translateY(0); }

/* ── Card lift hover ── */
.card-lift { transition: transform .3s, box-shadow .3s; }
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(29,78,216,.11);
}

/* ── Pulse dot ── */
@keyframes pulse-green { 0%,100%{opacity:1} 50%{opacity:.35} }
.pulse { animation: pulse-green 1.6s infinite; }

/* ── Testimonial quote mark ── */
.testi::before {
  content: '\201C';
  position: absolute; top: -8px; left: 18px;
  font-size: 72px; color: #dbeafe;
  line-height: 1; font-weight: 800;
}

/* ─────────────────────────────────────────
   HERO SLIDER
───────────────────────────────────────── */
.slide { display: none; }
.slide.active {
  display: grid;
  animation: fadeUp .65s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Float animations for hero visual cards */
@keyframes float  { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-9px)} }
@keyframes float2 { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-12px)} }
.float  { animation: float  3.5s ease-in-out infinite; }
.float2 { animation: float2 4.5s ease-in-out infinite .4s; }

/* Slider dots */
#scrollTop {
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
#scrollTop.show { opacity: 1; pointer-events: all; }

/* ─────────────────────────────────────────
   MARQUEE STRIP
───────────────────────────────────────── */
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-run {
  animation: marquee 30s linear infinite;
  width: max-content;
  display: flex;
}