/* Modern CSS Variables for Styling based on Dark Spice Themes */
        :root {
          --bg-color: #121212;
          --surface-color: #1e1e1e;
          --accent-color: #ff6200;
          --accent-hover: #e05300;
          --text-color: #ffffff;
          --text-muted: #b3b3b3;
          --border-color: #333333;
          --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
        }

        body {
          font-family: var(--font-family);
          background-color: var(--bg-color);
          color: var(--text-color);
          line-height: 1.6;
        }

        a {
          color: inherit;
          text-decoration: none;
        }

        /* Header & Navigation */
        header {
          background-color: rgba(18, 18, 18, 0.95);
          position: fixed;
          top: 0;
          width: 100%;
          z-index: 1000;
          border-bottom: 1px solid var(--border-color);
          backdrop-filter: blur(5px);
        }

        .nav-container {
          max-width: 1200px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 1rem 2rem;
        }

       .logo {
  display: flex;
  align-items: center;   /* fixes vertical alignment */
  gap: 0.6rem;           /* space between logo image and text */
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--accent-color);
  letter-spacing: 1px;
  text-transform: uppercase;
}

        .logo span {
          color: var(--text-color);
        }

        .nav-menu {
          display: flex;
          list-style: none;
          gap: 2rem;
        }

        .nav-menu a:hover {
          color: var(--accent-color);
          transition: color 0.3s ease;
        }

        .cta-btn {
          background-color: var(--accent-color);
          color: white !important;
          padding: 0.6rem 1.2rem;
          border-radius: 4px;
          font-weight: 600;
          transition: background-color 0.3s ease;
          cursor: pointer;
        }

        .cta-btn:hover {
          background-color: var(--accent-hover);
        }

        /* Hero Section */
        .hero {
          margin-top: 70px;
          height: 60vh;
          min-height: 400px;
          background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.85)), url('https://images.unsplash.com/photo-1513104890138-7c749659a591?auto=format&fit=crop&w=1200&q=80') center/cover no-repeat;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          text-align: center;
          padding: 0 1rem;
        }

        .hero h1 {
          font-size: 3.5rem;
          margin-bottom: 1rem;
          letter-spacing: 2px;
        }

        .hero h1 span {
          color: var(--accent-color);
        }

        .hero p {
          font-size: 1.2rem;
          color: var(--text-muted);
          max-width: 600px;
          margin-bottom: 2rem;
        }

        .badge-halal {
          border: 2px solid #4caf50;
          color: #4caf50;
          padding: 0.2rem 0.8rem;
          border-radius: 20px;
          font-weight: bold;
          display: inline-block;
          margin-bottom: 1rem;
          text-transform: uppercase;
          font-size: 0.9rem;
        }

        /* Main Container */
        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 3rem 2rem;
        }

        /* Info Section Blocks */
        .info-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2rem;
          margin-bottom: 4rem;
        }

        .info-card {
          background-color: var(--surface-color);
          padding: 2rem;
          border-radius: 8px;
          border-top: 4px solid var(--accent-color);
          text-align: center;
        }

        .info-card h3 {
          margin-bottom: 1rem;
          color: var(--accent-color);
        }

        /* Menu Section Elements */
        .section-title {
          text-align: center;
          font-size: 2.5rem;
          margin-bottom: 1rem;
          text-transform: uppercase;
        }

        .section-subtitle {
          text-align: center;
          color: var(--text-muted);
          margin-bottom: 3rem;
        }

        /* Menu Tab Filter System */
        .menu-tabs {
          display: flex;
          justify-content: center;
          flex-wrap: wrap;
          gap: 0.5rem;
          margin-bottom: 3rem;
        }

        .tab-btn {
          background-color: var(--surface-color);
          color: var(--text-color);
          border: 1px solid var(--border-color);
          padding: 0.6rem 1.2rem;
          border-radius: 4px;
          cursor: pointer;
          font-weight: 600;
          transition: all 0.3s ease;
        }

        .tab-btn.active,
        .tab-btn:hover {
          background-color: var(--accent-color);
          border-color: var(--accent-color);
          color: white;
        }

        /* Food Items Grid */
        .menu-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
          gap: 2rem;
        }

        .menu-item {
          background-color: var(--surface-color);
          border-radius: 8px;
          overflow: hidden;
          border: 1px solid var(--border-color);
          display: flex;
          flex-direction: column;
          transition: transform 0.3s ease;
        }

        .menu-item:hover {
          transform: translateY(-5px);
        }

        .menu-img {
          height: 200px;
          background-size: cover;
          background-position: center;
          background-color: #333;
        }

        .menu-body {
          padding: 1.5rem;
          display: flex;
          flex-direction: column;
          flex-grow: 1;
        }

        .menu-body h4 {
          font-size: 1.25rem;
          margin-bottom: 0.5rem;
          color: var(--text-color);
        }

        .menu-body p {
          color: var(--text-muted);
          font-size: 0.95rem;
          flex-grow: 1;
        }

        /* Special Boxes section */
        .box-deals {
          margin-top: 5rem;
          background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1534422298391-e4f8c172dddb?auto=format&fit=crop&w=800&q=80') center/cover;
          padding: 4rem 2rem;
          border-radius: 12px;
          text-align: center;
        }

        .box-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
          gap: 2rem;
          margin-top: 2rem;
        }

        .box-card {
          background-color: rgba(30, 30, 30, 0.9);
          border: 1px solid var(--accent-color);
          padding: 2rem;
          border-radius: 8px;
        }

        .box-card h4 {
          color: var(--accent-color);
          font-size: 1.4rem;
          margin-bottom: 1rem;
        }

        /* Footer Styling */
        footer {
          background-color: #0b0b0b;
          border-top: 1px solid var(--border-color);
          padding: 3rem 2rem;
          text-align: center;
          margin-top: 5rem;
        }

        footer p {
          color: var(--text-muted);
          font-size: 0.9rem;
          margin-top: 1rem;
        }

        .allergy-warning {
          max-width: 800px;
          margin: 0 auto 2rem auto;
          background-color: #2a1b1b;
          border: 1px solid #721c24;
          color: #f8d7da;
          padding: 1rem;
          border-radius: 4px;
          font-size: 0.85rem;
        }

        /* Social Media Icons/Links Styling */
        .social-links {
          display: flex;
          justify-content: center;
          gap: 1.5rem;
          margin: 1.5rem 0;
        }

        .social-links a {
          background-color: var(--surface-color);
          color: var(--text-color);
          padding: 0.5rem 1rem;
          border-radius: 4px;
          border: 1px solid var(--border-color);
          font-size: 0.9rem;
          font-weight: 600;
          transition: all 0.3s ease;
        }

        .social-links a:hover {
          background-color: var(--accent-color);
          border-color: var(--accent-color);
          transform: translateY(-2px);
        }

        /* Mobile Optimization Media Queries */
        @media (max-width: 768px) {
          .nav-menu {
            display: none;
          }

          .hero h1 {
            font-size: 2.2rem;
          }

          .container {
            padding: 2rem 1rem;
          }

          .menu-grid {
            grid-template-columns: 1fr;
          }

          .social-links {
            flex-direction: column;
            gap: 0.5rem;
            align-items: center;
          }
        }


        /* TIMETABLE */
        .timetable-area {
          background: #f5f5f5;
          padding: 80px 10%;
        }

        .timetable-wrapper {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 30px;
        }

        table.amrt-timetable-table {
          border: 1px solid var(--accent-hover);
          border-radius: 5px;
        }

        /* TABLE */
        table.amrt-timetable-table th {
          background: var(--accent-hover);
          color: white;
          padding: 10px;
        }

        table.amrt-timetable-table th.amrt-timetable-table-thead-tr-th {
          font-size: 18px;
        }

        table.amrt-timetable-table td.amrt-label-td {
          font-size: 16px;
        }

        table.amrt-timetable-table td {
          padding: 8px;
          color: var(--text);

        }

        table.amrt-timetable-table td.amrt-value-td span.amrt-time-slot {
          color: var(--accent-hover);
          font-weight: bold;
        }

        /* Tablets */
        @media (max-width: 991px) {
          .timetable-wrapper {
            grid-template-columns: 1fr;
          }
        }

        .b-content a{
          color: var(--accent-color);
        }
        
        .b-content a:hover{
          color: var(--accent-hover);
        }

        .cta-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}