:root { /* Primary Colors */ --primary: #1a5f4a; --primary-light: #2d8f6f; --primary-dark: #0d4535; /* Secondary Colors */ --secondary: #d4a853; --secondary-light: #e6c57a; /* Accent */ --accent: #e85d04; /* Neutral */ --dark: #1a1a2e; --light: #f8f9fa; --gray: #6c757d; /* Semantic Colors */ --success: #28a745; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* Shadows */ --shadow: 0 10px 40px rgba(0, 0, 0, 0.1); --shadow-lg: 0 25px 50px rgba(0, 0, 0, 0.15); /* Typography */ --font-primary: 'Open Sans', sans-serif; --font-heading: 'Montserrat', sans-serif; /* Spacing */ --spacing-xs: 0.25rem; --spacing-sm: 0.5rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-xxl: 3rem; /* Border Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 50px; /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* Reset & Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--font-primary); color: var(--dark); background: var(--light); overflow-x: hidden; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.3; margin-bottom: var(--spacing-md); } p { margin-bottom: var(--spacing-md); } a { color: var(--primary); text-decoration: none; transition: color var(--transition-normal); } a:hover { color: var(--primary-dark); } img { max-width: 100%; height: auto; } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } /* Utility Classes */ .section-padding { padding: 100px 0; } .text-primary { color: var(--primary) !important; } .text-secondary { color: var(--secondary) !important; } .text-accent { color: var(--accent) !important; } .text-dark { color: var(--dark) !important; } .text-light { color: var(--light) !important; } .text-gray { color: var(--gray) !important; } .text-success { color: var(--success) !important; } .text-warning { color: var(--warning) !important; } .text-danger { color: var(--danger) !important; } .text-info { color: var(--info) !important; } .bg-primary { background-color: var(--primary) !important; } .bg-secondary { background-color: var(--secondary) !important; } .bg-accent { background-color: var(--accent) !important; } .bg-dark { background-color: var(--dark) !important; } .bg-light { background-color: var(--light) !important; } .btn { display: inline-block; padding: 15px 40px; border: none; border-radius: var(--radius-full); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: 0.9rem; cursor: pointer; transition: all var(--transition-normal); text-align: center; } .btn-primary { background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%); color: white; } .btn-primary:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: white; } .btn-secondary { background: transparent; border: 2px solid white; color: white; } .btn-secondary:hover { background: white; color: var(--primary); transform: translateY(-3px); } .section-title { font-size: 2.8rem; margin-bottom: 1rem; position: relative; display: inline-block; } .section-title::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 80px; height: 4px; background: linear-gradient(90deg, var(--secondary), var(--accent)); border-radius: 2px; } @media (max-width: 768px) { .section-title { font-size: 2rem; } .container { padding: 0 var(--spacing-sm); } }