arissonlima/sleek-header-footer-wizard

1 2/* Global Styles */3:root {4    --primary: #36A35E;5    --dark: #0D172A;6    --light: #FFFFFF;7}8 9body {10    font-family: 'Inter', system-ui, -apple-system, sans-serif;11    background-color: var(--light);12    color: #0D172A;13    line-height: 1.6;14}15 16/* Utility Classes */17.container {18    width: 100%;19    max-width: 1280px;20    margin: 0 auto;21    padding: 0 1rem;22}23 24/* Animations */25@keyframes fadeIn {26    from { opacity: 0; transform: translateY(20px); }27    to { opacity: 1; transform: translateY(0); }28}29 30.fade-in {31    animation: fadeIn 0.8s ease forwards;32}33 34/* Responsive Typography */35h1, h2, h3, h4, h5, h6 {36    line-height: 1.2;37    font-weight: 700;38}39 40h1 {41    font-size: clamp(2.5rem, 5vw, 4rem);42}43 44h2 {45    font-size: clamp(2rem, 4vw, 3rem);46}47 48/* Section Spacing */49section {50    padding: 5rem 0;51}52 53/* Buttons */54.btn-primary {55    background-color: var(--primary);56    color: white;57    font-weight: 600;58    padding: 0.75rem 2rem;59    border-radius: 0.5rem;60    transition: all 0.3s ease;61}62 63.btn-primary:hover {64    background-color: #2e8a4f;65    transform: translateY(-2px);66}67 68/* Form Elements */69input, textarea, select {70    width: 100%;71    padding: 0.75rem 1rem;72    border: 1px solid #e2e8f0;73    border-radius: 0.375rem;74    transition: all 0.3s ease;75}76 77input:focus, textarea:focus, select:focus {78    outline: none;79    border-color: var(--primary);80    box-shadow: 0 0 0 3px rgba(54, 163, 94, 0.2);81}82 83/* Responsive Adjustments */84@media (max-width: 768px) {85    section {86        padding: 3rem 0;87    }88}89