.posts__list .post {
    margin-bottom: 1.5rem;
    border-radius: calc(var(--border-radius)*2);
    box-shadow: var(--theme-box-shadow);
    border: 1px solid color-mix(in oklab, var(--theme-body-2) 90%, var(--theme-divider-clr) 10%);
    background-color: color-mix(in oklab, var(--theme-body) 94%, white 6%);
}

.posts__list .post__thumbnail {
    width: 100%;
    /* height: 260px; */
    overflow: hidden;
    display: block;
    border-radius: calc(var(--border-radius)*1.875);
    aspect-ratio: 3/2;
}

.posts__list .post__thumbnail img {
    width: 100%;
    height: 100%;
    object-position: center;
    object-fit: cover;
    transition: transform .5s ease;
}

.posts__list .post__thumbnail:hover img {
    transform: scale(110%);
}

.posts__list .content {
    padding: .875rem;
}

.posts__list .content__header {
    margin-top: .25rem;
    margin-bottom: .625rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .875rem;
    font-weight: 300;
    color: color-mix(in oklab, var(--theme-body-2) 75%, var(--theme-divider-clr) 25%);
    letter-spacing: var(--letter-spacing);
    line-height: 1;
}

.posts__list .content__header a,
.posts__list .content__header div {
    color: color-mix(in oklab, var(--theme-p-clr) 75%, var(--theme-divider-clr) 25%);
}

.posts__list .content__header .author:hover {
    color: var(--hover-clr);
    text-decoration: underline;
}

.posts__list .content h3 {
    color: var(--theme-sub-heading-clr);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: .5em;
    transition: all 0.15s ease-in-out;
    display: inline-block;
    letter-spacing: var(--letter-spacing);
    line-height: 1.325;
}

.posts__list .content h3:hover {
    color: var(--primary-clr);
}

.posts__list .content p {
    font-size: 1rem;
    color: var(--theme-p-clr);
    line-height: 1.625;
    letter-spacing: .25px;
    font-weight: 400;
    margin-bottom: .75rem;
}

.posts__list .categories .category:hover {
    filter: brightness(120%);
}

/* ============================================== */
/* widgets card styling */
/* ============================================== */
/* .widget {
    margin-bottom: 2.5rem;
    padding: 1.5rem;
    border-radius: calc(var(--border-radius)*1.5);
    border: 1px solid color-mix(in oklab, var(--theme-layout) 91%, var(--theme-divider-clr) 9%);
    background-color: var(--theme-footer);
} */

/* Header styling */
/* .widget header {
    margin-bottom: .75rem;
} */

.widget header h5 {
    margin: 0;
    font-size: 1.25rem;
    color: var(--theme-heading-clr);
    font-weight: 500;
    letter-spacing: .25px;
    text-align: center;
}

/* Form styling */
.widget.search-card .search-form {
    display: flex;
    flex-direction: column;
}

/* Form group styling */
.widget.search-card .form-group {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Input styling */
.widget.search-card .form-group input[type="search"] {
    flex-grow: 1;
    padding: .75rem .875rem;
    border: 1px solid color-mix(in oklab, var(--theme-body) 90%, var(--theme-divider-clr) 18%);
    background-color: var(--theme-layout);
    border-radius: calc(var(--border-radius)*1.375);
    font-size: clamp(.875rem, 3vw, 1rem);
    color: var(--theme-p-clr);
    transition: border .25s ease-in-out,
        color .25s ease-in-out;
}

.widget.search-card .form-group input[type="search"]:focus {
    border-color: var(--primary-clr);
    outline: none;
    color: var(--theme-sub-heading-clr);
}

/* Button styling */
.widget.search-card .form-group button.submit {
    --padding: 0 16px;
    --height: 46px;
    border: none;
}

.widget.search-card .form-group button.submit i {
    font-size: 16px;
}

.widget.search-card .form-group button.submit:hover {
    background-color: var(--hover-clr);
}

/* ================== */
/* Download Code Card */
.widget a.bttn {
    display: block;
    width: 60%;
    margin: auto;
}

/* ===================== */
/* popular card widget */
.widget__post {
    margin-bottom: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid color-mix(in oklab, var(--theme-layout) 85%, var(--theme-divider-clr) 15%);
}

.widget__post:last-child {
    border: unset;
    margin-bottom: 0;
    padding-bottom: .375rem;
}

.widget__post .title {
    color: var(--theme-sub-heading-clr);
    margin-bottom: .5em;
    transition: color .15s ease;
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: 600;
}

.widget__post .title:hover {
    color: var(--primary-clr);
}

.widget__post .sub__content {
    display: flex;
    align-items: center;
    gap: .375rem;
    color: color-mix(in oklab, var(--theme-layout) 75%, var(--theme-divider-clr) 25%);
    font-size: .625rem;
    font-weight: 600;
    /* letter-spacing: var(--letter-spacing); */
    line-height: 1;
}

.widget__post .sub__content a,
.widget__post .sub__content div {
    font-size: .825rem;
    font-weight: 300;
    color: var(--theme-p-clr);
}

.widget__post .sub__content i {
    font-size: .75rem;
}

.widget__post .sub__content .author:hover {
    color: var(--primary-clr);
    text-decoration: underline;
}

/* ===================== */
/* Ad Widget Styles */
.ad__widget {
    padding: 0;
    max-height: 800px;
    overflow: hidden;
    border-radius: calc(var(--border-radius)*1.5);
    margin-top: 2rem;
}

.ad__widget .ad__link {
    max-height: 340px;
    display: block;
    width: 100%;
}


.ad__widget .ad__link img {
    width: 100%;
    height: fit-content;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
    /* smooth scale */
}

.ad__widget .ad__link:hover img {
    transform: scale(1.05);
    /* zoom in on hover */
}


.ad__widget .ad_script_con {
    width: 100%;
    max-height: 350px;
    height: 100%;

}

.widget:not(.search-card, .ad__widget) {
    border-radius: calc(var(--border-radius)*2);
    margin-top: clamp(1rem, 4vw, 1.75rem);
    padding: 1.25rem;
    border: 1px solid color-mix(in oklab, var(--theme-layout) 87%, var(--theme-divider-clr) 13%);
    background-color: var(--theme-layout);
}

.widget header h5 {
    color: var(--primary-clr);
    font-size: .9375rem;
    text-align: start;
    margin-top: .125rem;
    margin-bottom: 1.125rem;
    font-weight: 600;
    position: relative;
}

/* ======================== */
/* Categories widget Styles */
.cats__widget .cats__con {
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: .75rem;
    margin-top: 1.125rem;
}

.cats__widget .cat {
    background-color: unset;
    padding: 4px 12px;
    text-decoration: none;
    font-size: .875rem;
    border: 1px solid var(--theme-p-clr);
    color: var(--theme-p-clr);
    border-radius: var(--border-radius);
    transition: border-color .2s ease-in-out;
    letter-spacing: var(--letter-spacing);
}

.cats__widget .cat:hover {
    color: var(--theme-heading-clr);
    border-color: var(--primary-clr);
}

/* ================== */
/* Tags widget Styles */
.tags__con {
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: .625rem;
    margin-top: 1.125rem;
}

.tags__con .tag {
    background-color: var(--theme-body);
    padding: .125rem .625rem;
    text-decoration: none;
    font-size: .875rem;
    border: 1px solid color-mix(in oklab, var(--theme-body) 89%, var(--theme-divider-clr) 11%);
    color: var(--theme-sub-heading-clr);
    border-radius: 60px;
    letter-spacing: var(--letter-spacing);
}

.tags__con .tag::before {
    content: "#";
    color: var(--primary-clr);
}

.tags__con .tag:hover {
    color: var(--primary-clr);
}

/* ================================ */
/* No Products Found */
/* ================================ */
.no__products {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    text-align: center;
    padding: 1.5rem;
    border-radius: 14px;
    box-shadow: var(--theme-box-shadow);
    border: 1px solid color-mix(in oklab, var(--theme-bg-2) 94%, var(--theme-divider-clr) 6%);
    background-color: color-mix(in oklab, var(--theme-body) 97%, white 3%);
    margin-bottom: 3rem;
}

.no__products .img__con {
    margin: auto;
    text-align: center;
    margin-bottom: 20px;
}

.no__products .img__con img {
    width: 100%;
    max-height: 300px;
    display: block;
}

.no__products .content h4 {
    font-size: 1.5rem;
    color: var(--theme-heading-clr);
    /* Darker color for the text */
    margin: 0;
    font-weight: 600;
    transition: var(--color-trans);
}

.pagination {
    gap: .625rem;
    margin: 3.5rem;
    margin-bottom: 4.5rem;
    padding: 0;
}

.pagination a {
    color: var(--theme-p-clr);
    background-color: color-mix(in oklab, var(--theme-body) 94%, var(--theme-divider-clr) 6%);
    border: unset;
    transition: all .15s ease-in-out;
    border-radius: 6px;
}

.pagination a:hover,
.pagination a:focus {
    background-color: color-mix(in oklab, var(--theme-body) 92%, var(--theme-divider-clr) 8%);
    transform: scale(1.07);
    color: var(--theme-heading-clr);
    box-shadow: unset;
}

.pagination a.active,
.pagination a.active:hover,
.pagination a.active:focus {
    background: var(--primary-clr);
    transform: unset;
    color: #fff;
}


/* Responsive styles */


@media only screen and (min-width: 1200px) {
    .posts__list aside {
        padding-inline-end: 1.5rem !important;
    }

    .posts__list .content h3 {
        font-size: 1.375rem;
    }
}

@media (max-width: 991px) {
    .tags_cats_con {
        margin-bottom: 4rem;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .posts__list .content h3 {
        font-size: 1.375rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .tags_cats_con {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }

    .tags_cats_con .cats__widget,
    .tags_cats_con .tags__widget {
        margin-top: 0;
    }
}