header .navbar {
    background-color: #284D9A !important;
}

/* SECTION DES SERVICES */

.list-services {
    display: flex;
    flex-direction: column;
    gap: 2.1354vw;
    padding: 2vw 8.928vw 5vw 8.928vw;
}
.list-services .one-services .fig-designed {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: auto;
    height: 16.35vw;
}
.list-services .one-services .fig-designed img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.list-services .one-services#service1 .fig-designed img {
    filter: brightness(0) saturate(100%) invert(13%) sepia(34%) saturate(5136%) hue-rotate(306deg) brightness(92%) contrast(94%);}
.list-services .one-services#service2 .fig-designed img {
    filter: brightness(0) saturate(100%) invert(63%) sepia(100%) saturate(306%) hue-rotate(29deg) brightness(93%) contrast(84%);}
.list-services .one-services#service3 .fig-designed img {
    filter: brightness(0) saturate(100%) invert(61%) sepia(10%) saturate(6230%) hue-rotate(342deg) brightness(102%) contrast(91%);}
.list-services .one-services#service4 .fig-designed img {
    filter: brightness(0) saturate(100%) invert(56%) sepia(38%) saturate(490%) hue-rotate(152deg) brightness(96%) contrast(95%);}
.list-services .one-services {
    padding-left: 6.25vw;
    padding-top: 3.541vw;
    position: relative;
}
.list-services .one-services .details {
    background: #701847;
    height: 23.38vw;
    position: relative;
    z-index: 2;
    border-radius: 7.03vw 2.604vw 2.604vw 2.604vw;
    /* border-radius: 135px 50px 50px 50px; */
}
.list-services .one-services#service1 .details {
    background: #701847;
}
.list-services .one-services#service2 .details {
    background: #A1BA39;
}
.list-services .one-services#service3 .details {
    background: #F38430;
}
.list-services .one-services#service4 .details {
    background: #56A1BF;
}
.list-services .one-services .details .img-details {
    display: flex;
    width: 35.086vw;
    height: auto;
}
.list-services .one-services .details .img-details img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* border-radius: 135px 50px 50px 50px;   */
    border-radius: 7.03vw 2.604vw 2.604vw 2.604vw;
}
.list-services .one-services .details .content-right {
    padding-top: 2.7083vw;
    padding-left: 3.8197vw;
    padding-right: 3.90vw;
    display: flex;
    flex-direction: column;
}

.list-services .one-services .details .content-right .title {
    font-family: var(--font-name);
    font-weight: 900;
    font-size: 1.822vw;
    line-height: normal;
    margin-bottom: 1vw;
    color: white;
}
.list-services .one-services .details .content-right .description {
    font-family: var(--font-name);
    font-weight: 500;
    font-size: 1.30vw;
    line-height: 1.822vw;
    color: white;
}

.list-services .one-services .details .content-right .bottom .icon {
    background: white;
    width: 5vw;    
    height: 5vw; 
    font-size: 2vw; 
    color: #701847;  
    border-radius: 50%;
    border: 4px solid #7018474D;
    transition: all .5s ease-in-out;
}
.list-services .one-services#service1 .details .content-right .bottom .icon {
    border: 4px solid #7018474D;
}
.list-services .one-services#service2 .details .content-right .bottom .icon {
    color: #A1BA39;
    border: 4px solid #A1BA394D;
}
.list-services .one-services#service3 .details .content-right .bottom .icon {
    color: #F38430;
    border: 4px solid #F384304D;
}
.list-services .one-services#service4 .details .content-right .bottom .icon {
    color: #56A1BF;
    border: 4px solid #56A1BF4D;
}
.list-services .one-services:hover .details .content-right .bottom .icon {
    background: transparent !important;
    border: 4px solid #ffffffbb !important;
    color: #FFF !important;  
    transition: all .5s ease-in-out;
}
.list-services .one-services .details .content-right .bottom figure {
    display: block;
    width: auto;
    height: 11.158vw;
}
.list-services .one-services .details .content-right .bottom figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}


/* ===================== RESPONSIVE MOBILE ===================== */
@media (max-width: 768px) {

  
.mobile-header.scrolled {
    background-color: #284D9A !important;
    /* background-color: #284D9A;  */
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

  .list-services {
    display: flex;
    flex-direction: column;
    gap: 6vw;
    padding: 21vw 4vw 6vw 4vw;;
  }

  .list-services .one-services {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
  }

  .list-services .one-services .fig-designed {
    position: absolute;
    top: 0;
    left: 0;
    height: 16vw;
    width: auto;
  }

  .list-services .one-services .fig-designed img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .list-services .one-services .details {
    display: flex;
    flex-direction: column;
    height: auto;
    border-radius: 7vw 3vw 3vw 3vw;
    padding: 5vw 4vw;
  }

  .list-services .one-services .details .img-details {
    width: 100%;
    max-width: 100%;
    margin-bottom: 4vw;
  }

  .list-services .one-services .details .img-details img {
    width: 100%;
    height: auto;
    border-radius: 7vw 3vw 3vw 3vw;
    object-fit: cover;
  }

  .list-services .one-services .details .content-right {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2vw;
  }

  .list-services .one-services .details .content-right .title {
    font-size: 5vw;
    line-height: 6vw;
    margin-bottom: 2vw;
  }

  .list-services .one-services .details .content-right .description {
    font-size: 4vw;
    line-height: 5.2vw;
  }

  .list-services .one-services .details .content-right .bottom {
    margin-top: 4vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .list-services .one-services .details .content-right .bottom .icon {
    width: 14vw;
    height: 14vw;
    font-size: 5vw;
    border-radius: 50%;
    border-width: 2px;
  }

  .list-services .one-services:hover .details .content-right .bottom .icon {
    background: transparent !important;
    border-color: #fff !important;
    color: #fff !important;
  }

  .list-services .one-services .details .content-right .bottom figure {
    height: 12vw;
    width: auto;
  }

  .list-services .one-services .details .content-right .bottom figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
      .one-services .details .content-right .bottom .hide-on-mobile {
        display: none !important;
    }
}