/* ============================================
   tawazonlife.ae — Background Gradients
   Extracted from https://tawazonlife.ae/
   ============================================ */

:root {
  /* Brand Colors */
  --fire-red: #FF0033;
  --cyan-glow: #00F0FF;
  --purple-haze: #8B5CF6;

  /* Primary Brand Gradient */
  --gradient-fire: linear-gradient(135deg, #FF0033 0%, #DC0000 50%, #8B0000 100%);
}

/* Hero Section Radial Glows */
.hero-glow-purple {
  background: radial-gradient(circle, #8B5CF6 0%, transparent 70%);
}

.hero-glow-cyan {
  background: radial-gradient(circle, #00F0FF 0%, transparent 70%);
}

/* Rainbow Conic Gradient (animated spinner/loader) */
.rainbow-conic {
  background: conic-gradient(from 0deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #ff6b6b);
}

/* Section Divider */
.section-divider {
  background: linear-gradient(90deg, transparent, var(--fire-red), transparent);
}

/* Feature Block Accents */
.feature-nutrition-bg {
  background: linear-gradient(135deg, #32CD32, #228B22);
}

.feature-nutrition-glow {
  background: radial-gradient(circle, rgba(50, 205, 50, 0.06) 0%, transparent 60%);
}

.feature-supplements-bg {
  background: linear-gradient(135deg, #FFD700, #FFA500);
}

.feature-supplements-glow {
  background: radial-gradient(circle, rgba(255, 215, 0, 0.06) 0%, transparent 60%);
}

/* Card Hover Glow */
.card-glow {
  background: radial-gradient(circle, rgba(var(--particle-color), 0.08) 0%, transparent 60%);
}

/* White Fade (bottom overlay) */
.white-fade {
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.349) 0%, rgba(255, 255, 255, 0.815) 100%);
}

/* Primary Gradient Text */
.gradient-text {
  background: var(--gradient-fire);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Primary Gradient Button */
.gradient-button {
  background: var(--gradient-fire);
  color: #fff;
  border: none;
  padding: 0.875rem 1.75rem;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.gradient-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Gradient Border */
.gradient-border {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    var(--gradient-fire) border-box;
}