.services-container {
  width: 100%;
  height: fit-content;
  background-color: rgb(211, 210, 210);
padding: 5rem 0 2rem 0;
  position: relative;
}

.services-container-title-block {
  width: fit-content;
  height: fit-content;
  background-color: #d13133;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1rem 2rem;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.services-container-title {
  font-size: 45px;
  font-weight: bold;
  text-align: center;
  color: whitesmoke;
}

.liste-services-container {
  background-color: whitesmoke;
  width: 80%;
  height: fit-content;
  margin: auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem;
}

.service-block {
  width:  calc((100% - 2rem) / 2); /* 2rem = gap total entre 3 éléments */
  display: flex;
  height: 300px;

  border: 2px solid #d13133;
  border-radius: 25px;
  gap: 1rem;
  padding: 1rem;
  align-items: center;
}

.service-list-container {
  list-style-type: disc; /* puce noire */
  padding-left: 2em; /* espace pour que la puce ne touche pas le texte */
}

.service-block-left {
  height: 80%;
}

.service-logo {
  height: 100%;
}

.service-block-right {
  width: 100%;
}

.service-title {
  font-size: 25px;
  font-weight: bold;
}



/* Responsive */
@media (max-width: 1800px) {

.liste-services-container {
  background-color: whitesmoke;
  width: 95%;
  height: fit-content;
  margin: auto;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
    rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 2rem;
}
}

/* Responsive */
@media (max-width: 1338px) {

.liste-services-container {
 
  flex-direction: column;
 
}

.service-block {
  width:  80%;
  margin: auto;
  
}

.services-container-title {
  font-size: 30px;

}

}

/* Responsive */
@media (max-width: 819px) {

  .services-container-title {
  font-size: 35px;
  width: 80vw;
 
}

.service-block {
  width:  100%; /* 2rem = gap total entre 3 éléments */
  display: flex;
  height: fit-content;

  border: 2px solid #d13133;
  border-radius: 25px;
  gap: 1rem;
  padding: 1rem;
  align-items: center;

  flex-direction: column;
}

.service-block-left {
  height: fit-content;
  display: flex;
justify-content: center;

}

.service-logo {
  height: auto;
  width: 50%;


}

}