/* ================================
    Theme Colors
   ================================ */
:root {
  /* Theme Colors */
  --color-primary: #0B6B49;    /* Green */
  --color-secondary: #d69e59;  /* Gray */
  --color-accent: #04973a;     /* Purple */
  --color-danger: #b84141;     /* Red */
  --color-success: #0a9152;    /* Green */
  --color-dark: #090C13;       /* Dark Gray/Black */
  --color-light: #ffffff;      /* Light Gray/White */
  --color-body: #f9fdfd;      /* White */

  /* Gray Colors */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;

    /* Hover Colors */
  --hover-primary: #00853c;
  --hover-secondary: #d0a36c;
  --hover-accent: #00b241;
  --hover-danger: #d25151;
  --hover-success: #19965c;
  --hover-dark: #1c2334;
  --hover-light: #e2e6ea;

  /* Text Colors */
  --text-primary: #2b2b2b;
  
/* ================================
    Font Families
   ================================ */

  /* Font Families */
  --font-primary: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', 'JetBrains Mono', 'Source Code Pro', Menlo, Monaco, Consolas, monospace;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;

/* ================================
    Text Sizes
   ================================ */

   /* Font Sizes (professional scale) */
  --text-xs: 0.75rem;   /* 12px */
  --text-sm: 0.875rem;  /* 14px */
  --text-base: 1rem;    /* 16px */
  --text-lg: 1.125rem;  /* 18px */
  --text-xl: 1.25rem;   /* 20px */
  --text-2xl: 1.5rem;   /* 24px */
  --text-3xl: 1.875rem; /* 30px */
  --text-4xl: 2.25rem;  /* 36px */
  --text-5xl: 3rem;     /* 48px */
  --text-6xl: 3.75rem;  /* 60px */
  --text-7xl: 4.5rem;   /* 72px */
  --text-8xl: 6rem;     /* 96px */
  --text-9xl: 8rem;     /* 128px */

/* ================================
    Font Weights
   ================================ */

  /* Font Weights */
  --font-thin: 100;
  --font-extralight: 200;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;
  --font-black: 900;

/* ================================
    Line Heights
   ================================ */

  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.1;    /* was 1.25 */
  --leading-snug: 1.25;    /* was 1.375 */
  --leading-normal: 1.3;   /* was 1.5 */
  --leading-relaxed: 1.4;  /* was 1.625 */
  --leading-loose: 1.7;    /* was 2 */

/* ================================
    Letter Spacing
   ================================ */

  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;
}

/* ================================
    Heading Styles
   ================================ */

h1 {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);   /* 48px */
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0.5em;
}

h2 {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);   /* 36px */
  font-weight: var(--font-bold);  /* changed from var(--font-semibold) */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  margin-bottom: 0.5em;
}

h3 {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);   /* 30px */
  font-weight: var(--font-bold);  /* changed from var(--font-semibold) */
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 0.5em;
}

h4 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);   /* 24px */
  font-weight: var(--font-bold);  /* changed from var(--font-medium) */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 0.5em;
}

h5 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);    /* 20px */
  font-weight: var(--font-bold);  /* changed from var(--font-medium) */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 0.5em;
}

h6 {
  font-family: var(--font-heading);
  font-size: var(--text-lg);    /* 18px */
  font-weight: var(--font-bold);  /* changed from var(--font-medium) */
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  margin-bottom: 0.5em;
}

/* ================================
    Font Imports
   ================================ */

/* Google Fonts: Poppins, Inter, Fira Code, Playfair Display */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap');

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background-color: var(--color-body);
  font-size: var(--text-base);
  font-weight: var(--font-normal);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  margin: 0;
  padding: 0;
}


/* home page*/
 .hero-bg {
            background: var(--color-primary);
            position: relative;
            overflow: hidden;
            z-index: 0;
        }
        
        .hero-bg::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, var(--color-secondary) 0%, transparent 100%);
            opacity: 0.15;
            z-index: 1;
            pointer-events: none;
        }
        
        .hero-accent {
            color: var(--color-secondary);
        }
        
        .btn-hero-primary {
            background: linear-gradient(135deg, var(--color-secondary) 0%, #8B6A3F 100%);
            transition: all 0.3s ease;
            border: none;
        }
        
        .btn-hero-primary:hover {
            background: linear-gradient(135deg, #8B6A3F 0%, var(--color-secondary) 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(182, 140, 90, 0.4);
        }
        
        .btn-hero-secondary {
            background: transparent;
            border: 2px solid var(--color-secondary);
            color: var(--color-secondary);
            transition: all 0.3s ease;
        }
        
        .btn-hero-secondary:hover {
            background: var(--color-secondary);
            color: var(--color-primary);
            transform: translateY(-1px);
        }
        
        .feature-card {
            transition: all 0.3s ease;
            background: linear-gradient(145deg, #ffffff 0%, var(--color-light) 100%);
            border: 1px solid rgba(102, 126, 234, 0.1);
        }
        
        .feature-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-color: var(--color-accent);
        }
        
        .testimonial-card {
            transition: all 0.3s ease;
            background: linear-gradient(145deg, #ffffff 0%, var(--color-light) 100%);
            border-left: 3px solid transparent;
        }
        
        .testimonial-card:hover {
            transform: translateY(-1px);
            border-left-color: var(--color-primary);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .pricing-card {
            transition: all 0.3s ease;
            background: linear-gradient(145deg, #ffffff 0%, var(--color-light) 100%);
            border: 2px solid transparent;
        }
        
        .pricing-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            border-color: var(--color-success);
        }
        
        .popular-plan {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-dark) 100%);
            color: white;
        }
        
        .popular-plan::before {
            content: "MOST POPULAR";
            position: absolute;
            top: 20px;
            right: -35px;
            background: var(--color-accent);
            color: white;
            padding: 8px 40px;
            font-size: var(--text-xs);
            font-weight: var(--font-bold);
            transform: rotate(45deg);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .gradient-text {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 40%, var(--color-accent) 70%, var(--color-success) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .btn-gradient {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
            transition: all 0.3s ease;
        }
        
        .btn-gradient:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .btn-accent {
            background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-success) 100%);
            transition: all 0.3s ease;
        }
        
        .btn-accent:hover {
            background: linear-gradient(135deg, #059669 0%, #16a34a 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        }
        
        .section-bg-1 { background: linear-gradient(135deg, var(--color-light) 0%, #f0fdf4 30%, #e2e8f0 100%); }
        .section-bg-2 { background: linear-gradient(135deg, #eff6ff 0%, #f0fdf4 40%, #dbeafe 100%); }
        .section-bg-3 { background: linear-gradient(135deg, #f3e8ff 0%, #f0fdf4 30%, #e9d5ff 100%); }
        
        .animate-float {
            animation: float 6s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-15px); }
        }
        
        .step-number {
            background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 50%, var(--color-secondary) 100%);
            position: relative;
        }
        
        .step-number::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 100%;
            width: 0;
            height: 0;
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
            border-left: 12px solid var(--color-accent);
            transform: translateY(-50%);
        }
        
        .card-hover {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        
        .text-green-600 {
            color: var(--color-success) !important;
        }