/* ==========================================================================
   SP - ONE STEP TO PROSPERIA & MILK VARDHANAM
   Custom Stylesheet & Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --color-sp-dark: #0b2b13;
  --color-sp-forest: #14532d;
  --color-sp-green: #166534;
  --color-sp-emerald: #15803d;
  --color-sp-leaf: #22c55e;
  --color-sp-lime: #84cc16;
  --color-sp-blue: #0284c7;
  --color-sp-sky: #38bdf8;
  --color-sp-gold: #d97706;
  --color-sp-amber: #f59e0b;
  --color-sp-cream: #fbfdf9;
  --color-sp-milk: #ffffff;
}

body {
  font-family: 'Plus Jakarta Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #1e293b;
  background-color: #f8fafc;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.font-heading {
  font-family: 'Outfit', 'Noto Sans Devanagari', sans-serif;
}

.font-serif-brand {
  font-family: 'Cinzel', 'Times New Roman', serif;
}

.font-hindi {
  font-family: 'Noto Sans Devanagari', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #15803d;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #14532d;
}

/* Glassmorphism Styles */
.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(22, 101, 52, 0.12);
}

.glass-card {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(22, 101, 52, 0.12);
}

.glass-card-dark {
  background: rgba(11, 43, 19, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(74, 222, 128, 0.2);
}

/* Custom Gradients */
.bg-sp-hero {
  background: radial-gradient(circle at 85% 15%, rgba(56, 189, 248, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 10% 80%, rgba(34, 197, 94, 0.15) 0%, transparent 45%),
    linear-gradient(135deg, #f0fdf4 0%, #ffffff 50%, #f0f9ff 100%);
}

.bg-sp-gradient {
  background: linear-gradient(135deg, #14532d 0%, #166534 50%, #064e3b 100%);
}

.bg-sp-gold-gradient {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #b45309 100%);
}

.text-gradient-green {
  background: linear-gradient(135deg, #166534 0%, #15803d 40%, #16a34a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 60%, #b45309 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
  background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 60%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Animated Floating Elements */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

.animate-float {
  animation: float 4s ease-in-out infinite;
}

.animate-float-slow {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.3);
  }

  50% {
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.6);
  }
}

.animate-pulse-glow {
  animation: pulseGlow 3s infinite;
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.shimmer-btn {
  background-size: 200% auto;
  background-image: linear-gradient(to right, #15803d 0%, #22c55e 50%, #15803d 100%);
  transition: all 0.3s ease;
}

.shimmer-btn:hover {
  background-position: right center;
  box-shadow: 0 10px 25px -5px rgba(22, 101, 52, 0.5);
  transform: translateY(-2px);
}

/* Button & Card Hover Effects */
.card-hover {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 30px -10px rgba(20, 83, 45, 0.15);
  border-color: rgba(34, 197, 94, 0.4);
}

/* Ripple button effect */
.ripple {
  position: relative;
  overflow: hidden;
}

/* Tab Active styling */
.tab-btn.active {
  background-color: #166534;
  color: #ffffff;
  border-color: #166534;
}

/* Custom Range Slider */
input[type="range"] {
  accent-color: #166534;
}

/* Toast Container */
#toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
}

.toast {
  transition: all 0.35s ease;
  transform: translateY(100%);
  opacity: 0;
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* Mobile App Bottom Bar Styles */
.mobile-app-bar {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 -4px 20px -2px rgba(0, 0, 0, 0.08);
}

.mobile-app-bar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #64748b;
  transition: all 0.2s ease;
  padding: 4px 8px;
  border-radius: 12px;
}

.mobile-app-bar-item:hover,
.mobile-app-bar-item:active,
.mobile-app-bar-item.active {
  color: #15803d;
}

.mobile-app-bar-item svg {
  width: 22px;
  height: 22px;
  margin-bottom: 2px;
}

/* Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Infinite Auto-Scroll Benefits Marquee (Mobile) */
@keyframes autoScrollRightToLeft {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.benefits-marquee-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.benefits-marquee-container::before,
.benefits-marquee-container::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32px;
  z-index: 10;
  pointer-events: none;
}

.benefits-marquee-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.95), transparent);
}

.benefits-marquee-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.95), transparent);
}

.benefits-marquee-track {
  display: flex;
  width: max-content;
  gap: 1.25rem;
  animation: autoScrollRightToLeft 22s linear infinite;
}

.benefits-marquee-track:hover,
.benefits-marquee-track:active {
  animation-play-state: paused;
}

/* Mobile Testimonials Showcase Card */
.mobile-testimonial-card {
  background: #ffffff;
  border-radius: 1.5rem;
  border: 1px solid rgba(22, 101, 52, 0.15);
  box-shadow: 0 10px 25px -5px rgba(22, 101, 52, 0.08);
  transition: all 0.3s ease;
}