.services-section { width: 100%; height: auto; display: block; position: relative; text-align: center; padding: 50px 0;}
.services-section .wrapper {}
.services-section ul {padding-top: 40px; display: flex; flex-wrap: wrap; width: calc(100% + 20px); margin-left: -10px; list-style: none;}
.services-section li {width: calc(33.33% - 20px);margin: 10px;position: relative;display: flex;justify-content: center;align-items: center;margin-top: 30px;transition: 0.4s ease all;}
.services-section li .service-wrap {padding-bottom: 30px;width: 100%;padding: 15px;display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;}
.services-section li .service-wrap svg {width: 120px;height: 120px;display: block;margin: 30px auto;}
.service-wrap p{display: none;}
.services-section li svg {fill:#009BD8;}
.services-section li svg line{stroke:#009BD8;}

/** services section typo */

.services-section li h2 { margin-bottom: 10px;letter-spacing: 2px;font-size: 22px;color: #2E3490;text-transform: uppercase;display: block;width: 100%;display: flex;align-items: center;justify-content: center;}
.services-section li h3 { font-size: 1.2rem; color: #8D3006; }
.services-section .read-post{margin-top: 20px;display: inline-block;margin: auto;border-top: 4px solid #009BD8;font-weight: 400;color: #E78C30;padding-top: 10px;}
.services-section .read-post.viewmore{display: none;color: #000000;padding: 10px 50px;outline: none;}
.services-section .read-post.viewmore:hover{color: #009BD8;}
.services-section li:hover .read-post{border-color: #FDEE00;margin-top: 10px;}
.services-section li:hover .read-post:hover{color: #FDEE00;}
.services-section li:hover .service-wrap p{display: block;}
.services-section .service-wrap:before{content: '';display: block;position: absolute;background-image: linear-gradient(to bottom , #009BD8, #2E3490);opacity: 0;visibility: hidden;transition: 0.5s ease all;transform: translate(-50%, 0) scale(0);top: 0;left: 50%;width: 100%;height: 100%;z-index: 1;border-radius: 18px;}
.services-section li:hover .service-wrap:before{visibility: visible;opacity: 1;transform: translate(-50%,0) scale(1);}
.services-section li:hover .service-wrap p,.services-section li:hover .read-post,.services-section li:hover h2{color: #ffffff;}
.services-section li:hover .service-wrap p{margin-bottom: 0;}
.services-section li:hover .service-wrap svg {fill:#ffffff;margin: 10px auto;}
.services-section li:hover .service-wrap svg line{stroke:#ffffff;}
.servie-inner {transition: 0.5s ease all;position: relative;z-index: 9;}
.services-section li:hover .servie-inner {transition: 0.9s ease all; position: relative;z-index: 9;}

@media (max-width:1024px){
    .services-section li .service-wrap svg{height: 85px;width: 85px;margin-bottom: 10px;}
    .services-section li:hover .service-wrap p{font-size: 14px;}
    .services-section li h2{font-size: 18px;}
    .services-section .blog-title h2 {font-size: 25px;padding: 20px 50px;}
}
@media (max-width:768px){
    .services-section .blog-title h2 {padding: 20px 30px;}
    .services-section li{width: calc(50% - 20px);}
    .services-section .read-post.viewmore{display: inline-block;}
    .services-section li:nth-of-type(1n+5) {display: none;} 
    .services-section{padding: 25px 0;}
}
@media (max-width:480px){
    .services-section li {width: 100%;}
    .services-section li:nth-of-type(1n+3) {display: none;} /* should match your case */
    .services-section .read-post.viewmore{margin-top: 40px;}
    .services-section .blog-title h2{font-size: 20px;}
}