/* Blog Page Specific Styles */

.hero {
    background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)),
                 url('../assets/hero3.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    padding: 200px 0;
    text-align: center;
    margin-bottom: 40px;
}

.hero h1 {
    font-size: 2.8rem;
    margin-bottom: 20px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero p {
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto 30px;
}

.blog-posts {
    padding: 5rem 0;
}

.blog-posts .card-body {
    padding: 1.5rem;
}

.blog-posts img {
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}