.article-specific-section {
    /* max-width: 1400px; */
    margin: 20px auto;
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    /* Added background here */
    /* Added shadow for context */
}

/* --- KEY CHANGE HERE --- */
/* We remove the horizontal padding from the main container */
.article-container {
    padding: 0px 0;
    /* Only vertical padding */
}

.back-link {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    color: #000;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5em;
    /* --- ADDED --- */
    padding: 0 25px;
    /* Add horizontal padding here instead */
}

.back-arrow {
    display: inline-block;
    background-color: #0d6efd;
    color: #fff;
    padding: 0px 10px;
    border-radius: 5px;
    margin-right: 5px;
    font-weight: bold;
}

/* This header will now touch the edges because its parent has no horizontal padding */
.article-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
}

p,
.article-content {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;

}

.header-line-blue {
    width: 80px;
    margin-right: 10px;
    height: 45px;
    background-color: #0d6efd;
}

.header-line-yellow {
    width: 15px;
    height: 45px;
    background-color: #ffc107;
    margin-right: 15px;
}

h1 {
    font-size: 2.5em;
    margin: 0;
    font-weight: 900;
}

/* --- ADDED PADDING TO THE REST OF THE CONTENT --- */
.sub-heading,
.article-intro,
.article-image {
    padding: 0 50px;
    /* Add horizontal padding to all other content blocks */
    margin-bottom: 20px;
}

.article-content {
    padding: 0 50px;
    /* Add horizontal padding to all other content blocks */
    margin-bottom: 20px 0;
}

.sub-heading,
.article-intro {
    line-height: 1.6;
    color: #333;
}

.article-image {
    text-align: center;
    padding: 20px 0 0px 0;
}

.article-image img {
    width: 50%;
    height: 350px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 8px;
}

.article-content p {
    line-height: 1.7;
    color: #212529;
    text-align: justify;
}

/* --- FINAL GRID-BASED FOOTER STYLES --- */
.article-footer {
    width: 100%;
    /* Use CSS Grid to create a perfect center pivot */
    display: grid;
    /* Create two equal columns. The line between them is the exact page center. */
    grid-template-columns: 1fr 1fr;
    /* Make children stretch to the full height of the footer */
    align-items: stretch;
    margin-bottom: 10px;
    min-height: 45px;
}

/* This group contains the author name and yellow bar */
.author-group {
    /* Place this item in the first grid column (the left half) */
    grid-column: 1 / 2;
    /* Use flexbox to push its content to its own right edge, against the center line */
    display: flex;
    justify-content: flex-end;
}

.author-name {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.4em;
    padding-right: 15px;
    margin: 0;
}

.footer-line-yellow {
    width: 15px;
    background-color: #ffc107;
    margin-right: 10px;
}

/* This is the blue bar extending to the right */
.footer-line-blue {
    /* Place this item in the second grid column (the right half) */
    grid-column: 2 / 3;
    background-color: #2F76B8;
    display: flex;
    align-items: center;
    padding: 10px 20px 0 10px;
}

.date-text {
    color: #fff;
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap;
}

/* Responsive Design */
@media (max-width: 992px) {
    .article-image img {
        width: 70%;
        /* Image takes more space on medium screens */
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.8em;
    }

    /* Adjust padding for tablet */
    .back-link,
    .sub-heading,
    .article-intro,
    .article-image,
    .article-content {
        padding: 0 25px;
    }

    .article-image img {
        width: 50%;
        height: 200px;
    }

    .sub-heading,
    .article-intro,
    .article-content p {
        line-height: 1.3;
        color: #333;
    }

    .article-specific-section {
        margin: 15px auto;
    }

    .back-link {
        margin-bottom: 15px;
        font-size: 1.2em;
    }
}

@media (max-width: 576px) {

    h1 {
        font-size: 1.5em;
    }

    /* Adjust padding for mobile */
    .back-link,
    .sub-heading,
    .article-intro,
    .article-image,
    .article-content {
        padding: 0 15px;
    }

    .article-image img {
        width: 100%;
        /* Full width image on mobile */
        height: 250px;
    }

    .article-footer {
        /* You might want to scale things down on very small screens */
        transform: scale(0.9);
    }
}

@media (max-width: 426px) {

    h1 {
        padding-right: 15px;
    }

    .author-name {
        font-size: 1.2rem;
        padding-right: 0px;
    }
}

@media (max-width: 321px) {
    .author-name {
        font-size: 1rem;
    }
}


/* ============================================== */
/* === NEW SLIDER STYLES for article page === */
/* ============================================== */

/* The main container for the slider */
.slider-container {
        /* Set the width to match your original preference */
    width: 50%;
    /* Center the container horizontally */
    margin: 2rem auto;
    /* Essential for the slider's buttons and overflow */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* The track that holds all the slides and moves */
.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* This creates the smooth sliding animation */
}

/* Each individual slide */
.slide {
    width: 100%;
    flex-shrink: 0; /* Prevents slides from shrinking */
}

/* Ensure images inside the slide fill the container */
.slide img {
       /* Make the image fill the width of its container (the slide or the .article-image div) */
    width: 100%;
    /* Set the fixed height you wanted */
    height: 350px;
    /* This ensures the image covers the area without distortion */
    object-fit: cover;
    object-position: center 20%;
    /* Removes extra space below the image */
    display: block;
}

/* Styling for the next/previous buttons */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.3s ease;
}

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

/* Styling for a disabled button (at the start or end of the slider) */
.slider-btn:disabled {
    background-color: rgba(0, 0, 0, 0.2);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Position the previous and next buttons */
.slider-btn.prev {
    left: 10px;
}

.slider-btn.next {
    right: 10px;
}


/*animation*/
/* --- Animations for the "Article Specific" Section --- */

/* 1. Hover Effect for the Main Image / Slider */

/* Add a smooth transition for the hover effect */
.article-specific-section .article-image,
.article-specific-section .slider-container {
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

/* On hover, slightly lift the element and add a subtle shadow */
.article-specific-section .article-image:hover,
.article-specific-section .slider-container:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}


/* 2. Scroll-in Animation Setup */

/* Select all direct children of the container that we want to animate */
.article-container > *,
.article-footer {
    /* Set the initial "hidden" state */
    opacity: 0;
    transform: translateY(25px);

    /* Define the transition that will create the smooth animation */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* 3. Animation Trigger */
/* When the '.in-view' class is added, transition the elements to their final, visible state */
.article-specific-section.in-view .article-container > *,
.article-specific-section.in-view .article-footer {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Staggered Animation Delays */
/* Apply a transition-delay to each element to make them appear one after another */
.article-specific-section.in-view .back-link { transition-delay: 0.1s; }
.article-specific-section.in-view .article-header { transition-delay: 0.2s; }
.article-specific-section.in-view .sub-heading { transition-delay: 0.3s; }
.article-specific-section.in-view .article-intro { transition-delay: 0.4s; }
.article-specific-section.in-view #dynamic-article-content { transition-delay: 0.5s; }
.article-specific-section.in-view .article-footer { transition-delay: 0.6s; }


/* --- NEW: Hover Animations for Article Details --- */

/* 1. Add smooth transitions to the elements for the hover effects */
.back-link,
.article-header h1,
.author-name {
    transition: all 0.3s ease-in-out;
}


/* 2. Back Button Hover Effect */
/* On hover, move the entire link slightly to the left */
.back-link:hover {
    transform: translateX(-5px);
    color: #ffc107; /* Changes text color to the theme's blue */
}


/* 3. Article Title (Heading) Hover Effect */
/* On hover, change the heading's color to the theme's blue */
.article-header h1:hover {
    color: #0d6efd;
    cursor: default; /* Keeps the cursor normal as it's not a link */
}


/* 4. Author Name Hover Effect */
/* On hover, change the author's name color to the theme's yellow */
.author-name:hover {
    color: #ffc107;
    cursor: default; /* Keeps the cursor normal */
}