/* Reset some basic styles */

@import url(./Nav.css);
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0; /* Removed top padding to align with full width */
    background-color: #f4f4f4;
    box-sizing: border-box;
}

/* Styling for the header */
#header1 {
    background-color: #4CAF50; /* Change the background color as needed */
    text-align: center;
    padding: 20px; /* Added padding for better spacing */
    width: 100vw;
}

/* Styling for the blog heading */
#blogs_heading {
    color: white; /* Text color */
    font-size: 2.5em; /* Size of the heading */
    margin: 0;
}

/* Blogs Section */
.blogs-section {
    width: 100%;
    max-width: 1250px; /* Maximum width for larger screens */
    margin: auto;
    padding: 40px; /* Increased padding for better spacing */
    background: #ffffff; /* Background color for the section */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.blogs-section h2 {
    text-align: center;
    margin: 15px;
    
}

/* Blog Container */
.blog-container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping of blog items */
    gap: 20px;
    justify-content: center; /* Center align items */
}

/* Blog Card Styles */
.blog {
    background: #f9f9f9; /* Light background for each blog card */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    flex: 1 1 calc(33% - 20px); /* Responsive card size for larger screens */
    max-width: 350px; /* Max width for each blog card */
    text-align: center; /* Center align text */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */


    
h3 {
    color: #333; /* Dark text color for headings */
    font-size: 1.5em; /* Increased font size for headings */
    text-align: center;
    margin: 5px;
}


p {
    color: #555; /* Dark gray text color for paragraphs */
    line-height: 1.6; /* Improved line spacing */
}
}

.blog:hover {
    transform: translateY(-5px); /* Move up slightly on hover */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); /* Deeper shadow on hover */
}

/* Blog Image Styles */
.blog img {
    width: 100%; /* Full width of the blog card */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px;  
    transition: transform 0.3s ease; /* Smooth transition for image */
}

.blog:hover img {
    transform: scale(1.05); /* Slightly enlarge the image on hover */
}



.takeaway {
    color: #e74c3c; /* Color for takeaway text */
    font-weight: bold;
    margin-top: 10px; /* Spacing above takeaway */
}

/* Responsive styles */
@media (max-width: 768px) {
    #blogs_heading {
        font-size: 2em; /* Slightly smaller on tablets */
    }

    .blog {
        flex: 1 1 calc(50% - 20px); /* Two columns on tablet devices */
    }
}

@media (max-width: 480px) {
    #blogs_heading {
        font-size: 1.5em; /* Smaller on mobile devices */
    }

   

    .blogs-section {
        padding: 15px; /* Less padding in the section */
    }

    h3 {
        font-size: 1.3em; /* Smaller heading font size for mobile */
    }

    .blog {
        flex: 1 1 100%; /* Full width on mobile devices */
    }
}