/* Reset margin and padding */
body, h1, h2, h3, p {
    margin: 0;
    padding: 0;
}

/* Global styles */
.container {
    width: 80%;
    margin: auto;
}

/* Image Background with Blog Title */
.image-background {
    background-image: url('path/to/your/image.jpg');
    background-size: cover;
    background-position: center;
    padding: 100px 0; /* Adjust padding as needed */
    text-align: center;
    color: #fff; /* Text color */
}

.blog-title {
    font-size: 36px; /* Adjust font size as needed */
    font-weight: bold;
}
/* Masonry Custom CSS */

/* Masonry container */
.masonry-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px; /* Adjust margin to accommodate grid gutter */
}

/* Masonry grid item */
.masonry-item {
    width: calc(33.33% - 30px); /* Adjust item width for 3-column layout */
    margin: 0 15px 30px; /* Adjust margin for grid gutter */
    transition: transform 0.3s ease-out; /* Add transition for hover effect */
    box-sizing: border-box; /* Ensure padding is included in width */
}

/* Masonry grid item hover effect */
.masonry-item:hover {
    transform: translateY(-5px); /* Adjust hover effect */
}

/* Featured image within grid item */
.masonry-item .featured-image {
    width: 100%;
    height: 200px; /* Adjust height as needed */
    overflow: hidden;
    border-radius: 5px; /* Add border radius for rounded corners */
}

.masonry-item .featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out; /* Add transition for hover effect */
}

/* Title within grid item */
.masonry-item .entry-title {
    margin-top: 15px; /* Adjust margin for spacing */
}

/* Meta information within grid item */
.masonry-item .entry-meta {
    font-size: 14px; /* Adjust font size */
    color: #888; /* Adjust color */
}

/* Excerpt within grid item */
.masonry-item .entry-content {
    font-size: 16px; /* Adjust font size */
    color: #555; /* Adjust color */
}

/* Ensure proper alignment of header and navigation */
.mansor-design .latest-blogs .archive-header,
.mansor-design .latest-blogs .paging-navigation {
    clear: both;
}


.latest-blogs {
    margin-bottom: 40px; /* Adjust margin as needed */
}

.latest-blogs h2 {
    font-size: 24px; /* Adjust font size as needed */
    margin-bottom: 20px; /* Adjust margin as needed */
}

.featured-image {
    margin-bottom: 20px; /* Adjust margin as needed */
}

.featured-image img {
    width: 100%; /* Ensure images fill their containers */
}

.entry-title a {
    color: #333; /* Link color */
}

.entry-title a:hover {
    color: #ff6600; /* Hover color */
}

.entry-meta {
    color: #777; /* Meta color */
    font-size: 14px; /* Adjust font size as needed */
}

.entry-content {
    margin-bottom: 20px; /* Adjust margin as needed */
}

.form-section {
    background-color: #f2f2f2; /* Form background color */
    padding: 20px; /* Adjust padding as needed */
}

/* Category Sidebar */
.category-sidebar {
    background-color: #f2f2f2; /* Sidebar background color */
    padding: 20px; /* Adjust padding as needed */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .container {
        width: 90%; /* Adjust width for smaller screens */
    }

    .mansor-design {
        display: flex;
        flex-direction: column;
    }

    .latest-blogs,
    .form-section,
    .category-sidebar {
        width: 100%;
    }

    .form-section,
    .category-sidebar {
        margin-top: 20px; /* Add space between sections on smaller screens */
    }
}