.hero-detail {
      min-height: 60vh;
      background: linear-gradient(120deg, #23272f 60%, #bfa13b 100%);
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .hero-detail img {
      object-fit: cover;
      width: 100%;
      height: 100%;
      opacity: 0.25;
      position: absolute;
      top: 0; left: 0;
      z-index: 0;
    }
    .hero-detail .overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg,rgba(35,39,47,0.85) 60%,rgba(191,161,59,0.25) 100%);
      z-index: 1;
    }
    .hero-detail .content {
      position: relative;
      z-index: 2;
      color: #fff;
      text-align: center;
      max-width: 700px;
      margin: 0 auto;
    }
    .project-gallery img {
      border-radius: 1rem;
      box-shadow: 0 6px 24px rgba(0,0,0,0.08);
      transition: transform 0.3s;
    }
    .project-gallery img:hover {
      transform: scale(1.04) rotate(-1deg);
      box-shadow: 0 12px 32px rgba(191,161,59,0.18);
    }
    #modal-img {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 9; /* Or any other ratio you prefer */
      object-fit: cover;
      transition: transform 0.3s ease;
    }
    @media (max-width: 768px) {
      #modal-img {
        height: 80vh;
        aspect-ratio: 4 / 5;
      }
    }