.services {
  font-family: "Almarai", sans-serif;
  font-weight: 400;
}
.services .head-content h2 {
  color: var(--black-color);
}
.services .head-content p {
  color: var(--black-color);
}
.services .services-box .box {
  position: relative;
  color: var(--light-color);
  overflow: hidden;
  transition: 0.3s;
}
.services .services-box .box img {
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  aspect-ratio: 16/9;
  z-index: -1;
}
.services .services-box .box .text-wrapper p {
  position: absolute;
  right: -100%;
  opacity: 0;
  transition: 0.3s;
}
.services .services-box .box:hover {
  height: 400px;
  align-items: flex-start !important;
}
.services .services-box .box:hover .text-wrapper p {
  position: relative;
  right: 0;
  opacity: 1;
}