.container {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 1em;
    z-index: -1;

}

/* Add padding to the top of the main section */
main {
    padding-top: 55px; /* Adjusted for navbar height */
}

.hero {
    text-align: center;
    padding: 15em 2em;
    background: url('3D_Landing_Right.png') no-repeat center center/cover;
    color: #fff;
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.5);
    animation: fadeIn 1.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
 .featured-blog,
        .latest-blog,
        .more-blogs {
            margin-top: 3em;
            z-index: -1;

        }

        .blog-posts {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 3em;
        }

        .blog-post {
            background: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            opacity: 0;
            transform: translateY(50px);
        }

        .blog-post.animated {
            animation: slideUpFadeIn 1s forwards;
        }

        @keyframes slideUpFadeIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .blog-post:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
        }

        .blog-post img {
            width: 100%;
            height: 200px;
            transition: transform 0.3s ease;
            object-fit: cover;
        }

        .blog-post:hover img {
            transform: scale(1.05);
        }

        .post-content {
            padding: 1em;
            text-align: center;
        }

        .post-content a {
            display: inline-block;
            padding: 0.5em 1em;
            background: #3d3d3d;
            color: #fff;
            text-decoration: none;
            border-radius: 4px;
            margin-top: 1em;
            transition: background 0.3s ease;
        }

        .post-content a:hover {
            background: #474747;
        }

        #loadMore {
            display: block;
            margin: 2em auto;
            padding: 0.5em 2em;
            background: #3d3d3d;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        #loadMore:hover {
            background: #474747;
        }

        @media (min-width: 768px) {
            .blog-posts {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1200px) {
            .blog-posts {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        /* Featured Articles Grid */
        .featured-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2em;
        }

        @media (min-width: 768px) {
            .featured-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (min-width: 1200px) {
            .featured-grid {
                grid-template-columns: repeat(3, 1fr);
            }
        }