.blog-single .single-post-hero {
    width: 100%;
    min-height: 100px;
    position: relative;
}

.blog-single .single-post-hero:before {
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    right: 7px;
    width: 83.87px;
    height: 54.93px;
    background: linear-gradient(180deg, var(--tbl-color-secondary) 0%, var(--tbl-color-secondary-dark) 100%);
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2279%22%20height%3D%2252%22%20viewBox%3D%220%200%2079%2052%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2281.8719%22%20height%3D%2233.9394%22%20rx%3D%2216.9697%22%20transform%3D%22matrix%28-0.931528%20-0.363669%20-0.363669%200.931528%2083.604%2024.7695%29%22%20fill%3D%22url%28%23paint0_linear_1896_2417%29%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_1896_2417%22%20x1%3D%2240.936%22%20y1%3D%220%22%20x2%3D%2240.936%22%20y2%3D%2233.9394%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2346DDF3%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230C8CAE%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2279%22%20height%3D%2252%22%20viewBox%3D%220%200%2079%2052%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Crect%20width%3D%2281.8719%22%20height%3D%2233.9394%22%20rx%3D%2216.9697%22%20transform%3D%22matrix%28-0.931528%20-0.363669%20-0.363669%200.931528%2083.604%2024.7695%29%22%20fill%3D%22url%28%23paint0_linear_1896_2417%29%22/%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22paint0_linear_1896_2417%22%20x1%3D%2240.936%22%20y1%3D%220%22%20x2%3D%2240.936%22%20y2%3D%2233.9394%22%20gradientUnits%3D%22userSpaceOnUse%22%3E%3Cstop%20stop-color%3D%22%2346DDF3%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%230C8CAE%22/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}


.blog-single .single-post-hero .wrapper {
    background: #fff;
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%221312%22%20height%3D%22570%22%20viewBox%3D%220%200%201312%20570%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1210.26%200C1223.76%200%201234.7%2013.7202%201246.41%2020.4283C1248.08%2021.385%201249.91%2022.1592%201251.87%2022.7168L1294.55%2034.8352C1304.88%2037.7659%201312%2047.1924%201312%2057.9228V546C1312%20559.255%201301.25%20570%201288%20570H24C10.7452%20570%200%20559.255%200%20546V24C0%2010.7452%2010.7452%200%2024%200H1210.26Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%221312%22%20height%3D%22570%22%20viewBox%3D%220%200%201312%20570%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M1210.26%200C1223.76%200%201234.7%2013.7202%201246.41%2020.4283C1248.08%2021.385%201249.91%2022.1592%201251.87%2022.7168L1294.55%2034.8352C1304.88%2037.7659%201312%2047.1924%201312%2057.9228V546C1312%20559.255%201301.25%20570%201288%20570H24C10.7452%20570%200%20559.255%200%20546V24C0%2010.7452%2010.7452%200%2024%200H1210.26Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    mask-position: top right;
    mask-size: cover;
    width: 100%;
    height: 100%;
    mask-repeat: no-repeat;
    border-radius: 24px;
    padding: 24px;
}

.blog-single .single-post-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
}

.blog-single .single-post-hero .post-thumbnail {
    width: 624px;
    border-radius: 16px;
    display: block;
}

.blog-single .single-post-hero .post-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.blog-single .single-post-hero .post-details {
    width: 624px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.blog-single .single-post-hero .post-details .post-title {
    font-weight: 700;
    font-size: 24px;
    line-height: 48px;
    text-align: right;
    color: rgba(0, 0, 0, 1);
    padding: 0 16px;
}

.blog-single .single-post-hero .post-details .separator {
    background: rgba(var(--tbl-color-dark-rgb), 0.1);
    width: 100%;
    height: 1px;
    margin: 16px 0;
    display: block;
}

.blog-single .single-post-hero .post-details .post-excerpt {
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    text-align: justify;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-hero .post-details .post-tags {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}

.blog-single .single-post-hero .post-details .post-tags a {
    width: fit-content;
    height: 48px;
    border-radius: 12px;
    padding: 8px 16px;
    background: rgba(var(--tbl-color-dark-rgb), 0.03);
    font-weight: 400;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content {
    width: 100%;
    min-height: 100px;
    margin-top: 32px;
}

.blog-single .single-post-content .post-content {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    width: 870px;
}

.blog-single .single-post-content .post-content .the-content * {
    color: rgba(84, 81, 111, 1);
    font-weight: 400;
    font-size: inherit;
    line-height: 32px;
    text-align: justify;
}

.blog-single .single-post-content .post-content .the-content h1 {
    font-weight: 600;
    font-size: inherit;
    line-height: 48px;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content .post-content .the-content h2 * {
    font-weight: 600;
    font-size: inherit;
    line-height: 48px;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content .post-content .the-content h3 * {
    font-weight: 600;
    font-size: inherit;
    line-height: 48px;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content .post-content .the-content h4 * {
    font-weight: 600;
    font-size: inherit;
    line-height: 48px;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content .post-content .the-content h5 * {
    font-weight: 600;
    font-size: inherit;
    line-height: 48px;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content .post-content .the-content h6 * {
    font-weight: 600;
    font-size: inherit;
    line-height: 48px;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
}

.blog-single .single-post-content .post-single-sidebar {
    width: 427px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    min-height: 100% !important;
    height: 100% !important;
}


.blog-single .single-post-content .post-single-sidebar .post-sidebar-card {
    position: relative;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    right: 3px;
    width: 83.87px;
    height: 40.93px;
    background: rgba(var(--tbl-color-dark-rgb), 0.05);
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2284%22%20height%3D%2240%22%20viewBox%3D%220%200%2084%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.265647%2027.5945C-1.23643%2019.8928%203.78931%2012.4317%2011.4909%2010.9297L66.1693%200.265552C73.8709%20-1.23652%2081.332%203.78921%2082.8341%2011.4908C84.3362%2019.1925%2079.3104%2026.6536%2071.6088%2028.1556L16.9304%2038.8197C9.22879%2040.3218%201.76772%2035.2961%200.265647%2027.5945Z%22%20fill%3D%22%230A0731%22%20fill-opacity%3D%221%22/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2284%22%20height%3D%2240%22%20viewBox%3D%220%200%2084%2040%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M0.265647%2027.5945C-1.23643%2019.8928%203.78931%2012.4317%2011.4909%2010.9297L66.1693%200.265552C73.8709%20-1.23652%2081.332%203.78921%2082.8341%2011.4908C84.3362%2019.1925%2079.3104%2026.6536%2071.6088%2028.1556L16.9304%2038.8197C9.22879%2040.3218%201.76772%2035.2961%200.265647%2027.5945Z%22%20fill%3D%22%230A0731%22%20fill-opacity%3D%221%22/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

}


.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-row {
    background: rgba(var(--tbl-color-white-rgb), 1);
    width: 100%;
    height: 188px;
    mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22427%22%20height%3D%22188%22%20viewBox%3D%220%200%20427%20188%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M427%20144.092C427%20149.843%20422.92%20154.785%20417.274%20155.875L380.565%20162.959C373.029%20164.413%20367.016%20169.243%20363.787%20175.576C360.632%20181.763%20355.347%20188%20348.402%20188H12C5.37259%20188%200%20182.627%200%20176V12C0%205.37258%205.37258%200%2012%200H415C421.627%200%20427%205.37258%20427%2012V144.092Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22427%22%20height%3D%22188%22%20viewBox%3D%220%200%20427%20188%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cpath%20d%3D%22M427%20144.092C427%20149.843%20422.92%20154.785%20417.274%20155.875L380.565%20162.959C373.029%20164.413%20367.016%20169.243%20363.787%20175.576C360.632%20181.763%20355.347%20188%20348.402%20188H12C5.37259%20188%200%20182.627%200%20176V12C0%205.37258%205.37258%200%2012%200H415C421.627%200%20427%205.37258%20427%2012V144.092Z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: bottom right;
    mask-size: cover;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    box-sizing: border-box;
    border-radius: 12px;
    padding: 8px;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-thumbnail {
    width: 140px;
    height: auto;
    display: block;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-thumbnail img {
    width: 140px;
    height: 121px;
    border-radius: 8px;
    display: block;
    object-fit: cover;

}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-details {
    width: 255px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    padding: 6px 0 6px 6px;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-title {
    font-weight: 600;
    font-size: 18px;
    line-height: 160%;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 245px;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-excerpt {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    text-align: justify;
    color: rgba(var(--tbl-color-dark-rgb), 0.5);
    margin-top: 8px;

}


.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .separator {
    background: rgba(var(--tbl-color-dark-rgb), 0.1);
    width: 100%;
    height: 1px;
    margin: 12px 0;
    display: block;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card span.published-date {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card span.published-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 100%;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 0.5);
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card span.date {
    font-weight: 400;
    font-size: 16px;
    line-height: 100%;
    text-align: right;
    color: rgba(var(--tbl-color-dark-rgb), 1);
    margin-top: 6px;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-footer {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-footer a {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px;
    text-align: right;
    color: var(--tbl-color-dark);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 16px;
    gap: 4px;
    width: fit-content;
    height: 56px;
    left: 76px;
    top: 1025px;
    background: rgba(var(--tbl-color-dark-rgb), 0.03);
    border-radius: 12px;
    transition: ease-in-out 200ms;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-footer a:hover {
    color: var(--tbl-color-primary);
    background: rgba(var(--tbl-color-primary-rgb), 0.1);
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-footer a svg path {
    transition: ease-in-out 200ms;
}

.blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-footer a:hover svg path {
    fill: var(--tbl-color-primary);
}

.blog-single .single-post-content .post-single-sidebar .sticky-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 20px;
}

@media screen and (max-width: 1024px) {
    .blog-single .single-post-hero::before {
        display: none;
    }

    .blog-single .single-post-hero .wrapper {
        padding: 16px;
        mask-image: unset;
        border-radius: 12px;
    }

    .blog-single .single-post-row {
        flex-direction: column-reverse;
    }

    .blog-single .single-post-hero .post-details {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
    }

    .blog-single .single-post-hero .post-thumbnail {
        width: 100%;
        border-radius: 16px;
        display: block;
        margin-bottom: 8px;
    }

    .blog-single .single-post-hero .post-details .post-title {
        font-weight: 700;
        font-size: 20px;
        line-height: 38px;
        text-align: right;
        color: rgba(0, 0, 0, 1);
        padding: 0 8px;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card::before {
        display: none;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-row {
        mask-image: unset;
        position: relative;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card {
        position: relative;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-thumbnail {
        width: 30%;
        height: auto;
        display: block;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-thumbnail img {
        width: 100%;
        height: auto;
        border-radius: 8px;
        display: block;
        object-fit: cover;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-details {
        width: 66%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        padding: 6px 0 6px 6px;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .separator {
        background: rgba(var(--tbl-color-dark-rgb), 0.1);
        width: 95%;
        height: 1px;
        margin: 12px 0;
        display: block;
        position: absolute;
        right: 0;
        top: 51%;
        inset-inline: 10px;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-footer {
        width: 93%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 10px;
        z-index: 10;
        right: 16px;
        gap: 16px;
    }

    .blog-single .single-post-content .post-single-sidebar {
        width: 100%;
    }

    .blog-single .single-post-content .post-content {
        padding: 16px;
        width: 100%;
        margin-top: 16px;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-title {
        max-width: 200px;
    }

    .blog-single .single-post-content .post-single-sidebar .post-sidebar-card .sidebar-card-excerpt {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 200px;
    }

    .blog-single .single-post-content{
        margin-top: 16px;
    }
}