.banner-section {
    height: 30vh;
    background-image: url('images/blogbanner.jpg');
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.banner-section h2 {
    color: #000;
    font-family: "Poppins", sans-serif;
    font-size: 50px;
    font-weight: 700;
}
/* General Image Section Styling */
.image-section {
    padding: 50px 20px;
    background-color: #f8f8f8; /* Light gray background for a clean look */
    text-align: center;
}

.image-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Space between the items */
}

.image-item {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    width: 30%; /* 3 items in a row by default (desktop view) */
    transition: transform 0.3s ease; /* Smooth hover effect */
}

.image-item img {
    width: 100%;
    height: auto;
    border-bottom: 3px solid #f0f0f0; /* Light border between image and title */
}

.image-item h3 {
    font-family: "Poppins", sans-serif;
    font-size: 24px;
    color: #000;
    padding: 20px;
    font-weight: 600;
    margin: 0;
}

/* Hover Effect */
.image-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
    .image-item {
        width: 100%; /* 1 item per row in mobile view */
    }
}
/* For smaller screens */
@media (max-width: 480px) {
    .image-item h3 {
        font-size: 1.25rem; /* Adjust title size for small screens */
        padding: 15px; /* Reduced padding */
    }
}

/* Media Query for Mobile View */
@media (max-width: 900px) {
    .mobile-section {
        height: 150px; /* Adjust the height as needed */
        background-image: url('images/blogbannermbl.jpg');
        background-size: cover;
        background-position: center;
        background-color: #ffcc00;
        display: flex; /* Use flexbox for centering */
        align-items: center; /* Center vertically */
        justify-content: center; /* Center horizontally */
        text-align: center;
    }
    
    .mobile-section h2 {
        color: #000;
        font-family: "Poppins", sans-serif;
        font-size: 36px;
        font-weight: 700;
        margin: 0; /* Remove default margin */
    }

    .banner-section {
        display: none;
    }
}