/* Header */

      /* Hero Sections */
      .section-box {
        background-color: #fff;
      }

      #box0 {
        padding: 40px 0;
        background: linear-gradient(to bottom, #ffffff, #f6f6f6);
        text-align: center;
        color: #222;
      }

      #box2 {
        margin-bottom: 40px;
      }

      /* Cards */
      .menu-header h2 {
        font-size: 32px;
        font-weight: bold;
        color: #006633;
        margin-bottom: 10px;
        position: relative;
        display: inline-block;
      }

      .menu-header h2::after {
        content: '';
        display: block;
        width: 60px;
        height: 3px;
        background: #006633;
        margin: 8px auto 0;
        border-radius: 2px;
      }

      .menu-header p {
        font-size: 16px;
        color: #555;
        margin-top: 8px;
      }

      .card-slideshow {
        overflow: hidden;
        width: 90%;
        max-width: 500px;
        margin: 20px auto 40px;
        position: relative;
      }

      .card-track {
        display: flex;
        transition: transform 0.6s ease;
        transform: translateX(0);
        padding: 0 40px;
      }

      .card-slide {
        flex: 0 0 70%;
        margin: 0 10px;
        opacity: 0.5;
        transition: transform 0.4s ease, opacity 0.4s ease;
        transform: scale(0.9);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        background: #fff;
        cursor: pointer;
      }

      .card-slide.active {
        opacity: 1;
        transform: scale(1);
      }

      .card-slide img {
        width: 100%;
        height: 260px;
        object-fit: cover;
      }

      .card-caption {
        background: #000;
        color: #fff;
        padding: 12px;
        height: 25%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }

      .card-caption .label {
        font-size: 12px;
        color: #aaa;
        margin-bottom: 4px;
      }

      .card-text .label {
        font-size: 18px;
        font-weight: bold;
        color: #006633;
        margin-bottom: 6px;
        display: inline-block;
      }

      .card-caption h3 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
      }

      /* Gallery */
      .gallery {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 12px;
      }

      .gallery img {
        width: calc(20% - 8px);
        height: auto;
        border-radius: 8px;
        object-fit: cover;
        cursor: zoom-in;
        transition: transform 0.3s ease;
      }

      .gallery img:hover {
        transform: scale(1.05);
      }

      /* Footer */
      footer {
        text-align: center;
        padding: 20px;
        background-color: #f5f5f5;
        color: #888;
      }

      /* Responsive Navigation */
      @media (max-width: 768px) {
        
        .card-slideshow {
          width: 100%;
          max-width: 100%;
          margin: 20px auto;
          overflow: hidden;
        }

        .card-track {
          padding-left: 20px;
          padding-right: 0;
          transition: transform 0.6s ease;
        }

        .card-slide {
          flex: 0 0 90%;
          margin: 0 5px;
          opacity: 0.6;
          transition: transform 0.4s ease, opacity 0.4s ease;
        }

        .card-slide.active {
          opacity: 1;
          transform: scale(1);
        }

        .card-caption {
          font-size: 14px;
          padding: 10px;
        }
      }

      /* Hide hamburger on desktop */
      @media (min-width: 769px) {
        .menu-toggle {
          display: none;
        }
      }