/* section_01 */
#x4d1{display: flex;align-items: center;flex-wrap: wrap;margin: 30px 0 100px;}
#x4sl1{padding: 14px;border: 1px solid #ccc;color: #5c6390;text-transform: capitalize;font-family: var(--font-1);font-size: 15px;width: 33%;display: inline-block;}
.x4d2{width: 23%;margin: 10px 1%;background: var(--white-color);transition: 1s all;position: relative;}
.x4d3{width: 100%;position: relative;}
.x4i1{width: 100%;}
.x4d4{display: flex;align-items: center;justify-content: center;position: absolute;left: 0;right: 0;bottom: 0;opacity: 0;;margin-bottom: -39px;transition: 1s all;}
.x4d2:hover .x4d4{margin: 15px;transition: 1s all;opacity: 1;z-index: 1;}
.x4sp1{width: 43px;height: 43px;display: inline-block;background: var(--primary-color);margin: 0 7px;}
.x4i2{width: 100%;padding: 12px;}
.x4d5{position: relative;z-index: 1;padding: 15px;text-align: center;}
.x4p1{color: var(--primary-color);font-weight: 600;}
.x4d5 > h2 {font-size: 21px;}
.x4d3::after{content: "";background: #212529;width: 100%;height: 100%;display: block;position: absolute;top: 0;left: 0;transition: 1s all;right: 0;bottom: 0;opacity: 0;}
.x4d2 .x4d3:hover::after {opacity: 55%;cursor: pointer;transition: 1s all;}
.x4d2:hover{box-shadow: 0 10px 60px 0 rgba(0,0,0,.15);transition: 1s all;}