/* Import Fira Code font */
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

/* Blog Area */
.blog_area {
    padding: 0px;
}

 /* Keyframes for left-to-right animation */
 @keyframes slideInFromLeft {
    0% {
        transform: translateX(-100%); /* Start completely off-screen to the left */
        opacity: 0; /* Invisible at the start */
    }
    100% {
        transform: translateX(0); /* Move into position */
        opacity: 1; /* Fully visible */
    }
}


/* Profile Picture Styling */
.blogs-profile-picture {
    display: flex;
    flex-direction: row;
    padding: 5px;
    gap: 15px;
}
@media (max-width: 768px) {
    .blogs-profile-picture {
        flex-direction: column;
    }
}

.blogs-profile-picture img {
    width: 20%;           /* Ensures the image fills the container’s width */
    height: auto;          /* Maintains the aspect ratio */
    object-fit: contain;   /* Keeps the whole image within bounds */
    margin: 5px;
}
/* Hover effect to enhance blending */
.blogs-profile-picture img:hover {
    transform: scale(1.02); /* Slight zoom-in effect */
    cursor: pointer;
}
@media (max-width: 768px) {
    .blogs-profile-picture img {
        width: 100%;
        height: auto;
    }
}
/* Blogs Gallery Grid */
.blogs-gallery-grid {
    display: grid;
    gap: 20px;
    /* max-width: 1200px;     Optional: Limits max width on larger screens */
    margin: 0 auto;                  /* Centers the grid within the container */
    padding: 10px;                   /* Adds padding around the grid */
    box-sizing: border-box;
}
 /* Media query for very small screens (e.g., phones) */
 @media (max-width: 768px) {
    .blogs-gallery-grid {
        margin-top: 30px;
    }
}
/* Blog Items */
.blogs-item {
    border: 1px solid rgba(221, 221, 221, 0.8); /* Softer border color for a blended look */
    border-radius: 12px; /* Slightly larger radius for elegance */
    overflow: hidden;
    padding: 20px;
    height: auto; /* Keeps the container adaptive */
    object-fit: contain;
    transition: transform 0.2s, box-shadow 0.2s; /* Smooth transition for hover effects */
}

.blogs-item.visible {
    opacity: 1;
}

/* Blog Images */
.blogs-gallery {
    display: flex;
    flex-direction: row;
    
}

.blogs-gallery-grid img.lazy-load {
    background-color: #e0e0e0; /* Placeholder color */
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .blogs-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

@media (max-width: 480px) {
    .blogs-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* Download Button fa-download li fa icon added dynamically*/
.continue-reading {
    margin-top: 20px;
    color: #2b2a2a; /* Slightly darker for a retro feel */
    font-weight: 300; /* Light but not ultra-thin for a retro look */
    font-family: "Courier New", Courier, monospace; /* Retro-inspired font */
    background-color: transparent; /* Minimalist, no background */
    border: none; /* Clean, no border */
    text-transform: uppercase; /* Retro vibe */
    letter-spacing: 1px; /* Subtle spacing for retro aesthetic */
    cursor: pointer; /* Indicate interactivity */
    z-index: 12;
    transition: color 0.3s ease; /* Smooth color change on hover */
}

.continue-reading:hover {
    color: #ff7f50; /* Retro coral for hover effect */
    text-decoration: underline; /* Minimal but clear hover indication */
}


/* Lazy Loading Placeholder */
img.lazy-load {
    background: #f5f5f5;
    min-height: 200px; /* Reserve space */
}
.blog-abstract {
    padding: 20px;
    border-radius: 8px;
    background: linear-gradient(135deg, #fffde7, #fef9c3); /* Faint yellow gradient */
    margin-bottom: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for elegance */
    font-family: 'Georgia', serif; /* Optional: Elegant font */
    line-height: 1.6; /* Improves readability */
}


.blog-title {
    font-family: 'Merriweather', serif; /* Elegant serif font */
    font-size: 1.5rem; /* Larger, prominent title size */
    color: #343a40; /* Dark gray for professionalism */
    margin-bottom: 10px;
}

.meta-info {
    display: flex;
    gap: 15px; /* Space between author and date */
    font-size: 0.9rem; /* Smaller font for metadata */
    color: #6c757d; /* Muted text color */
    font-family: 'Lora', serif; /* Sophisticated serif font */
    margin-bottom: 15px;
}

.meta-info span {
    display: flex;
    align-items: center;
}

.meta-info .blog-author,
.meta-info .blog-date {
    font-weight: 500;
}

.meta-info i {
    margin-right: 5px; /* Space between icon and text */
    color: #007bff; /* Accent color for icons */
    font-size: 1rem;
}

.blog-abstract-text {
    font-family: 'Roboto', sans-serif; /* Clean sans-serif font for readability */
    font-size: 1rem;
    line-height: 1.6;
    color: #495057; /* Neutral color for text */
}