/* General Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } /* Body Styling */ body { font-family: 'Arial', sans-serif; line-height: 1.6; color: #333; background-color: #f9f9f9; padding: 20px; } /* Header Styling */ header { text-align: center; padding: 20px 0; background-color: #007bff; color: #fff; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } header .logo { width: 80px; height: auto; margin-bottom: 10px; } header h1 { font-size: 1.8rem; } /* Main Section Styling */ main { margin-top: 20px; } main h2 { text-align: center; margin-bottom: 20px; color: #555; font-size: 1.5rem; text-transform: uppercase; } /* Form Container Styling */ .form-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; padding: 10px; } /* Form Card Styling */ .form-card { background: #fff; border: 1px solid #ddd; border-radius: 10px; padding: 20px; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s, box-shadow 0.3s; } .form-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .form-card h3 { font-size: 1.2rem; color: #007bff; margin-bottom: 10px; } .form-card p { font-size: 0.9rem; color: #666; margin-bottom: 15px; } .form-card .button { display: inline-block; padding: 10px 20px; color: #fff; background-color: #007bff; text-decoration: none; border-radius: 5px; font-size: 0.9rem; transition: background-color 0.3s, transform 0.2s; cursor: pointer; border: none; } .form-card .button:hover { background-color: #0056b3; transform: scale(1.05); } /* Footer Styling */ footer { text-align: center; margin-top: 30px; padding: 10px; background-color: #f1f1f1; border-radius: 5px; font-size: 0.9rem; color: #555; }