/* {{ asset('assets/images/cate/breakfast.jpg') }} */
   :root {
        --card-bg: rgba(15, 92, 95, 0.55);
        --card-border: rgba(130, 206, 198, 0.2);
        --text-main: #e8f5f2;
        --text-muted: #cfe8e3;
        --accent: #e4b24f;
      }

      body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: #0e2328;
      }

      .hero {
        min-height: 100vh;
        background-image:
          linear-gradient(
            90deg,
            rgba(3, 11, 15, 0.68) 0%,
            rgba(5, 19, 26, 0.58) 44%,
            rgba(6, 58, 67, 0.28) 72%,
            rgba(6, 75, 82, 0.18) 100%
          ),
          url("../images/homebg.webp");
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
      }

     

      .brand-wrap {
        position: absolute;
        top: 2rem;
        right: 2.75rem;
        display: flex;
        align-items: center;
        gap: 0.6rem;
        color: var(--text-main);
        letter-spacing: 0.04em;
        font-weight: 700;
      }

     

      .menu-panel {
        width: min(92vw, 350px);
        margin-left: auto;
      }

      .menu-item {
        border: 1px solid var(--card-border);
        border-radius: 12px;
        background: var(--card-bg);
        backdrop-filter: blur(1px);
        color: var(--text-main);
        text-decoration: none;
        padding: 1rem 1.05rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 0.9rem;
        transition: transform 0.2s ease, background-color 0.2s ease,
          border-color 0.2s ease;
      }

      .menu-item:hover {
        transform: translateY(-2px);
        background: rgba(17, 108, 111, 0.66);
        border-color: rgba(153, 220, 212, 0.45);
      }

      .menu-left {
        display: flex;
        align-items: center;
        gap: 0.85rem;
      }  

      .menu-text {
        color: var(--text-muted);
        letter-spacing: 0.24em;
        font-size: 0.93rem;
        font-weight: 600;
      }

      .arrow-btn {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: 0;
        background: var(--accent);
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        line-height: 1;
      }

      .right-content {
        min-height: 100vh;
        display: flex;
        align-items: flex-end;
        padding-bottom: 3rem;
      }

      @media (max-width: 768px) {
        .brand-wrap {
          top: 1.3rem;
          right: 1.2rem;
          font-size: 0.95rem;
        }

        .menu-text {
          letter-spacing: 0.16em;
          font-size: 0.82rem;
        }

        .right-content {
          padding-bottom: 1.8rem;
        }
      }





/* fourun page */
      .showcase-wrap {
        min-height: 100vh;
  display: flex;
  flex-direction: column; /* 👈 IMPORTANT */
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
         background-image:
          linear-gradient(
            90deg,
            rgba(3, 11, 15, 0) 0%,
            rgba(5, 19, 26, 0) 44%,
            rgba(6, 58, 67, 0) 72%,
            rgba(6, 74, 82, 0) 100%
          ),
          url("../images/fourun.webp");
            background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
      }
    

      .showcase {
        width: min(1100px, 100%);
      }

      .outer-grid {
        display: grid;
        grid-template-columns: 1fr 1.25fr 1fr;
        gap: 10px;
      }

      .stack-grid {
        display: grid;
        grid-template-rows: repeat(3, 1fr);
        gap: 10px;
      }

      .location-card {
        position: relative;
        overflow: hidden;
        border-radius: 16px;
        background: var(--surface);
        border: 1px solid var(--border);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.32);
        display: block;
        text-decoration: none;
        min-height: 150px;
      }

      .location-card.tall {
        min-height: 500px;
      }

      .location-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.35s ease;
      }

      .location-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          180deg,
          rgba(2, 6, 11, 0.75) 0%,
          rgba(3, 10, 16, 0.2) 35%,
          rgba(4, 11, 18, 0.15) 100%
        );
      }

      .location-card:hover img {
        transform: scale(1.04);
      }

      .location-title {
        position: absolute;
        top: 0.8rem;
        left: 0.9rem;
        z-index: 1;
        color: white;
        font-size: 0.88rem;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin: 0;
      }

      .back-link {
        position: fixed;
        top: 1rem;
        left: 1rem;
        z-index: 10;
      }

      @media (max-width: 992px) {
        .outer-grid {
          grid-template-columns: 1fr;
        }

        .location-card.tall {
          min-height: 320px;
        }
      }

.logo-center {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}

/* .logo-center img {
  height: 60px;
} */