.service{
    margin-bottom: 20px;
    display: flex;
    background-color: #F1F1F1;
    overflow: hidden;
  }
  .service .service-left{
    min-width: 305px;
    max-width: 305px;
    min-height: 220px;
    margin: 0 auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
  }
  #participer .service .service-left{
    background-image: url('../../../img/icons/icon-participer.jpg');
  }
  #proteger .service .service-left{
    min-height: 270px;
    background-image: url('../../../img/icons/icon-juridique.jpg');
  }
  #beneficier .service .service-left{
    background-image: url('../../../img/icons/icon-develop.jpg');
  }
  #sabonner .service .service-left{
    min-height: 290px;
    background-image: url('../../../img/icons/icon-abonnement.jpg');
  }
  #influencer .service .service-left{
    min-height: 250px;
    background-image: url('../../../img/icons/icon-engagement.jpg');
  }
  #echanger .service .service-left{
    min-height: 275px;
    background-image: url('../../../img/icons/icon-echanger.jpg');
  }
  .service .service-right{
    width: 70%;
    margin-left: 15px;
    margin-top: 15px;
  }
  .service .service-right .title{
    font-family: Antonio;
    font-style: normal;
    font-weight: normal;
    font-size: 36px;
    line-height: 50px;
    text-transform: uppercase;
    color: #1D1D1D;
    flex-wrap: wrap;
  }
  .service .service-right .title h2{
    display: flex;
    flex-wrap: wrap;
  }
  .service .service-right .lists{
    margin-top: 30px;
  }
  .service .service-right .lists ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
  }
  .service .service-right .lists li{
    list-style-type: none;
    margin-bottom: 30px;
    width: 50%;
  }
  .service .service-right .lists li a{
    font-family: Antonio;
    font-style: normal;
    font-weight: normal;
    font-size: 24px;
    line-height: 30px;
    color: #1D1D1D;
    text-decoration: none;
    display: flex;
  }
  #participer .service .service-right .lists li a:hover{
    color: #EC1C24;
  }
  #proteger .service .service-right .lists li a:hover{
    color: #004071;
  }
  #beneficier .service .service-right .lists li a:hover{
    color: #F36F21;
  }
  #sabonner .service .service-right .lists li a:hover{
    color: #00B0CF;
  }
  #influencer .service .service-right .lists li a:hover{
    color: #0071BB;
  }
  #echanger .service .service-right .lists li a:hover{
    color: #9D0B0F;
  }
  .service .service-right .lists li a i{
    width: 100%;
    color: white;
    line-height: 40px;
    font-size: 20px;
    height: 40px;
    text-align: center;
    margin-top: 0;
    max-width: 40px;
    min-width: 40px;
  }
  .service .service-right .lists span {
    padding-top: 5px;
    padding-left: 15px;
    padding-right: 5px;
  }
  #participer .service .service-right .lists li a i{
    background-color: #EC1C24;
  }
  #proteger .service .service-right .lists li a i{
    background-color: #004071;
  }
  #beneficier .service .service-right .lists li a i{
    background-color: #F36F21;
  }
  #sabonner .service .service-right .lists li a i{
    background-color: #00B0CF;
  }
  #influencer .service .service-right .lists li a i{
    background-color: #0071BB;
  }
  #echanger .service .service-right .lists li a i{
    background-color: #9D0B0F;
  }
  @media (max-width:599px){
    .service {
      flex-direction: column;
    }
  }
  @media (max-width:791px){
    .service .service-left{
      width: 100%;
    }
    .service .service-right{
      width: 100%;
    }
  }
  @media (max-width:991px){
    .service .service-right .lists li{
      width: 100%;
    }
    
  }