/* Hero-section */
.project-featured-image {
  position: relative;
  margin-bottom: 10vh;
  overflow: hidden;
}

.project-featured-image img {
  width: 100%;
  height: 90vh;
  /* margin-bottom: 10vh; */
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block; /* Убираем пробелы снизу */
  transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1); /* Smoother easing */
  will-change: transform; /* Optimizes performance for animations */
}

.project-featured-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.17);
  /* backdrop-filter: blur(1px); */
  z-index: 1;
}

.project-featured-image .container-narrow {
  position: absolute; /* Абсолютное позиционирование */
  z-index: 2;
  bottom: 10vh; /* Расположение от нижнего края */
  left: 0;
  right: 0; /* left и right в сочетании с margin из .container-narrow создадут правильное центрирование */
}

.project-featured-image h1.project-title {
  font-size: 52px;
  color: var(--color-text-light);
  text-align: left;
  font-weight: 500;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

/* Project description section */

h3.project-title {
  text-transform: uppercase;
}

.description-section .container-narrow {
  display: flex;
}

/* Project Details Styles */
.project-details {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Space between items */
  margin-bottom: 40px;
  text-transform: capitalize;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 1px; /* Space between label and value */
  padding-bottom: 25px;
}

.detail-label {
  font-size: 16px;
  color: var(--color-text-gray);
  font-weight: normal;
}

.detail-value {
  font-size: 17px;
  font-weight: 700; /* Semibold */
  line-height: 1.4;
}

/* For services with multiple lines */
.detail-value br {
  line-height: 1.8;
}

.project-metadata {
  flex: 0 0 22%;
  text-transform: capitalize;
  margin-right: 5%;
}

.project-description {
  flex: 0 0 65%; /* Ширина правой колонки */
}

@media (max-width: 768px) {
  .project-metadata,
  .project-description {
    flex: 0 0 100%;
  }
}