/* ======================================================
   DevSeva – Dark Shakti Header + Festive Body + Dark Footer
   Red + Yellow + Pink Premium Bhakti Theme (ALL PAGES)
   + Mobile Overflow Fix + Marquee Fix + Smooth Animations
   ====================================================== */

/* ======================================================
   GLOBAL MOBILE FIX
   ====================================================== */
html, body{
  max-width:100%;
  overflow-x:hidden !important;
}

/* Safer overflow kill for any accidental wide elements */
*{
  box-sizing:border-box;
}
img, svg, video, canvas{
  max-width:100%;
  height:auto;
}

/* ======================================================
   VARIABLES
   ====================================================== */
:root{
  /* BASE BACKGROUND */
  --bg:#fff1f2;
  --bg-soft:#fff7ed;

  /* TEXT */
  --text:#1f2937;
  --muted:#6b7280;

  /* CORE COLORS */
  --red:#b91c1c;
  --deep-red:#7f1d1d;
  --yellow:#facc15;
  --gold:#f59e0b;
  --pink:#ec4899;

  /* DARK SHADES */
  --dark:#3b0a0a;
  --dark-soft:#4c0519;

  /* GRADIENTS */
  --brand-grad: linear-gradient(90deg,#7f1d1d,#b91c1c,#f59e0b,#ec4899);
  --dark-grad: linear-gradient(90deg,#2a0202,#3b0a0a,#7f1d1d,#b91c1c);
  --footer-grad: linear-gradient(90deg,#1b0000,#2a0202,#4c0519,#7f1d1d);

  --radius:18px;
  --shadow:0 14px 40px rgba(0,0,0,.25);
  --shadow-soft:0 10px 26px rgba(0,0,0,.18);
}

/* ======================================================
   BASE
   ====================================================== */
html,body{
  background:linear-gradient(180deg,var(--bg),var(--bg-soft));
  color:var(--text);
}

a{color:var(--deep-red); text-decoration:none;}
a:hover{color:#450a0a;}

.small-muted{
  color:#7c2d12;
  font-size:.95rem;
}

/* ======================================================
   DARK HEADER / NAVBAR
   ====================================================== */
.navbar{
  background:var(--dark-grad) !important;
  border-bottom:2px solid rgba(250,204,21,.50);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.navbar .navbar-brand,
.navbar .nav-link{
  color:#fff !important;
  font-weight:600;
}

.navbar .nav-link:hover{
  color:var(--yellow) !important;
}

.navbar-toggler{
  border:1px solid rgba(250,204,21,.55) !important;
}
.navbar-toggler:focus{ box-shadow:none !important; }

.navbar .navbar-toggler-icon{
  filter: invert(1) brightness(1.4);
}

.brand-badge{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.5px;
}

.brand-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:radial-gradient(circle,#fff,#facc15);
  box-shadow:0 0 0 6px rgba(250,204,21,.35);
}

/* ======================================================
   HERO SECTION (RICH)
   ====================================================== */
.hero{
  position:relative;
  padding:90px 0 50px;
  overflow:hidden; /* IMPORTANT: stops side overflow */
}

.hero::before{
  content:"";
  position:absolute;
  inset:-60px -40px auto -40px; /* IMPORTANT: prevents out-of-page */
  height:650px;
  background:
    radial-gradient(800px 350px at 20% 35%, rgba(185,28,28,.45), transparent 60%),
    radial-gradient(800px 350px at 80% 35%, rgba(236,72,153,.45), transparent 60%),
    radial-gradient(650px 280px at 50% 10%, rgba(245,158,11,.35), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.22), transparent 70%);
  pointer-events:none;
}

/* ======================================================
   MARQUEE (NO OUT OF PAGE ON MOBILE)
   ====================================================== */
.marquee{
  max-width:100%;
  overflow:hidden;
  background:var(--brand-grad);
  color:#fff;
  border-radius:999px;
  padding:12px 0;
  border:2px solid rgba(250,204,21,.60);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.marquee .track{
  display:inline-flex;
  width:max-content;
  min-width:100%;
  gap:32px;
  white-space:nowrap;
  padding-left:100%;
  font-weight:800;
  animation:marqueeScroll 18s linear infinite;
}

@keyframes marqueeScroll{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* ======================================================
   HERO CARD
   ====================================================== */
.hero-card{
  border-radius:26px;
  background:linear-gradient(180deg,#fff,#fff1f2);
  border:2px solid rgba(250,204,21,.45);
  box-shadow:var(--shadow);
  max-width:100%;
  overflow:hidden;
}

/* HERO KICKER (Online booking strip) */
.hero-kicker{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:10px 20px;
  border-radius:999px;
  background:var(--brand-grad);
  color:#fff;
  font-weight:900;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
}

.badge-soft{
  background:linear-gradient(90deg,#facc15,#ec4899);
  color:#3b0a0a;
  border:1px solid rgba(0,0,0,.25);
}

/* Pill */
.pill{
  padding:9px 18px;
  border-radius:999px;
  background:linear-gradient(90deg,#fde68a,#fbcfe8);
  border:2px solid rgba(250,204,21,.60);
  color:#7f1d1d;
  font-weight:900;
  display:inline-block;
}

/* ======================================================
   CARDS (COLOURFUL + SAFE WIDTH)
   ====================================================== */
.cardx{
  background:linear-gradient(180deg,#ffffff,#fff1f2);
  border-radius:var(--radius);
  border:2px solid rgba(236,72,153,.35);
  box-shadow:var(--shadow-soft);
  transition:all .25s ease;
  max-width:100%;
  overflow:hidden;
}
.cardx:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 45px rgba(0,0,0,.35);
}

/* Step/Stat cards */
.stat{
  padding:22px;
  border-radius:var(--radius);
  background:linear-gradient(135deg,#fff7ed,#fde68a,#fbcfe8);
  border:2px solid rgba(185,28,28,.45);
  box-shadow:0 14px 32px rgba(185,28,28,.35);
}
.stat .h3,
.stat .fw-bold{
  color:#7f1d1d;
}

.section-title{
  font-weight:900;
  letter-spacing:-.3px;
  color:#3b0a0a;
}

/* ======================================================
   BUTTONS (NO OVERFLOW)
   ====================================================== */
.btn, .btn-brand, .btn-outline-brand{
  max-width:100%;
}

.btn-brand{
  background:var(--brand-grad);
  color:#fff;
  font-weight:900;
  border:none;
  box-shadow:0 14px 35px rgba(0,0,0,.45);
}
.btn-brand:hover{
  filter:brightness(.95);
  color:#fff;
}

.btn-outline-brand{
  border:2px solid #facc15;
  color:#3b0a0a;
  font-weight:800;
  background:transparent;
}
.btn-outline-brand:hover{
  background:linear-gradient(90deg,#facc15,#ec4899);
  color:#3b0a0a;
}

/* ======================================================
   SERVICES
   ====================================================== */
.service-img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-top-left-radius:var(--radius);
  border-top-right-radius:var(--radius);
}

.service-card .card-body{ padding:18px; }

.price{
  font-weight:900;
  color:#b91c1c;
}

/* ======================================================
   ACCORDION (FAQ) BEAUTIFY
   ====================================================== */
.accordion .accordion-button{
  font-weight:800;
  color:#3b0a0a;
  background:linear-gradient(90deg,#fff7ed,#fff1f2);
  border-radius:12px !important;
}
.accordion .accordion-button:focus{ box-shadow:none; }
.accordion .accordion-item{
  background:transparent;
}
.accordion .accordion-body{
  color:#7c2d12;
}

/* ======================================================
   DARK FOOTER
   ====================================================== */
.footer{
  background:var(--footer-grad);
  color:#fff;
  border-top:2px solid rgba(250,204,21,.45);
  box-shadow:0 -10px 30px rgba(0,0,0,.25);
}

.footer .fw-bold{ color:#fff; }
.footer .small-muted{ color:#fde68a; }

/* ======================================================
   EXTRA ANIMATIONS (SMOOTH & LIGHTWEIGHT)
   ====================================================== */
@media (prefers-reduced-motion: no-preference){
  .hero-kicker{
    animation:pulseGlow 2.6s ease-in-out infinite;
  }
  @keyframes pulseGlow{
    0%{ box-shadow:0 8px 25px rgba(0,0,0,.35); }
    50%{ box-shadow:0 10px 30px rgba(236,72,153,.55); }
    100%{ box-shadow:0 8px 25px rgba(0,0,0,.35); }
  }

  .cardx{
    animation:fadeUp .7s ease both;
  }
  @keyframes fadeUp{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:none; }
  }
}

/* ======================================================
   MOBILE TUNING (NO OUTSIDE SCREEN)
   ====================================================== */
@media (max-width:768px){
  .hero{ padding:60px 0 30px; }

  .marquee{
    border-radius:16px; /* fits small screens better */
  }

  .hero-kicker{
    font-size:.85rem;
    padding:8px 14px;
  }

  .section-title{ font-size:1.4rem; }

  .service-img{ height:160px; }

  /* prevent any container from creating side scroll */
  .container, .row{
    max-width:100%;
  }
}