.blogmain-row {display: flex;flex-wrap: wrap;margin: 30px 0;}
.blogmain-row .right-blog-ui {width: 400px;padding-left: 20px;}
.blogmain-row .blog-list {width: calc(100% - 400px);}
.search-widget {position: relative;margin: 0 0 20px;}
.search-widget input {background: #fff;color: #000;height: 50px;border-radius: 10px;border: 1px solid var(--clr-primary-text);width: 100%;padding: 10px 110px 10px 10px;}
.search-widget button {width: 100px;text-align: center;height: 50px;box-shadow: none;background: var(--clr-primary);color: var(--clr-primary-font);display: inline-block;position: absolute;right: 0;top: 0;border: none;border-radius: 0 10px 10px 0px;}
.recent-post {border-radius: 14px;background-image: linear-gradient(0deg, #ffffff 0%, #dfedff 100%, #dfedff 100%);padding: 15px;margin: 0 0 15px;border: 1px solid #dfedff;}
.recent-post h4 {font-size: 18px;font-weight: 700;color: var(--clr-primary-text);position: relative;width: 100%;display: block;padding-right: 15px;margin: 0 0 15px;text-transform: uppercase;}
.recent-post ul li {font-weight: 500;padding: 10px 0px;font-size: 14px;}
.blog-row {display: flex;flex-wrap: wrap;gap: 30px 20px;}
.blog-col-3 {width: calc(33.33% - 14px);}
.blog-box {height: 100%;overflow: hidden;}
.blog-box figure {height: 300px;padding:0;border-radius: 10px;overflow: hidden;position: relative;}
span.blurspan-bg {position: absolute;width: 100%;height: 100%;z-index: 0;filter: blur(9px) brightness(0.9);}
figcaption.fig-blog-detail {padding: 15px 0 0;display: flex;flex-direction: column;min-height: calc(100% - 300px);line-height: 1.3;}
.blog-box figure img {height: 100%;width: 100%;object-fit: contain;margin: auto;display: block;position: relative;z-index: 1;}
.fig-blog-detail .name {display: inline-block;width: 100%;font-size: 16px;line-height: 1.2;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 700;}
.short-blog-content {width: 100%;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;margin: 7px 0px 0px;text-align: left;font-size: 0.95em;font-weight: 500;}
.post-authour {font-weight: 500;margin: 7px 0px 0;flex: 1;}
.post-authour p {margin: 0;}
.post-authour p a {text-decoration: underline !important;color: var(--clr-secondary-text);font-weight: 500;display: inline-block;}
.detail-blog * {font-family: inherit !important;line-height: 1.4 !important;margin: 0 !important;}
.detail-blog h1, .detail-blog h2, .detail-blog h3, .detail-blog h4, .detail-blog h5, .detail-blog h6 {margin: 0 0 10px !important;}
.detail-blog p, .detail-blog li {margin: 0 0 10px !important;}
.detail-blog {padding: 30px;background: #fff;border-radius: 15px;box-shadow: 0 0 5px #ddd;}
.group-form-space.blog-comment-session {padding: 30px;background: #fff;border-radius: 15px;box-shadow: 0 0 5px #ddd;}
.group-form-space.blog-comment-session .header-title.sm-header-title h3 {font-size: 18px;line-height: 1.3;margin: 0;padding: 0 !important;color: var(--clr-primary-text)}
.group-form-space.blog-comment-session .header-title.sm-header-title {padding: 0 0 15px;margin: 0 0;border: none;}
.blogprevnext {display: flex;align-items: center;justify-content: space-between;margin: 20px 0px;}
.blog-list .cs-pagination nav {width: 100%;}
.blog-list .cs-pagination nav .flex.justify-between {display: flex;justify-content: space-between;}
.blogprevnext a, .blog-list .cs-pagination a, .blog-list .cs-pagination span {display: inline-flex;border: 1px solid var(--clr-primary-text) !important;color: var(--clr-primary-text);padding: 10px 20px;align-items: center;gap: 4px;line-height: 1.3;border-radius: 5px;font-weight: 600;transition: all 0.3s ease;}
.blogprevnext a:hover, .blog-list .cs-pagination a:hover {color: var(--clr-primary-font)!important;background: var(--clr-primary)!important;}
.detail-blog .head-blog .post-img {padding: 0;width: 100%;border-radius: 15px;overflow: hidden;position: relative;display: flex;align-items: center;justify-content: center;border: 1px solid #d9d9d9;}
.detail-blog .head-blog .post-img img {position: relative;z-index: 1;}
.detail-blog .head-blog .post-authour {width: 100%;padding-top: 20px;}
.detail-blog .head-blog .post-authour h1 {font-size: 28px;line-height: 1.3;}
@media screen and (max-width: 1400px) {
    .blogmain-row .right-blog-ui {width: 300px;}
    .blogmain-row .blog-list {width: calc(100% - 300px);}
    .recent-post ul li, .post-authour {font-size: 13px;}
    .blog-box {font-size: 14px;}
    .btn-cs-ui .btn-prim {padding: 0px 13px;font-size: 13px;line-height: 33px;height: 33px;}
    .blog-box figure {height: 250px;}
    figcaption.fig-blog-detail {min-height: calc(100% - 250px);padding: 10px 0 0;}
    .recent-post h4 {font-size: 16px;}
    .detail-blog .head-blog .post-authour h1 {font-size: 24px;}
}
@media screen and (max-width: 1199px) {
    .blogmain-row .right-blog-ui {width: 260px;}
    .blogmain-row .blog-list {width: calc(100% - 260px);}
    .recent-post {padding: 10px;border-radius: 5px;}
    .recent-post h4 {padding: 0;margin-bottom: 10px;}
    .detail-blog .head-blog .post-authour h1 {font-size: 21px;}
}
@media screen and (max-width: 1100px) {
    .blog-col-3 {width: calc(50% - 10px);}
    .search-widget button {width: 60px;height: 40px;font-size: 13px;}
    .search-widget input {height: 40px;}
    .blog-box figure {height: 220px;}
    figcaption.fig-blog-detail {min-height: calc(100% - 220px);}
    .blogmain-row .right-blog-ui {width: 100%;padding: 10px 0 0;}
    .blogmain-row .blog-list {width: 100%;}
    .detail-blog {padding: 15px;border-radius: 10px;}
}
@media screen and (max-width: 766px) {
    .blog-row {gap: 15px 10px;}
    .blogmain-row {margin: 15px 0;}
    .detail-blog .head-blog .post-authour h1 {font-size: 18px;}
    .group-form-space.blog-comment-session {padding: 10px;border-radius: 5px;}
    .blog-box figure {height: 145px;}
    figcaption.fig-blog-detail {min-height: calc(100% - 145px);padding: 7px 0 0;}
}
@media screen and (max-width: 480px) {
    .recent-post ul li, .post-authour {font-size: 12px;}
    .short-blog-content {font-size: 11px;margin: 7px 0;}
    .btn-cs-ui .btn-prim {padding: 0px 9px;font-size: 12px;line-height: 30px;height: 30px;}
    .fig-blog-detail .name {font-size: 15px;}
    .detail-blog .head-blog .post-authour h1 {font-size: 14px;margin: 0 0 5px !important;}
    .blogprevnext a, .blog-list .cs-pagination a, .blog-list .cs-pagination span {font-size: 14px;padding: 7px 12px;}
    .post-authour {margin: 2px 0 0;line-height: 1.3;}
    .fig-blog-detail .name {font-size: 13px;line-height: 1.3;}
}
@media screen and (max-width: 374px) {
}