.card img {
      cursor: pointer;
      transition: transform 0.3s;
    }
    .card img:hover {
      transform: scale(1.05);
    }
    .modal-img {
      width: 100%;
      height: auto;
    }
    .overlay-text {
      position: absolute;
      bottom: 10px;
      left: 15px;
      color: #fff;
      background: rgba(0,0,0,0.6);
      padding: 5px 10px;
      border-radius: 5px;
      max-width: 60%;
    }
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      color: #424040;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 10;
    }

    .close-btn:hover {
      position: absolute;
      top: 10px;
      right: 15px;
      color: #d30707;
      font-size: 1.5rem;
      cursor: pointer;
      z-index: 10;
    }

    .slideshow-controls {
      position: absolute;
      bottom: 10px;
      right: 15px;
      display: flex;
      gap: 10px;
    }
    .slideshow-controls button {
      background: rgba(0,0,0,0.6);
      border: none;
      color: #fff;
      padding: 6px 12px;
      border-radius: 5px;
      cursor: pointer;
    }
    .modal-content {
      position: relative;
      background: transparent;
      border: none;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
      .overlay-text {
        font-size: 0.8rem;
        max-width: 70%;
      }
      .slideshow-controls button {
        padding: 4px 8px;
        font-size: 0.8rem;
      }
      .card img {
        height: auto;
      }
    }