body { font-family: Arial, sans-serif; line-height: 1.5; color: #333; }

h1, h2, h3, h4, h5, h6 { font-family: Georgia, serif; font-weight: bold; color: #007bff; }

p { margin-bottom: 1em; }

a { color: #007bff; text-decoration: none; }

a:hover { text-decoration: underline; }

button { color: #fff; background-color: #007bff; }

button:hover { background-color: #6c757d; }

.header { background-color: #6c757d; padding: 1em; }

.footer { background-color: #6c757d; padding: 1em; text-align: center; }

.hero { background-image: url("../images/hero-bg.jpg"); height: 50vh; background-size: cover; color: #fff; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 2em; }

.feature-list { margin: 2em 0; display: flex; flex-wrap: wrap; justify-content: space-between; }

.feature { border: 1px solid #007bff; border-radius: 5px; flex: 1; margin: 0.5em; display: flex; flex-direction: column; align-items: center; padding: 1em; }

.feature h3 { color: #007bff; margin-top: 0; }

.feature p { flex: 1; text-align: center; }

.feature button { margin-top: 1em; }

@media screen and (max-width: 768px) { .hero { height: 30vh; } .feature-list { flex-direction: column; } .feature { flex-basis: 100%; margin: 0.5em 0; } }

/*# sourceMappingURL=main.css.map */