/* =========================================================
   DomainScan Blog
   Premium Blog & Blog Single Page Stylesheet
   ========================================================= */


/* =========================================================
   Grid and Gutter Extensions
   ========================================================= */

.g-6,
.gx-6 {
    --bs-gutter-x: 3.5rem;
}

.g-6,
.gy-6 {
    --bs-gutter-y: 3.5rem;
}

.g-8,
.gx-8 {
    --bs-gutter-x: 4.5rem;
}

.g-8,
.gy-8 {
    --bs-gutter-y: 4.5rem;
}


/* =========================================================
   Blog Hero
   ========================================================= */

.blog-hero {
    background:
        linear-gradient(
            135deg,
            rgba(77, 195, 255, 0.1) 0%,
            rgba(0, 123, 255, 0.05) 100%
        );

    border-radius: 20px;

    padding: 3.5rem 2rem;

    text-align: center;

    margin-bottom: 3rem;

    position: relative;

    overflow: hidden;

    border: 1px solid var(--border-color);
}

.blog-hero::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(77, 195, 255, 0.15) 0%,
            transparent 40%
        );

    pointer-events: none;
}

.blog-hero-title {
    font-size: 2.5rem;

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 0.75rem;

    letter-spacing: -0.5px;

    position: relative;

    z-index: 1;
}

.blog-hero-desc {
    font-size: 1.1rem;

    color: var(--text-muted);

    max-width: 650px;

    line-height: 1.7;

    margin: 0 auto;

    position: relative;

    z-index: 1;
}


/* =========================================================
   Blog Search Bar
   ========================================================= */

.blog-search-wrap {
    max-width: 520px;

    margin: 0 auto 3rem auto;
}

.blog-search-wrap .input-group {
    background-color: var(--sidebar-bg);

    border: 1px solid var(--border-color);

    border-radius: 30px;

    padding: 6px;

    box-shadow:
        0 4px 20px
        rgba(0, 0, 0, 0.02);

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.blog-search-wrap .input-group:focus-within {
    border-color: var(--primary-color);

    box-shadow:
        0 4px 25px
        rgba(0, 123, 255, 0.10);
}

.blog-search-icon {
    background-color: transparent !important;

    border: none !important;

    color: var(--text-muted);

    padding-left: 1.2rem;
}

.blog-search-input {
    border: none !important;

    background-color: transparent !important;

    box-shadow: none !important;

    color: var(--text-dark) !important;

    font-weight: 500;
}

.blog-search-input::placeholder {
    color: var(--text-muted);

    opacity: 0.8;
}

.btn-blog-search {
    background-color: var(--primary-color) !important;

    color: #fff !important;

    border-radius: 24px !important;

    padding: 0.5rem 1.5rem !important;

    font-weight: 600;

    border: none !important;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease !important;
}

.btn-blog-search:hover {
    opacity: 0.9;

    transform: translateY(-1px);
}


/* =========================================================
   Blog Cards
   ========================================================= */

.blog-card {
    background-color: var(--sidebar-bg);

    border: 1px solid var(--border-color);

    border-radius: 16px;

    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.03);

    transition:
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s ease;

    overflow: hidden;

    height: 100%;

    display: flex;

    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-6px);

    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.08);

    border-color: var(--primary-color);
}


/* Image */

.blog-card-img-wrap {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background-color: #f1f5f9;

    width: 100%;

    display: block;

    isolation: isolate;
}

.blog-card-img-wrap a {
    display: block;

    width: 100%;

    height: 100%;

    overflow: hidden;
}

.blog-card-img {
    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    display: block !important;

    object-fit: cover !important;

    transition:
        transform
        0.6s
        cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.blog-card:hover .blog-card-img {
    transform: scale(1.05);
}


/* Card Body */

.blog-card-body {
    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    flex-grow: 1;
}

.blog-card-meta {
    font-size: 0.8rem;

    color: var(--text-muted);

    margin-bottom: 0.75rem;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 500;
}

.blog-card-meta i {
    color: var(--primary-color);
}

.blog-card-title {
    font-size: 1.25rem;

    font-weight: 600;

    line-height: 1.4;

    margin-bottom: 0.75rem;

    color: var(--text-dark);
}

.blog-card-title a {
    color: inherit;

    text-decoration: none;

    transition:
        color
        0.2s ease;
}

.blog-card-title a:hover {
    color: var(--primary-color);
}

.blog-card-excerpt {
    font-size: 0.9rem;

    color: var(--text-muted);

    line-height: 1.6;

    margin-bottom: 1.5rem;

    display: -webkit-box;

    -webkit-line-clamp: 3;

    -webkit-box-orient: vertical;

    overflow: hidden;
}


/* Card Footer */

.blog-card-footer {
    margin-top: auto;

    padding-top: 1rem;

    border-top:
        1px solid
        var(--border-color);

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.blog-read-more {
    font-size: 0.85rem;

    font-weight: 600;

    color: var(--primary-color);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    transition:
        gap
        0.2s ease;
}

.blog-read-more i {
    transition:
        transform
        0.2s ease;
}

.blog-card:hover .blog-read-more i {
    transform: translateX(4px);
}


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

.blog-pagination {
    width: 100%;

    display: flex;

    justify-content: center;

    margin-top: 3rem;

    margin-bottom: 1rem;
}

.blog-pagination nav {
    width: auto;

    display: flex;

    justify-content: center;
}

.blog-pagination .pagination {
    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    padding: 0;

    margin: 0;

    list-style: none;
}

.blog-pagination .page-item {
    margin: 0;
}

.blog-pagination .page-link {
    min-width: 42px;

    height: 42px;

    padding: 0 13px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background-color: var(--sidebar-bg);

    color: var(--text-dark);

    border:
        1px solid
        var(--border-color);

    border-radius: 10px !important;

    font-size: 0.9rem;

    font-weight: 600;

    line-height: 1;

    text-decoration: none;

    box-shadow: none !important;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.blog-pagination .page-link:hover {
    background-color: var(--primary-color);

    border-color: var(--primary-color);

    color: #fff;

    transform: translateY(-1px);

    box-shadow:
        0 5px 12px
        rgba(0, 123, 255, 0.15) !important;
}

.blog-pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;

    border-color: var(--primary-color) !important;

    color: #fff !important;

    box-shadow:
        0 5px 14px
        rgba(0, 123, 255, 0.22) !important;

    cursor: default;
}

.blog-pagination .page-item.disabled .page-link {
    background-color: var(--sidebar-bg);

    border-color: var(--border-color);

    color: var(--text-muted);

    opacity: 0.45;

    cursor: default;

    pointer-events: none;

    transform: none;

    box-shadow: none !important;
}


/* Bootstrap pagination icons */

.blog-pagination .page-link svg {
    width: 16px !important;

    height: 16px !important;

    display: block;
}


/* =========================================================
   Blog Single Page
   ========================================================= */

.blog-single-container {
    max-width: 860px;

    margin: 0 auto;

    padding: 1.5rem 0;
}

.blog-single-header {
    text-align: center;

    margin-bottom: 2.5rem;
}

.blog-single-title {
    font-size: 2.6rem;

    font-weight: 700;

    line-height: 1.25;

    color: var(--text-dark);

    margin-bottom: 1.25rem;

    letter-spacing: -0.5px;
}

.blog-single-meta {
    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 1.5rem;

    color: var(--text-muted);

    font-size: 0.9rem;

    font-weight: 500;
}

.blog-single-meta-item {
    display: flex;

    align-items: center;

    gap: 0.4rem;
}

.blog-single-meta-item i {
    color: var(--primary-color);
}


/* Single Image */

.blog-single-img-wrap {
    border-radius: 16px;

    overflow: hidden;

    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.05);

    margin-bottom: 3rem;

    aspect-ratio: 21 / 10;

    border:
        1px solid
        var(--border-color);

    width: 100%;

    display: block;

    isolation: isolate;
}

.blog-single-img {
    width: 100% !important;

    height: 100% !important;

    max-width: 100% !important;

    display: block !important;

    object-fit: cover !important;
}


/* Single Content */

.blog-single-content {
    font-size: 1.05rem;

    line-height: 1.8;

    color: var(--text-dark);

    margin-bottom: 3rem;
}

.blog-single-content p {
    margin-bottom: 1.4rem;
}

.blog-single-content h2 {
    margin-top: 2.5rem;

    margin-bottom: 1rem;

    font-size: 1.75rem;

    font-weight: 700;

    color: var(--text-dark);
}

.blog-single-content h3 {
    margin-top: 2rem;

    margin-bottom: 0.85rem;

    font-size: 1.4rem;

    font-weight: 700;

    color: var(--text-dark);
}

.blog-single-content ul,
.blog-single-content ol {
    margin-bottom: 1.5rem;

    padding-left: 1.5rem;
}

.blog-single-content li {
    margin-bottom: 0.5rem;
}

.blog-single-content a {
    color: var(--primary-color);

    text-decoration: none;
}

.blog-single-content a:hover {
    text-decoration: underline;
}

.blog-single-content img {
    max-width: 100%;

    height: auto;

    border-radius: 12px;
}


/* =========================================================
   Sharing Section
   ========================================================= */

.blog-single-share {
    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 1rem;

    padding: 1.25rem 0;

    border-top:
        1px solid
        var(--border-color);

    border-bottom:
        1px solid
        var(--border-color);

    margin-bottom: 4rem;
}

.share-title {
    font-weight: 600;

    color: var(--text-dark);

    display: flex;

    align-items: center;

    gap: 0.5rem;
}

.share-buttons {
    display: flex;

    gap: 0.6rem;
}

.share-btn {
    width: 38px;

    height: 38px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff !important;

    text-decoration: none;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;

    font-size: 0.95rem;
}

.share-btn:hover {
    opacity: 0.9;

    transform: translateY(-2px);
}

.share-twitter {
    background-color: #1da1f2;
}

.share-facebook {
    background-color: #1877f2;
}

.share-linkedin {
    background-color: #0077b5;
}

.share-link {
    background-color: #6c757d;

    cursor: pointer;
}


/* =========================================================
   Back Button
   ========================================================= */

.back-to-blog-btn {
    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--text-muted);

    text-decoration: none;

    font-weight: 500;

    margin-bottom: 1.5rem;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

.back-to-blog-btn:hover {
    color: var(--primary-color);

    transform: translateX(-3px);
}


/* =========================================================
   Recent Posts
   ========================================================= */

.recent-posts-title {
    font-size: 1.6rem;

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 1.5rem;
}


/* =========================================================
   Dark Mode
   ========================================================= */

html.dark .blog-hero {
    background:
        linear-gradient(
            135deg,
            rgba(77, 195, 255, 0.05) 0%,
            rgba(0, 123, 255, 0.02) 100%
        );
}

html.dark .blog-card {
    box-shadow:
        0 10px 30px
        rgba(0, 0, 0, 0.2);
}

html.dark .blog-card:hover {
    box-shadow:
        0 20px 40px
        rgba(0, 0, 0, 0.4);
}

html.dark .blog-single-img-wrap {
    box-shadow:
        0 15px 35px
        rgba(0, 0, 0, 0.25);
}

html.dark .blog-pagination .page-link {
    background-color: var(--sidebar-bg);

    border-color: var(--border-color);

    color: var(--text-dark);
}

html.dark .blog-pagination .page-item.active .page-link {
    background-color: var(--primary-color) !important;

    border-color: var(--primary-color) !important;

    color: #fff !important;
}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991.98px) {

    .blog-hero {
        padding: 3rem 1.5rem;
    }

    .blog-hero-title {
        font-size: 2.1rem;
    }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767.98px) {

    .blog-hero {
        border-radius: 16px;

        padding: 2.3rem 1.25rem;

        margin-bottom: 2rem;
    }

    .blog-hero-title {
        font-size: 1.8rem;
    }

    .blog-hero-desc {
        font-size: 0.95rem;
    }

    .blog-search-wrap {
        margin-bottom: 2rem;
    }

    .blog-card-body {
        padding: 1.25rem;
    }

    .blog-card-title {
        font-size: 1.15rem;
    }

    .blog-single-title {
        font-size: 1.8rem;
    }

    .blog-single-meta {
        gap: 0.8rem 1rem;
    }

    .blog-single-share {
        align-items: flex-start;

        flex-direction: column;
    }

    .blog-pagination {
        margin-top: 2.5rem;
    }

    .blog-pagination .pagination {
        gap: 5px;
    }

    .blog-pagination .page-link {
        min-width: 38px;

        height: 38px;

        padding: 0 10px;

        font-size: 0.85rem;

        border-radius: 9px !important;
    }

}


/* =========================================================
   Very Small Screens
   ========================================================= */

@media (max-width: 420px) {

    .blog-pagination .page-link {
        min-width: 36px;

        height: 36px;

        padding: 0 8px;
    }

}