/* Base Reset & Smooth Scrolling */
    html { scroll-behavior: smooth; }
    body { 
      margin: 0; 
      font-family: 'Amatic SC', cursive;
      background: #f7f7f7; 
      color: #333; 
      line-height: 1.6;
    }
    
    /* Navbar for Desktop */
    .w3-top.w3-hide-small {
      position: fixed;
      width: 100%;
      z-index: 1000;
    }
    
    /* Mobile Navigation Toggle (Burger Icon) */
    .burger-menu {
      display: none;
      position: absolute;
      top: 15px;
      right: 20px;
      font-size: 2.5rem;
      cursor: pointer;
      color: #fff;
      z-index: 1100;
    }
    /* Mobile Navigation Container */
    .mobile-nav {
      display: none;
      background-color: #000;
      text-align: center;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1200;
    }
    .mobile-nav a {
      display: block;
      padding: 15px 0;
      color: #fff;
      text-decoration: none;
      font-size: 1.2rem;
    }
    @media (max-width: 768px) {
      .burger-menu { display: block; }
      .w3-top.w3-hide-small { display: none; }
    }
    
    /* Narrow Header Section */
    header.bgimg {
      position: relative;
      height: 40vh;  /* Narrow header */
      background: url('../images/restaurant-interior.jpg') no-repeat center center/cover;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
    header.bgimg::before {
      content: '';
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.6);
      z-index: 1;
    }
    header .w3-display-middle {
      position: relative;
      z-index: 2;
    }
    header .w3-display-middle span {
      font-size: 40px;
      color: #fff;
    }
    header .w3-display-middle a {
      margin-top: 10px;
      display: inline-block;
      background: #000;
      color: #fff;
      padding: 8px 16px;
      text-decoration: none;
      font-size: 1.8rem;
      transition: background 0.3s ease;
    }
    header .w3-display-middle a:hover { background: #444; }
    
    /* Modern Menu Cards Section */
    .menu-container {
      max-width: 1100px;
      margin: 80px auto 40px;
      padding: 0 20px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
    }
    .menu-card {
      background: #fff;
      border: 1px solid #eee;
      border-radius: 8px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      text-align: center;
    }
    .menu-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    }
    .menu-card img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
    .menu-card .card-content {
      padding: 15px;
    }
    .menu-card .card-content h2 {
      margin: 10px 0;
      font-size: 2rem;
    }
    .menu-card .card-content p {
      font-size: 1.8rem;
      margin: 0;
    }
    @media (max-width: 480px) {
      .menu-card .card-content h2 { font-size: 1.6rem; }
      .menu-card .card-content p { font-size: 1.4rem; }
    }
    
    /* Animate on Scroll */
    .animate-on-scroll {
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }
    .animate-on-scroll.in-view {
      opacity: 1;
    }