.serv_list {margin: 0 -21px; }
.serv_list li { width: 33.3%; float: left; padding: 0 21px; margin-bottom: 42px;}
.servtxt { position: absolute; top: 0; bottom: 0;width: 100%;
    height: 100%;
    display: flex;z-index: 1;
    flex-wrap: wrap; left: 0px; right: 0;
    justify-content: space-between;align-items: flex-start;
    flex-direction: column;
    padding: 40px;}
a.servbox { position: relative;display: block;transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-o-transition: all 0.5s linear;-ms-transition: all 0.5s linear;}
.servtit { font-size: 30px; line-height: 48px; color: #fff; font-weight: bold; text-transform: uppercase; width: 100%; display: block;}
a.servbox:after {  position: absolute; content: "";background: linear-gradient(180deg, black, transparent); left: 0; right: 0; bottom: 0; top: 0;}
a.servbox:hover:after {  background: linear-gradient(180deg, #122a5c, transparent); }
.btnbox{font-size: 20px;min-width: 180px;height: 36px;}
a.servbox :hover  .btnbox { color: #000;}


.title_lg{padding-bottom: 22px;}

.serv_list .btnbox{background: rgba(0,0,0,0.6);}


/*=========== responsive ================*/


@media screen and (max-width:1024px){
    
    .servtit{ line-height: 30px; }
	
}

@media screen and (max-width:860px){
    .serv_list li { padding: 0 8px; margin-bottom: 16px; }
    .serv_list {
    margin: 0 -8px;
}
    .servtxt { padding:20px;}
    .servtit {
        font-size: 25px;}
}

@media screen and (max-width:700px){
    .serv_list li { width: 50%;}
  
  .serv_list .btnbox{font-size: 14px;min-width: 118px;height: 28px;letter-spacing: 0.5px;line-height: 27px;}
  
}
@media screen and (max-width:420px){
.serv_list li {
    width: 100%;
}
    .servtxt {
    padding: 30px 20px;
 
}
}