/* Hide the "Previous" button */
.pagination .flex-1 a:first-child,
.pagination .flex-1 a[rel="prev"] {
    display: none;
}

/* Hide the "Next" button */
.pagination .flex-1 a:last-child,
.pagination .flex-1 a[rel="next"] {
    display: none;
}

/* Hide the "Previous" button based on the text */
.pagination a[rel="prev"],
.pagination a:contains("« Previous") {
    display: none;
}

/* Hide the "Next" button based on the text */
.pagination a[rel="next"],
.pagination a:contains("Next »") {
    display: none;
}

/* Hide the "Showing x to y of z results" text */
.pagination .sm\:flex-1 > div:first-child {
    display: none;
}

[aria-current="page"] .relative {
    color: white;
    background-color: #1c3372 !important;
    /* Bootstrap primary color, adjust as needed */
    border-color: #1c3372 !important;
}

[aria-current="page"] .relative:hover {
    background-color: #1c3372 !important;
    /* Bootstrap primary hover color, adjust as needed */
    border-color: #1c3372 !important;
}

/* General Theme & Reset */
#blog-top-banner {
    background-color: #f8f9fa; /* optional light background */
}

#blog-top-banner h1 {
    color: #1c3372; /* theme color */
    line-height: 1.2;
    font-weight: bold;
}

#blog-top-banner p {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

#blog-top-banner .banner-img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    width: 50%;
}

/* Breadcrumbs Styling */
#breadcrumb-container {
    padding-top: 1rem;
}

#breadcrumb-container .breadcrumb {
    background-color: transparent;
    padding-left: 0;
    margin-bottom: 0;
    font-size: 1rem;
}

#breadcrumb-container .breadcrumb-item a {
    color: #1c3372;
    text-decoration: none;
}

#breadcrumb-container .breadcrumb-item {
    padding-bottom: 0;
}

#breadcrumb-container .breadcrumb-item.active {
    color: dimgrey !important;
}

/* Devices: Extra Small (Phones) */
@media (max-width: 575.98px) {
    #blog-top-banner > div {
        flex-direction: column-reverse;
    }

    #blog-top-banner > div > #blog-top-text {
        margin-bottom: 0 !important;
    }

    #blog-top-banner h1 {
        font-size: 2rem;
        text-align: center;
    }

    #blog-top-banner p {
        font-size: 1.2rem !important;
        text-align: center;
        margin-bottom: 0 !important;
    }

    #blog-top-banner .banner-img {
        width: 80%;
        margin-top: 1rem;
    }

    #breadcrumb-container .breadcrumb {
        font-size: 0.85rem;
        justify-content: center;
    }
}

/* Devices: Small (Tablets Portrait) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #blog-top-banner h1 {
        font-size: 2rem;
        text-align: center;
        margin-top: 1.5rem;
    }

    #blog-top-banner p {
        font-size: 1.2rem !important;
        text-align: center;
    }

    #blog-top-banner .banner-img {
        width: 70%;
        margin-top: 1rem;
    }
}

/* Devices: Medium (Tablets Landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #blog-top-banner h1 {
        font-size: 2.2rem;
    }

    #blog-top-banner p {
        font-size: 1.3rem;
    }

    #blog-top-banner .banner-img {
        width: 60%;
    }
}

/* Devices: Large (Laptops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #blog-top-banner h1 {
        font-size: 2.5rem;
    }

    #blog-top-banner p {
        font-size: 1.5rem;
    }

    #blog-top-banner .banner-img {
        width: 55%;
    }
}

/* Devices: Extra Large (Desktops & Large Screens) */
@media (min-width: 1200px) {
    #blog-top-banner h1 {
        font-size: 3rem;
    }

    #blog-top-banner p {
        font-size: 1.7rem;
    }

    #blog-top-banner .banner-img {
        width: 50%;
    }
}

/* Devices: Extra Extra Large (Ultra-wide monitors) */
@media (min-width: 1600px) {
    #blog-top-banner h1 {
        font-size: 3rem;
    }

    #blog-top-banner p {
        font-size: 1.7rem;
    }

    #blog-top-banner .banner-img {
        width: 40%;
    }
}



/* Your Updated CSS */
#new-blog-div .blog-card {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    margin-bottom: 1.8rem;
    overflow: hidden;
    background: #fff;
    transition: 0.3s ease-in-out;
}

#new-blog-div .blog-card .img-anchor {
    max-width: 220px;
    overflow: hidden;
    display: flex;
}

#new-blog-div .blog-img {
    height: 100%;
    width: 100%;
    object-fit: fill;
    transition: transform 0.3s ease;
}

#new-blog-div .blog-card:hover img {
    transform: scale(1.1);
}

#new-blog-div .blog-content {
    padding: 15px;
    width: 100%;
}

#new-blog-div .blog-title {
    font-size: 1.2rem;
    font-weight: bold;
}

#new-blog-div .blog-title:hover a {
    color: #1c3372 !important;
}

.category-tag {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 0.6rem;
    margin-bottom: 0.7rem;
}

.category-tag small {
    background-color: #e0ebf4; /* Light tint of #065b91 */
    color: #065b91; /* Theme color for text */
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: 0.5rem;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
}

#new-blog-div #bodySection table{
    width: 100% !important;
    table-layout: none;
}

#new-blog-div .meta {
    font-size: 0.5rem;
    color: #777;
    padding: 0.5rem 0px;
}

#new-blog-div .sidebar-block {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    background-color: #fff;
    border-radius: 8px;
}

#new-blog-div .sidebar-block #blog-search-btn {
    padding: 8px 20px;
}

#new-blog-div .sidebar-title {
    font-size: 1.2rem;
    border-left: 4px solid #1c3372;
    color: #1c3372;
    padding-left: 10px;
}

#new-blog-div .sidebar-block strong {
    display: block;
    font-size: 1rem;
    color: #333;
    margin-block: 0.5rem;
}

#new-blog-div .sidebar-block small i {
    color: #c74f11;
}

#recent-blogs a strong {
    color: #333;
    transition: color 0.2s ease;
    text-decoration: none;
}

#recent-blogs a:hover strong {
    color: #1c3372 !important;
}

#recent-blogs .custom-hr {
    border: 0;
    border-top: 1px solid #777;
    margin: 0.75rem 0;
    margin-bottom: 1.5rem;
}

/* Container spacing */
.pagination-wrapper {
    margin-top: 1.5rem;
    margin-bottom: 0;
}

/* Force pagination into a single row and center it */
.pagination-wrapper .pagination {
    display: flex;
    flex-wrap: nowrap;
    /* Prevent wrapping */
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

/* Prevent pagination items from shrinking and add spacing */
.pagination-wrapper .pagination li {
    flex-shrink: 0;
    margin: 0 4px;
}

/* Page link styles */
.pagination-wrapper .page-link {
    color: #1c3372;
    border: 1px solid #1c3372;
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 0.9rem;
    transition: 0.3s;
    min-width: 36px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect */
.pagination-wrapper .page-link:hover {
    background-color: #1c3372;
    color: #fff;
    border-color: #1c3372;
}

/* Active/current page */
.pagination-wrapper .page-item.active .page-link {
    background-color: #1c3372;
    color: #fff;
    border-color: #1c3372;
}

/* Disabled state */
.pagination-wrapper .page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #eee;
    color: #888;
    border-color: #ccc;
}

/* SVG icon sizing and alignment */
.pagination-wrapper svg {
    width: 16px;
    height: 16px;
    vertical-align: middle;
    display: inline-block;
}

/* Hide Laravel's default summary text (e.g. "Showing 1 to 10 of 50 results") */
.pagination-wrapper > nav > div:first-child {
    display: none;
}

/* Extra small devices (phones) */
@media (max-width: 575.98px) {
    #new-blog-div .blog-card {
        flex-direction: column;
        align-items: center;
    }

    #new-blog-div .blog-card .img-anchor {
        max-width: 100%;
        justify-content: center;
    }

    #new-blog-div .blog-img {
        height: auto;
    }

    #new-blog-div .blog-content {
        padding: 10px;
        /* text-align: center; */
    }

    #new-blog-div .blog-title {
        font-size: 1rem;
    }

    #new-blog-div .meta {
        font-size: 0.85rem;
    }

    #new-blog-div .sidebar-title {
        font-size: 1.05rem;
    }

    .pagination-wrapper .page-link {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* Small devices (tablet portrait) */
@media (min-width: 576px) and (max-width: 767.98px) {
    #new-blog-div .blog-card .img-anchor {
        max-width: 100%;
    }

    #new-blog-div .blog-title {
        font-size: 1.05rem;
    }

    #new-blog-div .meta {
        font-size: 0.85rem;
    }

    .pagination-wrapper .page-link {
        padding: 6px 14px;
    }
}

/* Medium devices (tablet landscape) */
@media (min-width: 768px) and (max-width: 991.98px) {
    #new-blog-div .blog-card .img-anchor {
        max-width: 200px;
    }

    #new-blog-div .blog-title {
        font-size: 1.1rem;
    }

    #new-blog-div .meta {
        font-size: 0.9rem;
    }
}

/* Large devices (laptops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    #new-blog-div .blog-card .img-anchor {
        max-width: 220px;
    }

    #new-blog-div .blog-title {
        font-size: 1.15rem;
    }

    #new-blog-div .meta {
        font-size: 0.95rem;
    }
}

/* Extra large devices (desktops and wider) */
@media (min-width: 1200px) {
    #new-blog-div .blog-card .img-anchor {
        max-width: 240px;
    }

    #new-blog-div .blog-title {
        font-size: 1.2rem;
    }

    #new-blog-div .meta {
        font-size: 1rem;
    }
}

/* side bar blog categories section */

/* Sidebar Container */
#blog-categories.sidebar-block {
    max-height: 400px; /* Fixed height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Title */
#blog-categories .sidebar-title {
    font-size: 1.1rem;
    border-left: 4px solid #1c3372;
    color: #1c3372;
    padding-left: 10px;
    margin-bottom: 1rem;
}

/* Scrollable Category Body */
#blog-categories .blog-cat-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px; /* space for scrollbar */
}

/* Hide scrollbar in WebKit browsers */
#blog-categories .blog-cat-body::-webkit-scrollbar {
    width: 6px;
}

#blog-categories .blog-cat-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

/* Category List */
#blog-categories .blog-side-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#blog-categories .blog-side-card li {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
    font-size: 1rem;
    color: #333;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    cursor: pointer;
}

#blog-categories .blog-side-card li i {
    margin-right: 8px;
    color: #1c3372;
}

#blog-categories .blog-side-card li > a {
    color: #333 !important;
    font-weight: 500;
}

/* Hover Effect */
#blog-categories .blog-side-card li:hover {
    background-color: #f1f9ff;
}

#blog-categories .blog-side-card li:hover > a {
    color: #1c3372 !important;
}

/* Scrollable Category Body */
#blog-categories .blog-cat-body {
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 5px; /* space for scrollbar */
}

/* Custom Scrollbar for WebKit (Chrome, Safari, Edge) */
#blog-categories .blog-cat-body::-webkit-scrollbar {
    width: 6px;
}

#blog-categories .blog-cat-body::-webkit-scrollbar-thumb {
    background-color: #f26521; /* Your custom color */
    border-radius: 4px;
}

#blog-categories .blog-cat-body::-webkit-scrollbar-track {
    background-color: #f1f1f1; /* Light track color */
}

/* For Firefox */
#blog-categories .blog-cat-body {
    scrollbar-width: thin;
    scrollbar-color: #f26521 #f1f1f1;
}

.btn-orange-outline {
    background-color: transparent;
    color: #f26522;
    border: 1px solid #f26522;
    box-shadow: 3px 2px 0px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    padding: 0.4rem 0.7rem;
    font-weight: 500;
    text-align: center;
    font-size: 0.9rem; /* Slightly smaller font */
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover effect */
.btn-orange-outline:hover {
    background-color: #f26522;
    color: #fff;
    box-shadow: 4px 3px 10px rgba(0, 0, 0, 0.4);
}

/* Fixed button width that adapts but stays aligned */
.btn-fixed {
    min-width: 135px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    width: max-content;
}

/* Placeholder to maintain spacing when only one button exists */
.btn-placeholder {
    min-width: 135px;
    height: 42px;
    visibility: hidden;
}

/* Responsive spacing and layout */
@media (max-width: 768px) {
    .btn-fixed {
        min-width: 100%;
        width: 100%;
        justify-content: center;
        font-size: 0.85rem;
        padding: 0.5rem 0.75;
    }

    .btn-placeholder {
        display: none;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .btn-fixed {
        min-width: 140px;
        font-size: 0.88rem;
    }
}

@media (min-width: 1025px) {
    .btn-fixed {
        min-width: 150px;
        font-size: 0.9rem;
    }
}



/*======================= Pagination ============================== */

.custom-pagination > nav > div:nth-of-type(2) > div:nth-of-type(1) {
    display: none !important;
}

.custom-pagination .pagination .page-link {
    color: #1c3372;
}

.custom-pagination .active>.page-link {
    border-color: #1c3372 !important;
    color: #fff !important;
}

/* Devices: Small (Tablets Portrait) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .custom-pagination > nav > div:nth-of-type(2) {
        display: block !important;
    }
}

@media (max-width: 575px) {
    .custom-pagination > nav > div:nth-of-type(1) > ul > li > a {
        color: #1c3372 !important;
    }

    .custom-pagination > nav > div:nth-of-type(1) {
        display: block !important;
    }

    .custom-pagination > nav > div:nth-of-type(1) > ul > li {
        display: block !important;
    }
}