@font-face {
  font-family: 'proxima_novabold';
  src: url('proxima_nova_bold-webfont.woff2') format('woff2'),
       url('proxima_nova_bold-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'proxima_novaregular';
  src: url('proximanova-regular-webfont.woff2') format('woff2'),
       url('proximanova-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

.body_content .service_sections .demo {
    /* width: 29%; */
    border: 1px solid #a09fa0;
    padding: 12px 0;
    border-top-left-radius: 7px;
    border-bottom-right-radius: 7px;
    /* float: left; */
    margin: 19px 0;
    height: 66px;
    text-align: center;
    background-color: #c7c3c3;
    transition: opacity 0.5s ease-in-out 0s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.body_content .service_sections .demo:hover{
  background-color: #fff;
  border: none;
  color: gray;
  box-shadow: 1px 0px 13px 2px grey;
  transition: .6s ease;
}
.body_content{
  padding: 10px 0 50px 0;
}
.services_head{
  color: gray;
  text-transform: capitalize;
  font-family: 'proxima_novabold';

}
.sections_wrapper{
  padding: 40px 0;
  font-family: 'proxima_novaregular';
}

@media (max-width: 319px){
  .services_head .h1{    
      font-size: 24px;
  }
  
}
@media (min-width: 320px) and (max-width: 410px){
  .services_head .h1{    
      font-size: 25px;
  }
 
}
@media (min-width: 411px) and (max-width: 576px){
  .services_head .h1{    
      font-size: 29px;
  }
 
}