/* Basic Styling for the Slider */
.slider-container {
    /* Width set to auto/100% to fill available space,
       but we'll align it to the right within its parent.
       Adjust parent container if you want it exactly to browser edge. */
    width: auto; /* Will be managed by positioning */
    height: 480px; /* Example fixed height to show 3 posts clearly */
    overflow: hidden;
    border: 1px solid #ddd;
    position: relative; /* Essential for positioning children */
    font-family: Arial, sans-serif;
    box-sizing: border-box; /* Include padding and border in element's total width and height */

    /* Positioning for the right corner */
    margin-left: auto; /* Pushes the container to the right */
    margin-right: 0;
    /* If this container is within another div, it will go to the right of that div.
       To go to the very right of the page, ensure its parent allows this. */
    max-width: 410px; /* Set a reasonable max-width so it doesn't get too wide on large screens */
    float: right; /* Helps position it to the right and allows text to flow around it */
    margin-top: 0px; /* Add some top margin */
    margin-bottom: 40px; /* Add some bottom margin */
}

.slider-wrapper {
    display: flex;
    flex-direction: column; /* Stacks items vertically */
    transition: transform 0.5s ease-in-out; /* Smooth slide transition */
}

.post-item {
    flex-shrink: 0; /* Prevents items from shrinking */
    width: 100%;
    padding: 15px; /* Base padding */
    padding-top: 30px; /* Increased by 15px (15 + 15 = 30) */
    padding-bottom: 30px; /* Increased by 15px (15 + 15 = 30) */
    box-sizing: border-box;
    border-bottom: 1px solid #eee; /* Separator for posts */
    background-color: #fff;
    color: #333;
}

.post-item:last-child {
    border-bottom: none; /* No border for the last item */
}

.post-item h3 {
    margin-top: 0;
    font-size: 19px;
    color: #0056b3;
    font-weight: bold;
    font-family: 'MUKTA';
}

.post-item p {
    font-size: 0.95em; /* Slightly larger */
    line-height: 1.6;
    color: #666;
}

.post-item a {
    display: block;
    margin-top: 10px;
    color: #007bff;
    text-decoration: none;
    font-size: 0.9em; /* Slightly larger */
}

.post-item a:hover {
    text-decoration: underline;
}

/* Consolidated Navigation Buttons */
.slider-nav-combined {
    position: absolute;
    right: 10px; /* Positioned on the right side, adjust as needed */
    top: 50%; /* Vertically centered */
    transform: translateY(-50%); /* Adjust for perfect vertical centering */
    display: flex;
    flex-direction: column; /* Stack buttons vertically */
    gap: 8px; /* Slightly more space between buttons */
    z-index: 10; /* Ensure buttons are above content */
}

.slider-nav-combined button {
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    padding: 8px 12px; /* Slightly larger buttons */
    cursor: pointer;
    font-size: 1.1em; /* Slightly larger arrow font */
    border-radius: 4px;
    line-height: 1;
}

.slider-nav-combined button:hover {
    background-color: rgba(0, 0, 0, 0.8);
}