.servise-info .flex-container-1 {
display: flex; flex-flow: row wrap; justify-content: space-between;
}
.servise-info .flex-container-1 .flex-item {
border-radius: 0; width: 32%; overflow: hidden; background: linear-gradient(180deg, hsla(0, 0%, 25%, 1) 2%, hsla(0, 0%, 15%, 0) 92%); box-shadow: 0px 10px 25px 0px rgba(0, 0, 0, 0.10), 0px 4px 8px 0px rgba(0, 0, 0, 0.10); position: relative; z-index: 1;
}
.servise-info .flex-container-1 .flex-item:before {
content: ""; position: absolute; inset: 0; padding: 2px; border-radius: inherit; background: linear-gradient(180deg, hsla(151, 90%, 46%, .5) 2%, hsla(151, 90%, 46%, 0) 92%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1;
}
.servise-info .flex-container-1 .img-container {
position: relative;
}
/* Active faded image by uncommenting the line below of CSS */
.servise-info .flex-container-1 .img-container::before {
/* background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255)); */
content: ''; top: 50%; bottom: 0; left: 0; right: 0; position: absolute;
}
.servise-info .flex-container-1 .flex-item h3,
.servise-info .flex-container-1 .flex-item p {
max-width: 100%; padding: 0 25px;
}
.servise-info .flex-container-1 .flex-item p:last-of-type {
margin-top: 20px; margin-bottom: 0; transition: all .2s ease-in-out;
}
.servise-info .flex-container-1 .flex-item {
display: flex; flex-direction: column; margin-bottom: 25px; height: 100%; padding-bottom: 25px;
}
.servise-info .flex-container-1 .flex-item p.body-text {
flex-grow: 1;
}
/* read More */
.read-more-container {
max-width: 600px; font-family: Arial, sans-serif;
}
.read-more-text {
max-height: 44px; overflow: hidden; transition: max-height 0.4s ease;
}
.read-more-text.expanded {
max-height: 261px;
}
.read-more-btn {
margin-top: 10px; background: none; border: none; color: var(--main-color); font-size: 16px; cursor: pointer; padding: 0 25px; text-align: left; color: var(--cta-color);
}
.read-more-btn:hover,
.read-more-btn:focus,
.read-more-btn:active {
color: var(--cta-dark);
}
.read-more-btn:hover {
text-decoration: underline;
}
@media (min-width: 992px) {
.servise-info {
padding-bottom: 85px;
}
.servise-info .flex-container-1 .flex-item .img-container::before {
z-index: 1;
}
.servise-info .flex-container-1 .flex-item .img-container {
overflow: hidden; position: relative;
}
.servise-info .flex-container-1 .flex-item .img-background {
transform: scale(1.01); transition: all 1s ease;
}
.servise-info .flex-container-1 .flex-item:hover .img-background {
transform: scale(1.05);
}
}
@media(max-width:991px) {
.servise-info {
padding-bottom: 65px;
}
.servise-info .flex-container-1 {
gap: 15px;
}
.servise-info .flex-container-1 .flex-item {
width: 48%;
}
}
@media (max-width: 600px) {
.servise-info .flex-container-1 .flex-item {
width: 100%; margin-bottom: 0;
}
.servise-info .flex-container-1 {
margin: 0 0;
}
.servise-info .flex-container-1 .flex-item .img-background {
padding-top: 30% !important;
}
.servise-info .flex-container-1 .flex-item h3,
.servise-info .flex-container-1 .flex-item p {
max-width: 100%;
}
}