/* Base Styles */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); :root { --primary-green: #2e7d32; --secondary-green: #4caf50; --light-green: #e8f5e9; --dark-green: #1b5e20; } body { font-family: 'Poppins', sans-serif; margin: 0; padding: 0; line-height: 1.6; color: #333; } .container { max-width: 1200px; margin: 0 auto; } /* Hero Section */ .hero { background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://static.photos/nature/1200x630/10') center/cover no-repeat; } /* Buttons */ .btn-primary { background-color: var(--primary-green); color: white; padding: 12px 24px; border-radius: 30px; text-decoration: none; font-weight: 500; transition: all 0.3s ease; display: inline-block; } .btn-primary:hover { background-color: var(--dark-green); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.1); } /* Cards */ .service-card, .project-card { transition: transform 0.3s ease, box-shadow 0.3s ease; } .service-card:hover, .project-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } /* Form Styles */ form input, form textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 4px; font-family: 'Poppins', sans-serif; font-size: 16px; margin-bottom: 15px; box-sizing: border-box; } form input:focus, form textarea:focus { outline: none; border-color: var(--secondary-green); box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); } form button { background-color: var(--primary-green); color: white; border: none; padding: 15px 30px; border-radius: 4px; cursor: pointer; font-size: 16px; font-weight: 500; transition: background-color 0.3s ease; width: 100%; } form button:hover { background-color: var(--dark-green); } /* Responsive Adjustments */ @media (max-width: 768px) { .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.2rem; } }