.service {
position: relative;
z-index: 2;
padding-top: 120px;
padding-bottom: 120px;
background-color: var(--site-bg-grey);
}
.service-card {
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: 30px;
border: 1px solid #D9D9D9;
padding: 40px 20px 40px 40px;
min-height: 400px;
background-image: url(//lawgenix.co.th/wp-content/themes/lawgenix/assets/icon/logo-golden.png);
background-repeat: no-repeat;
background-size: 166px;
background-position: right bottom;
transition: all .3s;
}
.service-card:hover {
box-shadow: 0px 4px 20px 0px #00000040;
}
.service-card::after {
content: '';
display: block;
background-color: var(--secondary-color);
width: 100%;
height: 113px;
position: absolute;
left: 0;
right: 0;
bottom: -113px;
transition: all .3s;
}
.service-card:hover::after {
bottom: -110px;
filter: blur(100px);
}
.service-card-header {
display: flex;
align-items: center;
font-size: 24px;
font-weight: bold;
margin-bottom: 26px;
}
.service-card-header img {
width: 64px;
margin-right: 16px;
}
.service-card-content {
height: 185px;
overflow: hidden;
text-overflow: ellipsis;
}
.btn-read-more {
color: #fff;
background-color: var(--primary-color);
border-color: var(--primary-color);
transition: all .3s;
}
.service-card:hover .btn-read-more {
background-color: var(--secondary-color);
border-color: var(--secondary-color);
}
.service-card-footer {
margin-top: auto;
}
.line-before-text {
position: relative;
padding-left: 40px; 
}
.line-before-text::before {
content: '';
display: block;
height: 4px;
width: 30px;
background-color: #000; 
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}