.blog-posts { position: relative; } 
.blog-posts .posts-wrap { padding: 92px 45px 80px; position: relative; } 
.blog-posts .posts-wrap:after,.blog-posts .posts-wrap:before { content: ""; position: absolute; left: 0; width: 1px; height: 100%; background: rgba(57, 61, 72, 0.06); top: 0; pointer-events: none; } 
.blog-posts .posts-wrap:after { left: auto; right: 0; } 
.blog-posts .posts-wrap .heading_wrap { display: flex; align-items: flex-start; column-gap: 50px; justify-content: space-between; margin: 0 0 44px; } 
.blog-posts .posts-wrap .heading_wrap .title_button-wrap { max-width: 572px; } 
.blog-posts .posts-wrap .latest-posts-grid { display: flex; flex-flow: wrap; gap: 30px; } 
.blog-posts .posts-wrap .latest-posts-grid > * { width: calc((100% - 60px) / 3); border: 1px solid #C5C5C5;transition: all 0.5s; } 
.blog-posts .posts-wrap .latest-posts-grid > *:hover { border-color: #6b00f9; box-shadow: 0 0px 70px -40px #6b00f9; } 
.blog-posts .posts-wrap .latest-posts-grid .post-image { aspect-ratio: 1.64; width: 100%; position: relative; overflow: hidden; } 
.blog-posts .posts-wrap .latest-posts-grid .post-image * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: all 0.5s; } 
.blog-posts .posts-wrap .latest-posts-grid .post-image img { will-change: transform; } 
.blog-posts .posts-wrap .latest-posts-grid .post-card:hover .post-image img { transform: scale(1.03) skew(-3deg, 0deg); } 
.blog-posts .posts-wrap .latest-posts-grid .post-content { padding: 30px 36px; } 
.blog-posts .posts-wrap .latest-posts-grid .post-content .post-title { color: #393D48; font-size: 18px; font-weight: 700; margin: 0 0 13px; } 
.blog-posts .posts-wrap .latest-posts-grid .post-content .post-title * { color: inherit; } 
.blog-posts .posts-wrap .latest-posts-grid .post-card:hover .post-content .post-title { color: #6b00f9; } 
.blog-posts .posts-wrap .latest-posts-grid .post-content .post-date { margin: 0 0 13px; } 
.blog-posts .posts-wrap .latest-posts-grid .post-content .post-date time { text-transform: uppercase; font-size: 13px; font-weight: 500; position: relative; display: flex; align-items: center; gap: 5px; } 
.blog-posts .posts-wrap .latest-posts-grid .post-content .post-date time:before { content: ""; width: 22px; height: 22px; display: inline-flex; background: url(../../../../../wp-content/uploads/2025/10/calendar-days-svgrepo-com.svg); background-size: 100% 100%; background-repeat: no-repeat; filter: grayscale(4) contrast(0.5) brightness(1.5); } 
.blog-posts:after,.blog-posts:before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: rgba(57, 61, 72, 0.06); } 
.blog-posts:before { left: calc(50% - 15.6%); } 
.blog-posts:after { left: calc(50% + 15.6%); } 
.blog-posts .posts-wrap .heading_wrap .btn_wrapper { margin: 11px 0 0; } 
.blog-posts .posts-wrap .heading_wrap .title_button-wrap h2 { margin: 0 0 23px; }


.blog-posts nav.pagination { margin: 40px 0 0; } 
.blog-posts nav.pagination .nav-links { display: flex; justify-content: center; align-items: center; gap: 12px; } 
.blog-posts nav.pagination .nav-links > *:not(.prev):not(.next) { padding: 8px 12px; border: 1px solid #7511f9; font-weight: bold; color: #7511f9; transition: all 0.5s; line-height: 1; } 
.blog-posts nav.pagination .nav-links > *[aria-current="page"]:not(.prev):not(.next) { background: #7511f9; color: #fff; } 
.blog-posts nav.pagination .nav-links svg path { fill: #7511f9; stroke-width: 0.3px; stroke: #7511f9; transition: all 0.5s; } 
.blog-posts nav.pagination .nav-links svg path:hover { fill: #000; stroke: #000; }
.blog-posts .posts-wrap .heading-title-wrap { text-align: center; max-width: 770px; margin: auto; margin-bottom: 40px; } 
.blog-posts .posts-wrap .heading-title-wrap h2 { margin: 0 0 10px; }

/* Responsive css */

@media (max-width:1199px){

.blog-posts .posts-wrap{padding:62px 20px 70px}

}
@media (max-width:991px){

.blog-posts .posts-wrap{padding:52px 20px 60px}

}
@media (max-width:767px){

.blog-posts .posts-wrap{padding:42px 20px 50px}
.blog-posts .posts-wrap .latest-posts-grid > * { width: calc((100% - 30px) / 2); }
.blog-posts .posts-wrap .latest-posts-grid .post-content{padding:20px;}
.blog-posts .posts-wrap .heading-title-wrap { margin: 0 0 30px; }

}
@media (max-width:575px){

.blog-posts .posts-wrap{padding:32px 20px 40px}
.blog-posts .posts-wrap .latest-posts-grid > * { width: 100%; }
.blog-posts .posts-wrap .latest-posts-grid .post-content .post-title{font-size: 16px;}

}