/* ===========================================================
   LiveShirdi — Additional CSS
   Paste this whole file into WordPress → Customize → Additional CSS,
   or into Elementor → Site Settings → Custom CSS.
   Tailwind utility classes used in the prototype won't exist once this
   is rebuilt in Elementor, so this file carries the handful of custom
   visual touches that make the page distinct: the arch-top service
   cards, the hero glow, and the step-number badges.
=========================================================== */

:root{
  --saffron:#F57C00;
  --navy:#14213D;
  --cream:#FFF9F0;
  --gold:#E0A526;
  --wagreen:#25D366;
}

/* Hero: soft gold glow instead of a flat background, evokes aarti light */
.hero-glow{
  background:
    radial-gradient(60% 55% at 78% 20%, rgba(224,165,38,0.18) 0%, rgba(224,165,38,0) 70%),
    var(--cream);
}

/* Service card: arch top (border-radius only on top corners, larger radius)
   instead of the generic uniform-rounded-rectangle card kit */
.service-card{
  background:#fff;
  border:1px solid rgba(20,33,61,0.08);
  border-radius:48px 48px 12px 12px;
  padding:28px 24px 24px;
  box-shadow:0 10px 25px -15px rgba(20,33,61,0.25);
}
.service-card::before{
  content:"";
  display:block;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--saffron);
}

/* Step number badge for the genuine 4-step sequence */
.step-num{
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--navy);
  color:var(--cream);
  font-family:'Playfair Display', serif;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto;
}

/* Header shadow once the page has scrolled (toggled via main.js) */
#site-header.is-scrolled{
  box-shadow:0 4px 14px -8px rgba(20,33,61,0.25);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:0.01ms !important; animation-duration:0.01ms !important; }
}