.elementor-6 .elementor-element.elementor-element-0e93ce1{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-4ada243 *//*
 * Cancer Wellness Revolution - Complete Stylesheet
 * Compiled: 2026-04-23
 * Includes: index.css, Tailwind config, component styles
 */

/* ============================================
   GOOGLE FONTS
   ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ============================================
   TAILWIND DIRECTIVES
   ============================================ */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* ============================================
   CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ============================================ */
:root {
  /* Core Theme Colors (HSL format) */
  --background: 80 20% 97%;
  --foreground: 150 30% 12%;

  --card: 0 0% 100%;
  --card-foreground: 150 30% 12%;

  --popover: 0 0% 100%;
  --popover-foreground: 150 30% 12%;

  --primary: 145 45% 28%;
  --primary-foreground: 60 30% 96%;

  --secondary: 42 70% 55%;
  --secondary-foreground: 150 30% 12%;

  --muted: 80 15% 92%;
  --muted-foreground: 150 10% 40%;

  --accent: 42 85% 50%;
  --accent-foreground: 150 30% 12%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;

  --border: 80 15% 85%;
  --input: 80 15% 85%;
  --ring: 145 45% 28%;

  --radius: 0.75rem;

  /* Custom Brand Tokens */
  --healing-green: 145 45% 28%;
  --healing-green-light: 145 30% 95%;
  --gold: 42 85% 50%;
  --gold-light: 42 60% 92%;
  --gold-dark: 42 70% 38%;
  --warm-white: 40 30% 98%;
  --soft-cream: 40 40% 95%;
  --deep-forest: 150 40% 14%;
  --trust-blue: 210 50% 40%;
  --urgency-red: 0 72% 51%;
  
  /* Vibrant Section Backgrounds */
  --section-emerald: 155 40% 92%;
  --section-amber: 38 70% 93%;
  --section-rose: 350 60% 95%;
  --section-sky: 200 60% 94%;
  --section-violet: 270 40% 95%;
  --section-mint: 165 50% 93%;

  /* Sidebar Tokens */
  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 240 5.9% 10%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ============================================
   BASE STYLES
   ============================================ */
@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-body antialiased;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-display;
    text-wrap: balance;
  }

  p {
    text-wrap: pretty;
    overflow-wrap: break-word;
  }
}

/* ============================================
   COMPONENT STYLES
   ============================================ */
@layer components {
  /* Section Container */
  .section-container {
    @apply max-w-6xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  /* CTA Button */
  .cta-button {
    @apply inline-flex items-center justify-center gap-2 px-8 py-4 rounded-xl font-display font-bold text-lg
      bg-accent text-accent-foreground
      shadow-[0_4px_20px_hsl(var(--gold)/0.35)]
      hover:shadow-[0_6px_28px_hsl(var(--gold)/0.5)]
      active:scale-[0.97]
      transition-all duration-200 ease-out;
  }

  .cta-button-large {
    @apply cta-button text-xl py-5 px-10;
  }

  /* Section Badge */
  .section-badge {
    @apply inline-block px-4 py-1.5 rounded-full text-sm font-semibold tracking-wide uppercase
      bg-[hsl(var(--healing-green-light))] text-primary;
  }

  /* Glass Card */
  .glass-card {
    @apply bg-card/80 backdrop-blur-sm rounded-2xl border border-border/50
      shadow-[0_2px_12px_hsl(var(--foreground)/0.06)]
      hover:shadow-[0_4px_20px_hsl(var(--foreground)/0.1)]
      hover:scale-[1.03]
      transition-all duration-300 ease-out;
  }
}

/* ============================================
   ANIMATION KEYFRAMES
   ============================================ */

/* Scroll Reveal Animation */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* Pulse Glow Animation */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 4px 20px hsl(var(--gold) / 0.35);
  }
  50% {
    box-shadow: 0 4px 32px hsl(var(--gold) / 0.6);
  }
}

/* Count Pulse Animation */
@keyframes count-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Float Slow Animation */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-12px) rotate(2deg); }
}

/* Float Reverse Animation */
@keyframes float-reverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(10px) rotate(-2deg); }
}

/* Drift X Animation */
@keyframes drift-x {
  0%, 100% { transform: translateX(0px); }
  50% { transform: translateX(15px); }
}

/* Gradient Shift Animation */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Animation Utilities */
.animate-pulse-glow {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

.animate-count-pulse {
  animation: count-pulse 1.5s ease-in-out infinite;
}

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

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

.animate-drift {
  animation: drift-x 7s ease-in-out infinite;
}

.animate-gradient-shift {
  background-size: 200% 200%;
  animation: gradient-shift 8s ease infinite;
}

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 80ms; }
.stagger-2 { animation-delay: 160ms; }
.stagger-3 { animation-delay: 240ms; }
.stagger-4 { animation-delay: 320ms; }
.stagger-5 { animation-delay: 400ms; }
.stagger-6 { animation-delay: 480ms; }

/* ============================================
   TAILWIND CONFIGURATION REFERENCE
   ============================================ */
/*
  This CSS file corresponds to the following Tailwind config:

  - Font Families:
    - display: 'Playfair Display', serif
    - body: 'DM Sans', sans-serif

  - Colors (HSL):
    - background: 80 20% 97%
    - foreground: 150 30% 12%
    - primary: 145 45% 28%
    - secondary: 42 70% 55%
    - accent: 42 85% 50%
    - muted: 80 15% 92%
    - destructive: 0 84.2% 60.2%
    - border: 80 15% 85%
    - ring: 145 45% 28%

  - Custom Brand Colors:
    - healing-green: 145 45% 28%
    - gold: 42 85% 50%
    - deep-forest: 150 40% 14%
    - trust-blue: 210 50% 40%
    - urgency-red: 0 72% 51%
    - warm-white: 40 30% 98%
    - soft-cream: 40 40% 95%

  - Section Backgrounds:
    - section-emerald: 155 40% 92%
    - section-amber: 38 70% 93%
    - section-rose: 350 60% 95%
    - section-sky: 200 60% 94%
    - section-violet: 270 40% 95%
    - section-mint: 165 50% 93%

  - Border Radius:
    - radius: 0.75rem
    - lg: var(--radius)
    - md: calc(var(--radius) - 2px)
    - sm: calc(var(--radius) - 4px)

  - Container:
    - max-width: 1400px (2xl)
    - padding: 2rem
    - center: true
*/

/* ============================================
   RESPONSIVE BREAKPOINTS REFERENCE
   ============================================ */
/*
  Tailwind breakpoints used in this project:
  - sm: 640px
  - md: 768px
  - lg: 1024px
  - xl: 1280px
  - 2xl: 1400px
*//* End custom CSS */