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

  :root {
      --red: #e02020;
      --green: #1a7a1a;
      --dark: #111;
      --darker: #0a0a0a;
      --white: #fff;
      --gray: #888;
      --light-gray: #f5f5f5;
      --gold: #c9a84c;
  }

  html {
      scroll-behavior: smooth;
  }

  body {
      font-family: 'Montserrat', sans-serif;
      color: var(--white);
      background: var(--dark);
      overflow-x: hidden;
  }

  /* ── NAVBAR ── */
  nav {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background: #000;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 40px;
      height: 70px;
      box-shadow: 0 2px 20px rgba(0, 0, 0, .5);
  }

  .logo {
      display: flex;
      align-items: center;
      gap: 0;
  }

  .logo-text {
      font-family: 'Playfair Display', serif;
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--white);
      line-height: 1;
  }

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

  .logo-sub {
      font-family: 'Dancing Script', cursive;
      font-size: .85rem;
      color: var(--red);
      letter-spacing: 2px;
      display: block;
      text-align: center;
      border-top: 1px solid var(--red);
      border-bottom: 1px solid var(--red);
      padding: 1px 4px;
      margin-top: 2px;
  }

  .nav-links {
      display: flex;
      align-items: center;
      gap: 36px;
      list-style: none;
  }

  .nav-links a {
      color: var(--white);
      text-decoration: none;
      font-size: .85rem;
      font-weight: 500;
      letter-spacing: .5px;
      transition: color .2s;
  }

  .nav-links a:hover {
      color: var(--red);
  }

  .nav-btns {
      display: flex;
      align-items: center;
      gap: 12px;
  }

  .btn-outline {
      border: 2px solid var(--white);
      background: transparent;
      color: var(--white);
      padding: 8px 20px;
      border-radius: 30px;
      font-family: 'Montserrat', sans-serif;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s;
      text-decoration: none;
      display: inline-block;
  }

  .btn-outline:hover {
      background: var(--white);
      color: #000;
  }

  .btn-red {
      background: var(--red);
      color: var(--white);
      border: none;
      padding: 9px 22px;
      border-radius: 30px;
      font-family: 'Montserrat', sans-serif;
      font-size: .8rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      transition: background .2s;
      text-decoration: none;
  }

  .btn-red:hover {
      background: #c01010;
  }

  .btn-red svg {
      width: 16px;
      height: 16px;
      fill: currentColor;
  }

  /* hamburger */
  .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
  }

  .hamburger span {
      width: 24px;
      height: 2px;
      background: var(--white);
      display: block;
      transition: all .3s;
  }

  /* ── HERO ── */
  #hero {
      /* margin-top: 70px; */
      background: linear-gradient(135deg, #e8e8e4 0%, #d4d4ce 50%, #c8c8c2 100%);
      /* min-height: calc(100vh - 70px); */
      display: flex;
      align-items: center;
      position: relative;
      overflow: hidden;
  }
#hero  #carouselExampleSlidesOnly{
    height: ;
    width: 100%
}
  #hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="400" height="400" filter="url(%23noise)" opacity=".08"/></svg>') repeat;
      pointer-events: none;
  }

  .hero-inner {
      max-width: 1300px;
      margin: 0 auto;
      padding: 60px 40px;
      display: flex;
      align-items: center;
      gap: 60px;
      width: 100%;
  }

  .hero-text {
      flex: 0 0 420px;
  }

  .hero-title-festive {
      font-family: 'Dancing Script', cursive;
      font-size: 4.5rem;
      color: var(--red);
      line-height: 1;
      margin-bottom: -10px;
      animation: fadeInLeft .8s ease forwards;
  }

  .hero-title-dinner {
      font-family: 'Dancing Script', cursive;
      font-size: 4.5rem;
      color: var(--green);
      line-height: 1;
      animation: fadeInLeft .8s .15s ease both;
  }

  .hero-price-wrap {
      margin-top: 28px;
      animation: fadeInLeft .8s .3s ease both;
  }

  .for-only {
      font-size: .85rem;
      font-weight: 800;
      color: #333;
      letter-spacing: 2px;
      text-transform: uppercase;
      position: relative;
      display: inline-block;
  }

  .for-only::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      right: 0;
      height: 2px;
      background: #333;
  }

  .price-pill {
      background: var(--red);
      color: var(--white);
      display: inline-flex;
      align-items: baseline;
      padding: 12px 28px;
      border-radius: 40px;
      margin-top: 10px;
      gap: 4px;
  }

  .price-rs {
      font-size: 1.1rem;
      font-weight: 700;
  }

  .price-num {
      font-size: 2.8rem;
      font-weight: 900;
      line-height: 1;
  }

  .price-tax {
      font-size: .65rem;
      font-weight: 700;
      line-height: 1.2;
      text-align: right;
  }

  .reservation {
      margin-top: 32px;
      animation: fadeInLeft .8s .45s ease both;
  }

  .reservation p {
      font-size: .78rem;
      font-weight: 700;
      color: #333;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 8px;
  }

  .reservation a {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--red);
      text-decoration: none;
      font-size: .95rem;
      font-weight: 700;
  }

  .phone-icon {
      background: var(--green);
      width: 32px;
      height: 32px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
  }

  .phone-icon svg {
      width: 16px;
      height: 16px;
      fill: white;
  }

  /* hero images collage */
  .hero-images {
      flex: 1;
      display: grid;
      grid-template-columns: 1fr 1.4fr 1fr;
      gap: 0;
      height: 500px;
      animation: fadeInRight .9s .2s ease both;
  }

  .hero-images .img-wrap {
      overflow: hidden;
      border: 3px solid rgba(200, 170, 60, .4);
  }

  .hero-images .img-wrap:nth-child(2) {
      transform: scale(1.06);
      z-index: 2;
      border-color: rgba(200, 170, 60, .7);
  }

  .hero-images img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .4s;
  }

  .hero-images .img-wrap:hover img {
      transform: scale(1.05);
  }

  /* placeholder gradient images */
  .food-img-1 {
      background: linear-gradient(135deg, #b8860b 0%, #8b6914 40%, #654c0e 100%);
  }

  .food-img-2 {
      background: linear-gradient(135deg, #5a3e1b 0%, #8b5a2b 40%, #6b4423 70%, #3d2108 100%);
  }

  .food-img-3 {
      background: linear-gradient(135deg, #8b1a1a 0%, #a0522d 40%, #cd853f 100%);
  }

  @keyframes fadeInLeft {
      from {
          opacity: 0;
          transform: translateX(-30px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes fadeInRight {
      from {
          opacity: 0;
          transform: translateX(30px);
      }

      to {
          opacity: 1;
          transform: translateX(0);
      }
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
          transform: translateY(20px);
      }

      to {
          opacity: 1;
          transform: translateY(0);
      }
  }

  /* ── BRANDS SECTION ── */
  #brands {
      background: #000;
      padding: 80px 40px;
      text-align: center;
  }

  .section-title {
      font-family: 'Playfair Display', serif;
      font-size: 2.2rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 8px;
  }

  .section-title strong {
      font-family: 'Playfair Display', serif;
      font-weight: 900;
  }

  .section-subtitle {
      color: var(--gray);
      font-size: .85rem;
      margin-bottom: 50px;
  }

  .brands-grid {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
      max-width: 1000px;
      margin: 0 auto 40px;
  }

  .brand-card {
      background: var(--white);
      border-radius: 8px;
      padding: 24px 30px;
      width: 210px;
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      transition: transform .2s, box-shadow .2s;
      border: 2px solid transparent;
  }

  .brand-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 30px rgba(224, 32, 32, .3);
      border-color: var(--red);
  }

  .brand-logo-text {
      font-family: 'Playfair Display', serif;
      font-size: 1.3rem;
      font-weight: 900;
      color: #111;
      text-align: center;
      line-height: 1.2;
  }

  .brand-logo-text .apostrophe {
      color: #111;
  }

  .brand-tag {
      font-family: 'Dancing Script', cursive;
      font-size: .95rem;
      font-weight: 700;
      padding: 2px 14px;
      border-radius: 4px;
      margin-top: 6px;
      display: inline-block;
  }

  .tag-restaurant {
      background: transparent;
      color: var(--red);
      border-top: 2px solid var(--red);
      border-bottom: 2px solid var(--red);
  }

  .tag-express {
      background: var(--red);
      color: var(--white);
  }

  .tag-village {
      background: transparent;
      color: var(--green);
      border-top: 2px solid var(--green);
      border-bottom: 2px solid var(--green);
  }

  .tag-garden {
      background: transparent;
      color: var(--red);
      border-top: 2px solid var(--red);
      border-bottom: 2px solid var(--red);
  }

  .brands-btns {
      display: flex;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
  }

  .btn-dark-pill {
      background: transparent;
      color: var(--white);
      border: 2px solid var(--white);
      padding: 10px 30px;
      border-radius: 30px;
      font-family: 'Montserrat', sans-serif;
      font-size: .82rem;
      font-weight: 600;
      cursor: pointer;
      width: 210px;
      transition: all .2s;
      text-decoration: none;
      display: inline-block;
      text-align: center;
  }

  .btn-dark-pill:hover {
      background: var(--white);
      color: #000;
  }

  /* ── FRANCHISE SECTION ── */
  .franchise-section {
      background: #0d0d0d;
      padding: 80px 40px;
      text-align: center;
  }

  .franchise-location {
      max-width: 1100px;
      margin: 60px auto 0;
      display: flex;
      align-items: center;
      gap: 60px;
  }

  .franchise-location.reverse {
      flex-direction: row-reverse;
  }

  .franchise-img {
      flex: 0 0 480px;
      height: 340px;
      overflow: hidden;
      border-radius: 4px;
  }

  .franchise-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }

  /* fallback gradient buildings */
  .building-1 {
      background: linear-gradient(160deg, #1a2a1a 0%, #2a3a2a 30%, #ffd700 50%, #2a2a1a 70%, #111 100%);
  }

  .building-2 {
      background: linear-gradient(160deg, #0d1a2a 0%, #1a2a3a 30%, #ffa500 45%, #3a2a0d 70%, #0a0a08 100%);
  }

  .building-3 {
      background: linear-gradient(160deg, #1a1a2a 0%, #2a1a3a 30%, #ff8c00 45%, #1a0d0d 70%, #0a0a0a 100%);
  }

  .building-village {
      background: linear-gradient(160deg, #0d1a0d 0%, #1a2a1a 20%, #ffd700 40%, #2a1a0d 70%, #0a0505 100%);
  }

  .franchise-info {
      flex: 1;
      text-align: left;
  }

  .franchise-city {
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 10px;
  }

  .franchise-name {
      font-family: 'Playfair Display', serif;
      font-size: 2rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 18px;
  }

  .franchise-name strong {
      font-weight: 900;
  }

  .franchise-detail {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: #bbb;
      font-size: .88rem;
      margin-bottom: 10px;
  }

  .franchise-detail svg {
      width: 14px;
      height: 14px;
      fill: var(--red);
      flex-shrink: 0;
      margin-top: 2px;
  }

  .btn-directions {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 2px solid var(--white);
      color: var(--white);
      padding: 11px 24px;
      border-radius: 30px;
      margin-top: 24px;
      font-family: 'Montserrat', sans-serif;
      font-size: .8rem;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      transition: all .2s;
      text-decoration: none;
  }

  .btn-directions:hover {
      background: var(--white);
      color: #000;
  }

  .btn-directions .arrow-circle {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--red);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .btn-directions .arrow-circle svg {
      width: 12px;
      height: 12px;
      fill: white;
  }

  .btn-directions-green {
      border-color: var(--green);
  }

  .btn-directions-green .arrow-circle {
      background: var(--green);
  }

  .btn-directions-green:hover {
      background: var(--green);
      color: white;
  }

  /* ── EXPRESS FRANCHISES ── */
  .express-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 40px;
      max-width: 1100px;
      margin: 60px auto 0;
  }

  .express-card {
      text-align: center;
  }

  .express-card-img {
      width: 100%;
      height: 220px;
      overflow: hidden;
      border-radius: 4px;
      margin-bottom: 20px;
  }

  .express-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .3s;
  }

  .express-card:hover .express-card-img img {
      transform: scale(1.05);
  }

  .express-city {
      font-size: .68rem;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 8px;
  }

  .express-name {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      font-weight: 400;
      color: var(--white);
      margin-bottom: 12px;
  }

  .express-name strong {
      font-weight: 900;
  }

  .express-addr {
      color: #aaa;
      font-size: .8rem;
      margin-bottom: 6px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      gap: 6px;
  }

  .express-addr svg {
      width: 12px;
      height: 12px;
      fill: #aaa;
      flex-shrink: 0;
      margin-top: 2px;
  }

  .express-phone {
      color: #aaa;
      font-size: .8rem;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
  }

  .express-phone svg {
      width: 12px;
      height: 12px;
      fill: #aaa;
  }

  .btn-dir-sm {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      border: 2px solid #333;
      color: var(--white);
      padding: 9px 20px;
      border-radius: 30px;
      margin-top: 14px;
      font-family: 'Montserrat', sans-serif;
      font-size: .78rem;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      transition: all .2s;
      text-decoration: none;
  }

  .btn-dir-sm:hover {
      border-color: var(--red);
  }

  .btn-dir-sm .arrow-circle {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--red);
      display: flex;
      align-items: center;
      justify-content: center;
  }

  .btn-dir-sm .arrow-circle svg {
      width: 10px;
      height: 10px;
      fill: white;
  }

  /* building gradients for express */
  .exp-b1 {
      background: linear-gradient(160deg, #1a1505 0%, #3a2a05 30%, #ffd700 45%, #2a1a05 100%);
  }

  .exp-b2 {
      background: linear-gradient(160deg, #050d1a 0%, #0d1a2a 30%, #ffa500 45%, #1a0d00 100%);
  }

  .exp-b3 {
      background: linear-gradient(160deg, #0a0a1a 0%, #1a1a2a 30%, #4a90d9 45%, #0a0a0a 100%);
  }

  .exp-b4 {
      background: linear-gradient(160deg, #1a1a0a 0%, #2a2a1a 30%, #e0e0d0 45%, #0a0a08 100%);
  }

  .exp-b5 {
      background: linear-gradient(160deg, #1a0505 0%, #2a0d0d 30%, #ff4500 45%, #0a0505 100%);
  }

  .exp-b6 {
      background: linear-gradient(160deg, #050a1a 0%, #0a1a2a 30%, #87ceeb 45%, #0a0a0a 100%);
  }

  .exp-b7 {
      background: linear-gradient(160deg, #0a1a0a 0%, #1a2a1a 30%, #ffd700 45%, #0a0a05 100%);
  }

  .exp-b8 {
      background: linear-gradient(160deg, #150505 0%, #2a0a0a 30%, #ff6347 45%, #0a0505 100%);
  }

  .exp-b9 {
      background: linear-gradient(160deg, #0d0d0d 0%, #1a1a1a 30%, #d3d3d3 45%, #0a0a0a 100%);
  }

  /* ── OPENING SOON ── */
  .opening-soon-section {
      background: #000;
      padding: 80px 40px;
      text-align: center;
  }

  .soon-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      max-width: 1000px;
      margin: 50px auto 0;
  }

  .soon-card {
      background: var(--white);
      border-radius: 8px;
      padding: 30px 20px;
      text-align: center;
      transition: transform .2s;
  }

  .soon-card:hover {
      transform: translateY(-4px);
  }

  .soon-pin {
      width: 44px;
      height: 44px;
      margin: 0 auto 14px;
  }

  .soon-pin svg {
      width: 44px;
      height: 44px;
  }

  .soon-label {
      font-size: .65rem;
      font-weight: 700;
      letter-spacing: 3px;
      color: var(--red);
      text-transform: uppercase;
      margin-bottom: 10px;
  }

  .soon-name {
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      font-weight: 400;
      color: #111;
      line-height: 1.4;
  }

  .soon-name strong {
      font-weight: 900;
  }

  /* ── FOOTER ── */
  footer {
      background: #111;
      padding: 60px 40px 30px;
      border-top: 1px solid #222;
  }

  .footer-inner {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.5fr 1fr 1.5fr 1.2fr;
      gap: 50px;
      margin-bottom: 50px;
  }

  .footer-logo-text {
      font-family: 'Playfair Display', serif;
      font-size: 1.4rem;
      font-weight: 900;
      color: var(--white);
  }

  .footer-logo-sub {
      font-family: 'Dancing Script', cursive;
      font-size: .8rem;
      color: var(--red);
      border-top: 1px solid var(--red);
      border-bottom: 1px solid var(--red);
      padding: 1px 4px;
      display: inline-block;
      margin-top: 2px;
      margin-bottom: 16px;
  }

  .footer-desc {
      color: #888;
      font-size: .8rem;
      line-height: 1.7;
  }

  .footer-heading {
      font-size: .95rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 20px;
      letter-spacing: .5px;
  }

  .footer-links {
      list-style: none;
  }

  .footer-links li {
      margin-bottom: 10px;
  }

  .footer-links a {
      color: #888;
      text-decoration: none;
      font-size: .82rem;
      transition: color .2s;
  }

  .footer-links a:hover {
      color: var(--red);
  }

  .contact-item {
      margin-bottom: 14px;
  }

  .contact-label {
      font-size: .75rem;
      font-weight: 700;
      color: var(--white);
      margin-bottom: 4px;
  }

  .contact-value {
      color: #888;
      font-size: .82rem;
      line-height: 1.5;
  }

  .social-row {
      display: flex;
      gap: 10px;
      margin-bottom: 16px;
  }

  .social-btn {
      width: 38px;
      height: 38px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      text-decoration: none;
      transition: transform .2s;
  }

  .social-btn:hover {
      transform: scale(1.1);
  }

  .social-btn svg {
      width: 16px;
      height: 16px;
      fill: white;
  }

  .fb {
      background: #1877f2;
  }

  .ig {
      background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
  }

  .tw {
      background: #1da1f2;
  }

  .app-btn {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #111;
      border: 1px solid #333;
      border-radius: 8px;
      padding: 7px 14px;
      margin-bottom: 8px;
      cursor: pointer;
      text-decoration: none;
      width: fit-content;
      transition: border-color .2s;
  }

  .app-btn:hover {
      border-color: var(--red);
  }

  .app-btn svg {
      width: 20px;
      height: 20px;
      fill: white;
  }

  .app-btn-text {
      text-align: left;
  }

  .app-btn-text .small {
      font-size: .6rem;
      color: #888;
  }

  .app-btn-text .large {
      font-size: .82rem;
      color: var(--white);
      font-weight: 600;
  }

  .footer-bottom {
      max-width: 1200px;
      margin: 0 auto;
      border-top: 1px solid #222;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
  }

  .footer-bottom p {
      color: #555;
      font-size: .78rem;
  }

  .footer-bottom a {
      color: #555;
      text-decoration: none;
      font-size: .78rem;
  }

  .footer-bottom .legal {
      display: flex;
      gap: 16px;
  }

  /* ── MOBILE NAV ── */
  .mobile-menu {
      display: none;
      position: fixed;
      top: 70px;
      left: 0;
      right: 0;
      background: #000;
      z-index: 999;
      flex-direction: column;
      padding: 20px 30px 30px;
      border-top: 1px solid #222;
  }

  .mobile-menu.open {
      display: flex;
  }

  .mobile-menu a {
      color: var(--white);
      text-decoration: none;
      font-size: 1rem;
      padding: 12px 0;
      border-bottom: 1px solid #222;
      font-weight: 500;
  }

  .mobile-menu a:last-child {
      border-bottom: none;
  }

  .mobile-menu .mob-btns {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 20px;
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 1024px) {
      .hero-images {
          display: none;
      }

      .hero-text {
          flex: 1;
      }

      .franchise-location,
      .franchise-location.reverse {
          flex-direction: column;
      }

      .franchise-img {
          flex: none;
          width: 100%;
          max-width: 500px;
          margin: 0 auto;
      }

      .franchise-info {
          text-align: center;
      }

      .franchise-detail {
          justify-content: center;
      }

      .footer-inner {
          grid-template-columns: 1fr 1fr;
      }
  }

  @media (max-width: 768px) {
      nav {
          padding: 0 20px;
      }

      .nav-links,
      .nav-btns {
          display: none;
      }

      .hamburger {
          display: flex;
      }

      #hero {
          min-height: auto;
          padding: 0;
      }

      .hero-inner {
          padding: 50px 20px;
          flex-direction: column;
      }

      .hero-title-festive,
      .hero-title-dinner {
          font-size: 3rem;
      }

      .brands-grid {
          gap: 14px;
      }

      .brand-card {
          width: 160px;
          padding: 18px 16px;
      }

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

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

      .footer-inner {
          grid-template-columns: 1fr;
          gap: 30px;
      }

      .footer-bottom {
          flex-direction: column;
          text-align: center;
      }

      .franchise-section,
      .opening-soon-section,
      #brands,
      footer {
          padding-left: 20px;
          padding-right: 20px;
      }
  }

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

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

      .brands-grid {
          flex-direction: column;
          align-items: center;
      }

      .brand-card {
          width: 100%;
          max-width: 280px;
      }

      .brands-btns {
          flex-direction: column;
          align-items: center;
      }

      .btn-dark-pill {
          width: 100%;
          max-width: 280px;
      }

      .hero-title-festive,
      .hero-title-dinner {
          font-size: 2.5rem;
      }
  }

  /* divider */
  .section-divider {
      height: 1px;
      background: #222;
      max-width: 1100px;
      margin: 0 auto;
  }