/* =========================
BLOG WRAPPER
========================= */

.trusolace-blog-wrapper{
max-width:1200px;
margin:auto;
padding:60px 20px;
font-family:inherit;
}


/* =========================
LINK RESET
========================= */

.trusolace-blog-wrapper a,
.trusolace-blog-wrapper a:visited{
color:#000000 !important;
text-decoration:none !important;
}

.trusolace-blog-wrapper a:hover{
color:#2F6B4F !important;
}


/* =========================
CONTROLS
========================= */

.trusolace-blog-wrapper .blog-controls{
display:flex;
flex-direction:column;
gap:20px;
margin-bottom:40px;
}

.trusolace-blog-wrapper #blogSearch{
padding:14px;
border-radius:8px;
border:1px solid #ddd;
font-size:16px;
width:100%;
max-width:420px;
}


/* =========================
CATEGORY BUTTONS
========================= */

.trusolace-blog-wrapper .blog-categories{
display:flex;
flex-wrap:wrap;
gap:10px;
}

/* DEFAULT BUTTON */

.trusolace-blog-wrapper .blog-categories .category{
background:#000000 !important;
color:#ffffff !important;
border:none !important;
padding:10px 18px;
border-radius:999px;
cursor:pointer;
font-weight:600;
font-size:14px;
transition:all .25s ease;
}

/* FORCE TEXT COLOR */

.trusolace-blog-wrapper .blog-categories .category,
.trusolace-blog-wrapper .blog-categories .category *,
.trusolace-blog-wrapper .blog-categories .category a{
color:#ffffff !important;
text-decoration:none !important;
}

/* HOVER STATE */

.trusolace-blog-wrapper .blog-categories .category:hover{
background:#2F6B4F !important;
color:#ffffff !important;
}

/* ACTIVE CATEGORY */

.trusolace-blog-wrapper .blog-categories .category.active{
background:#2F6B4F !important;
color:#ffffff !important;
}


/* =========================
BLOG GRID
========================= */

.trusolace-blog-wrapper .blog-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}


/* =========================
BLOG CARD
========================= */

.trusolace-blog-wrapper .blog-card{
background:#ffffff;
border-radius:18px;
overflow:hidden;
box-shadow:0 10px 30px rgba(0,0,0,0.08);
transition:all .25s ease;
}

.trusolace-blog-wrapper .blog-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 40px rgba(0,0,0,0.15);
}


/* =========================
IMAGE
========================= */

.trusolace-blog-wrapper .blog-card img{
width:100%;
height:200px;
object-fit:cover;
}


/* =========================
CARD CONTENT
========================= */

.trusolace-blog-wrapper .blog-card-content{
padding:22px;
}


/* =========================
CATEGORY LABEL
========================= */

.trusolace-blog-wrapper .blog-category{
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
color:#666;
display:block;
margin-bottom:6px;
}


/* =========================
POST TITLE
========================= */

.trusolace-blog-wrapper .blog-card h3{
font-size:20px;
margin:8px 0 10px;
line-height:1.3;
}

.trusolace-blog-wrapper .blog-card h3 a{
color:#000000 !important;
}

.trusolace-blog-wrapper .blog-card h3 a:hover{
color:#2F6B4F !important;
}


/* =========================
EXCERPT
========================= */

.trusolace-blog-wrapper .blog-card p{
font-size:14px;
line-height:1.6;
color:#555;
margin-bottom:12px;
}


/* =========================
READ MORE
========================= */

.trusolace-blog-wrapper .read-more{
font-weight:600;
color:#000000 !important;
}

.trusolace-blog-wrapper .read-more:hover{
color:#2F6B4F !important;
}


/* =========================
RESPONSIVE
========================= */

@media(max-width:1024px){

.trusolace-blog-wrapper .blog-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:768px){

.trusolace-blog-wrapper .blog-grid{
grid-template-columns:1fr;
}

.trusolace-blog-wrapper .blog-controls{
align-items:flex-start;
}

}
/* =========================
   BLOG LINK COLOR LOCK
   PREVENT THEME / ELEMENTOR RED LINKS
========================= */

.trusolace-blog-wrapper a,
.trusolace-blog-wrapper a:link,
.trusolace-blog-wrapper a:visited {
  color: #000000 !important;
  text-decoration: none !important;
}

.trusolace-blog-wrapper a:hover {
  color: #2F6B4F !important;
}


/* =========================
   BLOG CATEGORY BUTTON LOCK
========================= */

.trusolace-blog-wrapper .blog-categories .category {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s ease;
}

.trusolace-blog-wrapper .blog-categories .category:hover {
  background: #2F6B4F !important;
  color: #ffffff !important;
}

.trusolace-blog-wrapper .blog-categories .category.active {
  background: #2F6B4F !important;
  color: #ffffff !important;
}


/* =========================
   FORCE TEXT COLOR INSIDE BUTTON
========================= */

.trusolace-blog-wrapper .blog-categories .category,
.trusolace-blog-wrapper .blog-categories .category * {
  color: #ffffff !important;
}


/* =========================
   ELEMENTOR LINK OVERRIDE
========================= */

.elementor .trusolace-blog-wrapper a {
  color: #000000 !important;
}

.elementor .trusolace-blog-wrapper a:hover {
  color: #2F6B4F !important;
}
/* =========================
   BLOG GLOBAL LINK RESET
   FORCE OVERRIDE THEME / ELEMENTOR
========================= */

section .trusolace-blog-wrapper a,
section .trusolace-blog-wrapper a:link,
section .trusolace-blog-wrapper a:visited {
  color: #000000 !important;
  text-decoration: none !important;
}

section .trusolace-blog-wrapper a:hover,
section .trusolace-blog-wrapper a:focus {
  color: #2F6B4F !important;
}


/* =========================
   CATEGORY FILTER BUTTON LOCK
========================= */

section .trusolace-blog-wrapper .blog-categories .category {
  background: #000000 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
}

section .trusolace-blog-wrapper .blog-categories .category:hover {
  background: #2F6B4F !important;
  color: #ffffff !important;
}

section .trusolace-blog-wrapper .blog-categories .category.active {
  background: #2F6B4F !important;
  color: #ffffff !important;
}


/* =========================
   FORCE TEXT COLOR INSIDE CATEGORY
========================= */

section .trusolace-blog-wrapper .blog-categories .category,
section .trusolace-blog-wrapper .blog-categories .category * {
  color: #ffffff !important;
}
/* =========================
   BLOG CATEGORY LINK RESET
   FORCE OVERRIDE RED LINKS
========================= */

.trusolace-blog-wrapper .blog-categories a,
.trusolace-blog-wrapper .blog-categories a:link,
.trusolace-blog-wrapper .blog-categories a:visited {
  color: #ffffff !important;
  text-decoration: none !important;
}


/* =========================
   CATEGORY BUTTON STYLE
========================= */

.trusolace-blog-wrapper .blog-categories .category {
  background: #000000 !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
}


/* =========================
   CATEGORY HOVER
========================= */

.trusolace-blog-wrapper .blog-categories .category:hover {
  background: #2F6B4F !important;
}

.trusolace-blog-wrapper .blog-categories .category:hover a {
  color: #ffffff !important;
}


/* =========================
   ACTIVE CATEGORY
========================= */

.trusolace-blog-wrapper .blog-categories .category.active {
  background: #2F6B4F !important;
}

.trusolace-blog-wrapper .blog-categories .category.active a {
  color: #ffffff !important;
}
/* =========================
   FORCE CATEGORY LINK COLOR
========================= */

.trusolace-blog-wrapper .blog-categories a,
.trusolace-blog-wrapper .blog-categories a:link,
.trusolace-blog-wrapper .blog-categories a:visited,
.trusolace-blog-wrapper .blog-categories a:active {
  color: #ffffff !important;
  text-decoration: none !important;
}


/* =========================
   CATEGORY BUTTON STYLE
========================= */

.trusolace-blog-wrapper .blog-categories a {
  background: #000000 !important;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  display: inline-block;
}


/* =========================
   HOVER
========================= */

.trusolace-blog-wrapper .blog-categories a:hover {
  background: #2F6B4F !important;
  color: #ffffff !important;
}


/* =========================
   ACTIVE CATEGORY
========================= */

.trusolace-blog-wrapper .blog-categories a.active {
  background: #2F6B4F !important;
  color: #ffffff !important;
}
/* SMOOTH FILTER ANIMATION */

.blog-card{
transition:all .35s ease;
}

.blog-card.hidden{
opacity:0;
transform:translateY(20px);
pointer-events:none;
position:absolute;
}


/* FEATURED POST */

.featured-post{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:30px;
margin-bottom:60px;
background:#fff;
border-radius:20px;
overflow:hidden;
box-shadow:0 15px 45px rgba(0,0,0,0.1);
}

.featured-post img{
width:100%;
height:100%;
object-fit:cover;
}

.featured-content{
padding:40px;
display:flex;
flex-direction:column;
justify-content:center;
}

.featured-content h2{
font-size:32px;
margin-bottom:15px;
}

.featured-content p{
color:#555;
line-height:1.6;
margin-bottom:20px;
}


/* LOAD MORE BUTTON */

.load-more-wrap{
text-align:center;
margin-top:50px;
}

#loadMorePosts{
background:#2F6B4F;
color:#fff;
border:none;
padding:14px 26px;
border-radius:999px;
font-weight:600;
cursor:pointer;
transition:.25s;
}

#loadMorePosts:hover{
background:#245740;
}
<div class="featured-content">

<span class="featured-badge">Recent Post</span>

<span class="blog-category">
<?php echo get_the_category()[0]->name ?? ''; ?>
</span>

<h2>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</h2>

<p>
<?php echo wp_trim_words(get_the_excerpt(),25); ?>
</p>

<a href="<?php the_permalink(); ?>" class="read-more">
Read Article
</a>

</div>