/**
* Template Name: Flexor - v2.3.0
* Template URL: https://bootstrapmade.com/flexor-free-multipurpose-bootstrap-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# General


/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .icon-box {
  padding: 50px 20px;
  margin-top: 35px;
  margin-bottom: 25px;
  text-align: center;
  height: 200px;
  position: relative;
  background: #fff;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.services .icon {
  position: absolute;
  top: -36px;
  left: calc(50% - 36px);
  transition: 0.2s;
  border-radius: 50%;
  border: 6px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-align: center;
  width: 72px;
  height: 72px;
  background: #58d0f4;
}

.services .icon i {
  color: #fff;
  font-size: 24px;
}

.services .title {
  font-weight: 700;
  margin-bottom: 15px;
  font-size: 18px;
  text-transform: uppercase;
}

.services .title a { color: #343a40;}

.services .icon-box:hover .icon {
  background: #fff;
  /*border: 2px solid #ffb400;*/
  border: 2px solid #58d0f4;
}

.services .icon-box:hover .icon i {
  /*color: #ffb400;*/
  color: #58d0f4;
}

.services .icon-box:hover .title a {
  /*color: #ffb400;*/
  color: #58d0f4;
}


.services .icon-communication {background-color: #6DC5EB;}
.services .title-communication a { color: #343a40;}
.services .icon-box:hover .icon-communication {border: 2px solid #6DC5EB !important;}
.services .icon-box:hover .icon-communication i {color: #6DC5EB;}
.services .icon-box:hover .title-communication a {color: #6DC5EB !important;}
.services .icon-box-communication:hover{border: 2px solid #6DC5EB !important;}
.services .icon-box-communication{height:340px;}

.linkable-box{display: block; color:#000; text-decoration: none; transition: transform .6s; }
.linkable-box:hover{transform: scale(1.1); text-decoration: none; color:#000;}

.services .icon-recordkeeping {background-color: #81BD42;}
.services .icon-box:hover .icon-recordkeeping {border: 2px solid #81BD42 !important;}
.services .icon-box:hover .icon-recordkeeping i {color: #81BD42;}
.services .icon-box:hover .title-recordkeeping a {color: #81BD42;}
.services .icon-box-recordkeeping:hover{border: 2px solid #81BD42 !important;}
.services .icon-box-recordkeeping{height:340px;}

.services .icon-mobile {background-color: #F26D6D;}
.services .icon-box:hover .icon-mobile {border: 2px solid #F26D6D !important;}
.services .icon-box:hover .icon-mobile i {color: #F26D6D;}
.services .icon-box:hover .title-mobile a {color: #F26D6D;}
.services .icon-box-mobile:hover{border: 2px solid #F26D6D !important;}
.services .icon-box-mobile{height:340px;}


.services .icon-integration {background-color: #9F72B3;}
.services .icon-box:hover .icon-integration {border: 2px solid #9F72B3 !important;}
.services .icon-box:hover .icon-integration i {color: #9F72B3;}
.services .icon-box:hover .title-integration a {color: #9F72B3;}
.services .icon-box-integration:hover{border: 2px solid #9F72B3 !important;}
.services .icon-box-integration{height:340px;}


.services .icon-hardware {background-color: #F89B56;}
.services .icon-box:hover .icon-hardware {border: 2px solid #F89B56 !important;}
.services .icon-box:hover .icon-hardware i {color: #F89B56;}
.services .icon-box:hover .title-hardware a {color: #F89B56;}
.services .icon-box-hardware:hover{border: 2px solid #F89B56 !important;}
.services .icon-box-hardware{height:340px;}



.services .icon-training {background-color: #1882C5;}
.services .icon-box:hover .icon-training {border: 2px solid #1882C5 !important;}
.services .icon-box:hover .icon-training i {color: #1882C5;}
.services .icon-box:hover .title-training a {color: #1882C5;}
.services .icon-box-training:hover{border: 2px solid #1882C5 !important;}
.services .icon-box-training{height:340px;}



.services .icon-security {background-color: #FEC251;}
.services .icon-box:hover .icon-security {border: 2px solid #FEC251 !important;}
.services .icon-box:hover .icon-security i {color: #FEC251;}
.services .icon-box:hover .title-security a {color: #FEC251;}
.services .icon-box-security:hover{border: 2px solid #FEC251 !important;}
.services .icon-box-security{height:340px;}





.services .description {
  line-height: 24px;
  font-size: 14px;
}


.card{height:338px;}