.slideshow-container {
    max-width: 98vw;
    width: 100%;
    margin: 140px auto 24px auto; /* Even more space from top for navbar */
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #f8f8f8;
    box-shadow: 0 2px 16px rgba(0,0,0,0.10);
    padding: 0;
    z-index: 1;
  }
  .slideshow-container img {
    width: 240px;
    height: 340px;
    object-fit: cover;
    display: block;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.07);
    background: #eee;
  }
          .mySlides {
            display: none;
            padding: 0;
            text-align: center;
          }
          .mySlides .numbertext {
            position: absolute;
            top: 12px;
            left: 18px;
            color: #fff;
            background: rgba(0,0,0,0.4);
            padding: 4px 10px;
            border-radius: 6px;
            font-size: 1em;
            z-index: 2;
          }
          .mySlides .text {
            color: #222;
            font-size: 1.1em;
            padding: 12px 0 18px 0;
            background: rgba(255,255,255,0.85);
            border-radius: 0 0 12px 12px;
            margin-top: -8px;
          }
          .prev, .next {
            cursor: pointer;
            position: absolute;
            top: 50%;
            width: auto;
            padding: 12px;
            margin-top: -22px;
            color: #222;
            font-weight: bold;
            font-size: 2em;
            border-radius: 0 3px 3px 0;
            user-select: none;
            background: rgba(255,255,255,0.7);
            transition: background 0.2s;
            z-index: 3;
          }
          .next {
            right: 0;
            border-radius: 3px 0 0 3px;
          }
          .prev {
            left: 0;
          }
          .prev:hover, .next:hover {
            background: rgba(255,255,255,0.95);
          }
          .dot {
            cursor: pointer;
            height: 14px;
            width: 14px;
            margin: 0 4px;
            background-color: #bbb;
            border-radius: 50%;
            display: inline-block;
            transition: background-color 0.3s;
          }
          .active, .dot:hover {
            background-color: #717171;
          }

  @media (max-width: 700px) {
    .slideshow-container {
      margin-top: 140px; /* Even more space for mobile nav */
      z-index: 1;
    }
    .slideshow-container img {
      width: 70vw;
      max-width: 96vw;
      height: 44vw;
      max-height: 220px;
    }
    .mySlides .text {
      font-size: 1em;
      padding: 8px 0 12px 0;
    }
    .prev, .next {
      font-size: 1.5em;
      padding: 8px;
    }
  }