/* custom-styles.css */
/* Add hover effect to the related post cards */
.showHoverYellow {
    transition: background-color 0.3s ease; /* Smooth transition for background color */
    background-color: white; /* Set initial background color */
    overflow: hidden; /* Prevents extra space */
}

.showHoverYellow:hover {
    background-color: #FFCC00; /* Change background color on hover */
}

.text-black{
    color: black;
}

.text-white{
    color: white;
}
.white{
    color: white;
}

.text-yellow{
    color: #FFCC00;
}
.bg-black{
    background-color: black;
}

.bg-white{
    background-color: white;
}

.yellow{
    color: #FFCC00;
}

.bg-yellow{
    background-color: #FFCC00;
}
.custom-pagination {
    padding: 20px; /* Add padding around the pagination */
    margin-top: 20px; /* Margin above the pagination */
    /* background-color: white; Set the background color to yellow */
    border-radius: 5px; /* Optional: rounded corners */
    text-align: center; /* Center align the pagination links */
}

.custom-pagination a,
.custom-pagination span {
    padding: 10px 15px; /* Padding for each pagination link */
    margin: 0 5px; /* Margin between pagination links */
    /* color: black; Text color */
    text-decoration: none; /* Remove underline from links */
    border: 1px solid transparent; /* Add border for hover effect */
}

.custom-pagination a:hover {
    background-color: #FFCC00; /* Background color on hover */
    border-color: #FFCC00; /* Border color on hover */
}

.custom-pagination .current {
    background-color: #FFCC00; /* Background for current page */
    color: black; /* Text color for current page */
    border-color: #FFCC00; /* Border color for current page */
}

.custom-pagination .text-white{
    color: white;
}





/* Editor's Choice Carousel Styles */
.editor-choice-carousel .blog-item {
    height: auto; /* Adjust height if necessary */
    overflow: hidden; /* Ensure content does not overflow */
}

.editor-choice-carousel .blog-img img {
    height: 250px; /* Fixed height for images */
    object-fit: cover; /* Maintain aspect ratio */
}

.editor-choice-carousel .owl-nav button {
    background-color: black; /* Background color for navigation buttons */
    color: white; /* Text color for navigation buttons */
    border: none; /* Remove border */
}

.editor-choice-carousel {
    padding: 20px 0; /* Padding above and below the carousel */
}

.editor-choice-carousel .owl-dots {
    text-align: center; /* Center the navigation dots */
    margin-top: 15px; /* Spacing above the dots */
}

/* Responsive Styles */
@media (max-width: 768px) {
    .editor-choice-carousel .blog-item {
        margin-bottom: 15px; /* Adjust margins for smaller screens */
    }
}