/* Daily News Section Styles */
#daily-news {
    background-color: #f9f9f9; /* Light background for contrast */
    border-radius: 10px; /* Slightly larger rounded corners */
    padding: 40px; /* Padding for spacing */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* Deeper shadow for depth */
    margin: 20px 0; /* Margin for spacing above and below */
    position: relative; /* For pseudo-element positioning */
    overflow: hidden; /* Ensure no overflow */
}

#daily-news::before {
    content: ''; /* Create a pseudo-element for a decorative effect */
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: linear-gradient(135deg, rgba(88, 196, 167, 0.1), rgba(255, 255, 255, 0)); /* Light gradient effect */
    z-index: 1; /* Keep behind the content */
    border-radius: 10px; /* Match the border radius of the container */
}

#daily-news h2 {
    font-size: 2.5em; /* Larger font size for the section title */
    margin-bottom: 20px; /* Space below the title */
    text-align: center; /* Center align the title */
    color: #333; /* Title color */
    font-weight: 600; /* Slightly bolder font weight */
    position: relative; /* For text shadow */
    z-index: 2; /* Ensure title appears above the gradient */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Soft text shadow */
}

/* News Item Styles */
.news-item {
    background-color: #ffffff; /* White background for news items */
    border: 1px solid #e0e0e0; /* Light border */
    border-radius: 8px; /* Rounded corners */
    padding: 20px; /* Padding for news items */
    margin-bottom: 20px; /* Space between news items */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth transition for hover effect */
    position: relative; /* For hover effects */
    z-index: 2; /* Ensure it appears above the gradient */
}

.news-item:hover {
    transform: translateY(-5px); /* Slight lift on hover */
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); /* Deeper shadow on hover */
}

.news-item h3 {
    font-size: 1.6em; /* Font size for news title */
    margin: 0 0 10px; /* Margin below the title */
    color: #58c4a7; /* Color for titles */
    font-weight: 500; /* Medium font weight */
}

.news-item p {
    font-size: 1em; /* Regular font size for content */
    color: #666; /* Text color */
    line-height: 1.6; /* Improved line height for readability */
}

/* Date and Views Styles */
.news-meta {
    font-size: 0.9em; /* Smaller font size for metadata */
    color: #999; /* Gray color for metadata */
    margin-bottom: 10px; /* Space below metadata */
}

/* Button Styles for Adding News */
.btn-add-news {
    display: inline-block;
    padding: 12px 25px; /* Padding for button */
    background-color: #58c4a7; /* Button background color */
    color: #ffffff; /* Button text color */
    border: none; /* Remove border */
    border-radius: 5px; /* Rounded corners */
    font-size: 1em; /* Font size */
    font-weight: bold; /* Bold text */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.3s, transform 0.3s; /* Smooth transition for hover effect */
    margin: 20px auto; /* Center the button */
    text-align: center; /* Center text */
}

.btn-add-news:hover {
    background-color: #45a69d; /* Darken button on hover */
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Responsive Styles */
@media (max-width: 768px) {
    #daily-news {
        padding: 20px; /* Reduce padding on small screens */
    }

    #daily-news h2 {
        font-size: 2em; /* Smaller title on small screens */
    }

    .news-item {
        padding: 15px; /* Reduce padding on news items */
    }

    .news-item h3 {
        font-size: 1.4em; /* Smaller title size */
    }

    .btn-add-news {
        width: 100%; /* Full width button on small screens */
        padding: 12px; /* Adjust padding */
    }
}