/* Styles for the layout (posts and sidebar) */
.posts-and-sidebar-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem; /* Adjust gap as needed */
}

.main-posts-content {
    flex-grow: 4;  /* Allows main content to take more space */
    flex-shrink: 1;
    flex-basis: 0%; /* Allows flex-grow to dictate size */
    min-width: 0; /* Important for flex items to shrink below content size */
}

.sidebar-ads-column {
    flex-grow: 1;  /* Allows sidebar to take less space */
    flex-shrink: 1;
    flex-basis: 0%;
    min-width: 275px; /* Minimum width before wrapping/shrinking further */
}

.sidebar-ads-column .sidebar-sticky-content {
    position: sticky;
    top: 20px; /* Adjust based on your header height */
    /* Consider adding height constraints or overflow handling if sidebar content is very long */
}

.sidebar-ad-item img {
    width: 100%; /* Make image fill the container width */
    max-width: 300px; /* Optional: Set a max-width if needed */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 15px;
    /* Removed fixed margin-left: 95px; for responsiveness */
    margin-left: auto;  /* Center the image if its width is less than container */
    margin-right: auto; /* Center the image if its width is less than container */
    display: block; /* Needed for auto margins to work for centering */
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    object-fit: cover; /* Cover ensures the image covers the area nicely */
}
.sidebar-ad-item a {
    display: block; /* Ensures the link takes up block space */
    text-align: center; /* Helps in centering the image if needed */
}

/* Responsive adjustments */
@media (max-width: 991px) { /* Stacks columns on medium screens and below (Bootstrap lg breakpoint) */
    .posts-and-sidebar-container {
        flex-direction: column;
        gap: 2rem; /* Adjust vertical gap when stacked */
    }
    .main-posts-content,
    .sidebar-ads-column {
        flex-grow: 1;
        flex-basis: 100%; /* Each takes full width */
        min-width: 100%;
    }
    .sidebar-ads-column {
        margin-top: 2rem; /* Space between content and sidebar when stacked */
        min-width: unset; /* Reset min-width when stacked */
    }
     .sidebar-ads-column .sidebar-sticky-content {
         position: static; /* Disable sticky positioning on smaller screens */
     }
     .sidebar-ad-item img {
         /* You might want to adjust max-width or margins specifically for mobile */
         max-width: 100%; /* Ensure image doesn't overflow its container */
     }
}

/* Card image styling */
.card-img-top-custom {
    width: 100%;
    /* Using padding-bottom for aspect ratio (56.25% = 16:9) */
    padding-bottom: 56.25%;
    background-size: cover;
    background-position: center;
    border-radius: 8px; /* Match this with card's border-radius if any */
    display: block; /* Ensure it behaves like a block element */
}

/* Card content styling - Keeping original styles as requested */
.card-plain.card-blog {
    display: flex; /* Ensure card itself is a flex container */
    flex-direction: column; /* Stack image, body vertically */
    height: 100%; /* Ensure cards in a row take same height */
}
.card-plain.card-blog .card-body {
    padding: 0.75rem 0.25rem;
    flex-grow: 1; /* Allows body to expand and push footer down */
    display: flex;
    flex-direction: column;
}
.card-plain.card-blog .card-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    font-size: 18px;
    line-height: 1.1; /* Tight line height for title */
    color: #05012e; /* Original color */
     text-align: center; /* Centering title */
     
}
.card-plain.card-blog .card-text {
    /* text-align:center; */ /* Removed text-align center from CSS, apply inline if needed per instance */
    line-height: 1.4;
    font-size: 16px;
    color: #555; /* Original color */
    margin-bottom: 0.5rem;
    flex-grow: 0; /* Allow text to take available space */
    
}
.card-plain.card-blog .text-muted {
    font-size: 12px;
     margin-top: auto; /* Pushes the date/time to the bottom */
     padding-top: 0.5rem; /* Add some space above the date */
}
.card-plain.card-blog .text-muted .material-icons {
    font-size: 1em;
    vertical-align: middle;
    margin-right: 3px;
}
.card-plain.card-blog .badge {
    margin-bottom: 0rem; /* Adjusted margin */
    margin-top: 0.75rem; /* Space above badge */
    font-size: 1rem; /* Slightly smaller badge font */
    font-family: Roboto; /* Original font */
    align-self: center; /* Center badge horizontally */
}

/* Styles for category description and read-more toggle */
#category-description-text {
    transition: max-height 0.35s ease-in-out;
    /* text-align: justify; /* Justify text for better block appearance */
    /* Removed text-align center */
    line-height: 1.6; /* Slightly increased line-height for readability */
}

.clamped-text {
    overflow: hidden;
}

.read-more-toggle {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #1260CC; /* Original color */
    text-decoration: underline;
    cursor: pointer;
}

/* Utility class for better spacing */
.section {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

/* Ensure containers handle width fluidly */
.container {
     max-width: 1140px; /* Standard Bootstrap lg max-width */
     margin-left: auto;
     margin-right: auto;
     padding-left: 15px;
     padding-right: 15px;
     width: 100%; /* Ensures container takes full width on smaller screens */
}

/* Minor adjustments for button consistency */
.category-link.btn {
     white-space: normal; /* Allow text wrapping on buttons if needed */
     word-break: break-word;
}

body{
background-color: #fff;
}

#category-description-section .container {
    max-width: 1100px; /* Increased from 980px */
}

.description-card {
    /* --- ENHANCED VISIBILITY --- */
    /* 1. A slightly darker, more opaque background tint */
    background: rgba(245, 247, 250, 0.85); /* Light blueish-gray, not pure white */

    /* 2. A more prominent and darker shadow to "lift" the card */
    box-shadow: 0 15px 45px rgba(60, 72, 88, 0.2);

    /* 3. A visible, crisp border */
    border: 1px solid rgba(220, 225, 230, 0.9);

    /* --- Unchanged Glass & Sizing Effects --- */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 24px; /* Increased from 20px */
    padding: 3.6rem; /* Increased from 3rem */
    text-align: center;
    margin-top: 1rem;
}

.description-title {
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    /* --- 20% BIGGER FONT --- */
    font-size: 3.3rem; /* Increased from 2.75rem */
    color: #05012e;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.description-text {
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    /* --- 20% BIGGER FONT --- */
    font-size: 2rem; /* Increased from 1.25rem */
    line-height: 1.8;
    color: #3c4858;
    max-width: 840px; /* Increased to accommodate larger font */
    margin: 0 auto;
}

/* Responsive adjustments for the even bigger fonts and card */
@media (max-width: 767px) {
    .description-card {
        padding: 2.5rem 1.5rem; /* Increased padding */
    }

    .description-title {
        font-size: 2.4rem; /* Scaled up for mobile */
    }

    .description-text {
        font-size: 1.3rem; /* Scaled up for mobile */
    }
}