/* CSS Variables - Shared across all pages */

:root {
    --primary-green: #10B981;
    --primary-green-dark: #059669;
    --primary-green-light: #D1FAE5;
    --primary-yellow: #F59E0B;
    --primary-yellow-dark: #D97706;
    --primary-yellow-light: #FEF3C7;
    --white: #FFFFFF;
    --gray-50: #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--gray-800);
    line-height: 1.6;
    background: url('../images/background.jpg') no-repeat center center fixed;
    background-size: cover;
}

/* Main Container */
.main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
} 

@media (max-width: 780px) {
  body {
    line-height: 1.4;
    background-attachment: fixed;
    background-position: center;
  }
}