.body-presentation {
  color: rgb(236, 237, 238) !important;
  background-color: rgb(35, 43, 47);
  overflow: hidden !important;
}

.body-presentation:hover {
  color: #fff;
}

.body-presentation > h5 {
  color: rgb(236, 237, 238) !important;
}

.body-presentation > p {
  color: rgb(196, 203, 206) !important;
}

.card-custom > a > div {
  border: solid #E1E0DE 3px;
  transition: box-shadow 0.2s ease;
}

.card-custom > a > div:hover {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better visual effect */
}

/* Optional: To keep text and images looking better, you can add some padding or margins */

.img-container {
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  position: relative;
  overflow: hidden;
}

.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top; /* This ensures the top of the image is shown */
}

main {
  background-image: url("/images/background-ool.png");
  background-size: cover;
  background-position: top left;
  background-repeat: no-repeat;
  width: 100%;
}

.card-title{
  font-weight: 600;
}