:root {
         --red: #E57925;
         --dark: #222;
         --muted: #777;
         --card-bg: #fff;
         --page-pad: 28px;
     }

     * {
         box-sizing: border-box
     }

     html {
         scroll-behavior: smooth;
     }

     body {
         margin: 0;
         font-family: Inter, Arial, Helvetica, sans-serif;
         color: var(--dark);
         background: #fafafa;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
     }

     /* Header */
     .topbar {
         background: var(--red);
         color: #fff;
         padding: 10px var(--page-pad);
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 12px;
     }

     .topbar .brand {
         display: flex;
         gap: 12px;
         align-items: center;
     }

     .brand .logo img {
         height: 60px;
     }

     .topbar .actions {
         display: flex;
         gap: 12px;
         align-items: center;
     }

     .topbar .actions a {
         color: #fff;
         text-decoration: none;
         font-weight: 600;
         padding: 8px 12px;
         border-radius: 6px;
     }


     /* Nav / utility */
     .nav {
         display: flex;
         gap: 18px;
         padding: 14px var(--page-pad);
         align-items: center;
         justify-content: center;
     }

     .nav a {
         color: var(--dark);
         text-decoration: none;
         font-weight: 600;
         padding: 6px 10px;
         border-radius: 6px;
     }

     .nav a:hover {
         background: #fff6f6
     }

     /* Hero */
     .hero {
         position: relative;
         background-image: url('../img/carousel-1.jpg');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         min-height: 450px;
         display: flex;
         justify-content: center;
         align-items: center;
         padding: 48px var(--page-pad);
     }

     /* Overlay */
     .hero::after {
         content: "";
         position: absolute;
         inset: 0;
         background: rgba(0, 0, 0, 0.40);
     }

     /* Centered content */
     .hero-center {
         position: relative;
         z-index: 2;
         text-align: center;
         max-width: 700px;
         color: #fff;
     }

     .tag {
         display: inline-block;
         background: rgba(255, 255, 255, 0.12);
         padding: 8px 12px;
         border-radius: 999px;
         font-weight: 700;
         margin-bottom: 14px;
     }

     .hero h1 {
         font-size: 44px;
         margin: 0 0 8px;
         line-height: 1.06;
         font-weight: 800;
     }

     .hero p {
         margin: 0 0 16px;
         opacity: 0.95;
     }

     .hero .btn {
         background: var(--red);
         color: #fff;
         border: none;
         padding: 12px 20px;
         font-size: 16px;
         border-radius: 8px;
         cursor: pointer;
         font-weight: 700;
     }

     .section-title {
         display: flex;
         margin-bottom: 18px;
         flex-direction: column;
     }

     .section-title h2 {
         margin: 0;
         font-size: 26px;
         margin-bottom: 1rem;
     }

     .info-row {
         display: flex;
         justify-content: center;
         padding: 60px 10px;
         gap: 100px;
         flex-wrap: wrap;
     }

     .info-item {
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .icon {
         width: 50px;
         height: 50px;
         color: var(--red);
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: 28px;
     }

     .icon i {
         font-style: normal;
     }

     .text strong {
         font-size: 17px;
         font-weight: 700;
         color: #000;
     }

     .text p {
         margin: 0;
         color: #444;
         font-size: 14px;
     }

     .divider {
         width: .5px;
         height: 65px;
         background: #000;
     }

     /* ✅ Responsive adjustments */
     @media (max-width: 1700px) {
         .info-row {
             gap: 40px;
         }
     }

     @media (max-width: 1300px) {
         .info-row {
             gap: 20px;
         }
     }

     @media (max-width: 600px) {
         .info-row {
             flex-direction: column;
             /* Stack items vertically */
             align-items: center;
             gap: 20px;
         }

         .info-item {
             justify-content: center;
             text-align: center;
         }

         .divider {
             display: none;
             /* Hide dividers on small screens */
         }
     }

     /* Menu grid */
     #menu {
         padding: 2rem 18rem;
     }

     .section-title h2 {
         font-size: 28px;
         margin-bottom: 1rem;
         padding: 0 3rem;
     }

     /* Carousel Container */
     .carousel-wrapper {
         display: flex;
         align-items: center;
         gap: 10px;
     }

     .carousel-container {
         overflow: hidden;
         width: 100%;
     }

     .menu-carousel::-webkit-scrollbar {
         display: none;
     }

     .menu-carousel {
         display: flex;
         gap: 20px;
         overflow-x: auto;
         scroll-behavior: smooth;
         padding-bottom: 10px;
     }

     .card {
         background: var(--card-bg);
         border: 1px solid #878787;
         overflow: hidden;
         box-shadow: 0 6px 18px rgba(16, 16, 16, 0.06);
         display: flex;
         flex-direction: column;
         transition: transform .18s ease, box-shadow .18s ease;
         flex: 0 0 auto;
         width: 350px;
         min-width: 200px;
     }

     .card .thumb {
         height: 370px;
         object-fit: cover;
         object-position: 50% 50%;
         background: #eee center/cover no-repeat;
         position: relative;
     }

     .card .body {
         padding: 14px 14px 18px;
         display: flex;
         gap: 10px;
         flex-direction: column;
         flex: 1;
     }

     .card h3 {
         margin: 0 0 8px;
         font-size: 16px;
     }

     .card p.lead {
         margin: 0;
         color: var(--muted);
         font-size: 13px;
         flex: 1;
     }

     .card .meta {
         display: block;
         margin-top: 12px;
     }

     .card .order {
         width: 100%;
         margin-left: 0;
     }

     .order button {
         background: var(--dark);
         color: #fff;
         border: none;
         padding: 8px 12px;
         width: 100%;
         border-radius: 999px;
         cursor: pointer;
         font-size: 16px;
         text-align: center;
         border: 1px solid var(--dark);
         display: block;
     }

     .order button:hover {
         background-color: var(--card-bg);
         color: var(--dark);
         text-decoration: underline;
     }

     /* Badge */
     .badge {
         position: absolute;
         top: 12px;
         left: 12px;
         background: var(--red);
         color: #fff;
         padding: 6px 14px;
         border-radius: 999px;
         font-weight: 700;
         font-size: 13px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
     }

     .carousel-btn {
         color: #878787;
         padding: 12px 16px;
         cursor: pointer;
         font-size: 15px;
         background: none;
         border: none;
     }

     /* Responsive */
     @media (max-width:2200px) {
         #menu {
             padding: 2rem 3rem !important;
         }

         .card {
             width: 300px;
         }
     }

     @media (max-width:1100px) {
         #menu {
             padding: 2rem !important;
         }

         .card {
             width: 250px;
         }
     }

     @media (max-width:560px) {
         #menu {
             padding: 1rem !important;
         }

         .card {
             width: 230px;
         }
     }


     /*======================= Popular Choices ======================= */
     .popular-choices {
         width: 100%;
         padding: 40px 0;
         text-align: center;
     }

     .popular-choices h2 {
         font-size: 32px;
         font-weight: 800;
         margin-bottom: 30px;
     }

     .choices-grid {
         display: grid;
         grid-template-columns: repeat(4, 400px);
         gap: 0;
         justify-content: center;
     }

     .choice-box {
         width: 400px;
         height: 400px;
         border-right: 1px solid var(--dark);
         border-bottom: 1px solid var(--dark);
         border-left: none;
         border-top: none;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         padding: 0;
     }

     .choices-grid .choice-box:nth-child(4n-3) {
         border-left: 1px solid var(--dark);
     }

     .choices-grid .choice-box:nth-child(-n+4) {
         border-top: 1px solid var(--dark);
     }

     .choices-grid .choice-box:nth-child(4n) {
         border-right: 1px solid var(--dark);
     }

     .choices-grid .choice-box:nth-last-child(-n+4) {
         border-bottom: 1px solid var(--dark);
     }

     .choice-img {
         width: 215px;
         height: 212px;
         background: #feefd2;
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: flex-end;
         /* image at bottom of circle */
         margin-bottom: 15px;
     }

     .choice-img img {
         width: auto;
         height: 80%;
         object-fit: contain;
     }

     .choice-box p {
         font-size: 18px;
         font-weight: 600;
         margin: 0;
     }

     .p-order-btn {
         margin-top: 2rem;
         align-items: center;
         display: flex;
         justify-content: center;
     }

     .p-order-btn button {
         border-radius: 999px;
         padding: 7px 25px;
         font-size: 16px;
         background-color: var(--red);
         border: 1px solid var(--red);
         color: var(--card-bg);
         cursor: pointer;
     }

     .p-order-btn button:hover {
         background-color: var(--dark);
     }

     /* Tablets: 2 per row */
     @media (max-width: 1750px) {
         .choices-grid {
             grid-template-columns: repeat(4, 300px);
         }

         .choice-box {
             width: 300px;
             height: 300px;
         }

         .choice-img {
             width: 150px;
             height: 150px;
         }
     }


     @media (max-width: 1328px) {
         .choices-grid {
             grid-template-columns: repeat(4, 250px);
         }

         .choice-box {
             width: 250px;
             height: 250px;
         }

         .choice-img {
             width: 150px;
             height: 150px;
         }
     }

     @media (max-width: 1024px) {
         .choices-grid {
             grid-template-columns: repeat(3, 250px);
         }

         .choice-box {
             width: 250px;
             height: 250px;
         }

         .choice-img {
             width: 150px;
             height: 150px;
         }

         .choices-grid .choice-box:nth-child(4n) {
             border-left: 1px solid var(--dark);
         }

         .choices-grid .choice-box:nth-last-child(-n+4) {
             border-left: 1px solid var(--dark);
         }
     }

     @media (max-width: 800px) {
         .choices-grid {
             grid-template-columns: repeat(2, 300px);
         }

         .choice-box {
             width: 300px;
             height: 300px;
         }

         .choice-img {
             width: 150px;
             height: 150px;
         }
     }

     @media (max-width: 650px) {
         .choices-grid {
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
         }

         .choice-box {
             max-width: 350px;
             height: 200px;
         }

         .choice-img {
             width: 120px;
             height: 120px;
         }

         .choices-grid .choice-box:nth-child(4n-3) {
             border-left: 1px solid var(--dark);
         }

         .choices-grid .choice-box:nth-child(-n+4) {
             border-left: 1px solid var(--dark);
         }
     }

     /*--------------------------------------------------------------
# about
--------------------------------------------------------------*/
     .hero-section {
         position: relative;
         width: 100%;
         height: 500px;
         background: url('../img/about.jpg') center/cover no-repeat;
         display: flex;
         justify-content: center;
         align-items: center;
         color: white;
     }

     .hero-text {
         padding: 20px 30px;
         border-radius: 8px;
     }

     .hero-text h1 {
         margin: 0;
         font-size: 60px;
         font-weight: bold;
     }

     .hero-text p {
         margin: 5px 0;
         font-size: 25px;
         font-weight: 600;
     }

     .hero-text .price {
         font-size: 80px;
         font-weight: bold;
     }

     .center {
         display: flex;
         align-items: center;
         justify-content: center
     }

     /* Info Strip */
     .info-strip {
         display: flex;
         justify-content: center;
         gap: 40px;
         padding: 28px var(--page-pad);
         background: #fff;
         border-bottom: 1px solid #eee;
         flex-wrap: wrap;
     }

     .info-strip .info-item {
         display: flex;
         align-items: center;
         gap: 12px;
         cursor: pointer;
     }

     .info-strip .info-item img {
         width: 42px;
         height: 42px;
     }

     .info-strip .bold {
         font-weight: 700;
         font-size: 15px;
     }

     .info-strip .small {
         font-size: 13px;
         color: var(--muted);
         margin-top: 2px;
     }

     @media (max-width: 640px) {
         .info-strip {
             gap: 24px;
             padding: 22px 18px;
         }
     }

     /*=============== Footer =====================*/
     footer,
     .footer {
         background-color: var(--red);
         color: var(--card-bg);
         padding: 36px 28px;
     }

     .footer .btn.btn-social {
         margin-right: 5px;
         width: 35px;
         height: 35px;
         display: flex;
         align-items: center;
         justify-content: center;
         color: var(--light);
         border: 1px solid var(--light);
         border-radius: 35px;
         transition: .3s;
     }

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

     .q-links li a {
         padding: 0;
         text-decoration: none;
         margin: 0;
         line-height: 2;
         font-size: 14px;
         color: var(--light);
     }

     .foot-grid {
         max-width: 1200px;
         margin: 0 auto;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
         gap: 18px;
     }

     .foot-grid p {
         font-size: 15px;
     }

     .footer .btn.btn-social:hover {
         color: var(--primary);
     }

     .footer .btn.btn-link {
         display: block;
         margin-bottom: 5px;
         padding: 0;
         text-align: left;
         color: var(--light);
         font-size: 15px;
         font-weight: normal;
         text-transform: capitalize;
         transition: .3s;
     }

     .bottom-text {
         background: #fff;
         text-align: center;
         padding: 12px 0;
         width: 100%;
         font-size: 14px;
         font-weight: 400;
     }

     .contact i {
         margin-right: 2px;
     }

     .bottom-text a {
         color: var(--red);
     }

     .footer .btn.btn-link::before {
         position: relative;
         content: "\f105";
         font-family: "Font Awesome 5 Free";
         font-weight: 900;
         margin-right: 10px;
     }

     .footer .btn.btn-link:hover {
         letter-spacing: 1px;
         box-shadow: none;
     }

     .footer .copyright {
         padding: 15px 0;
         font-size: 14px;
         text-align: center;
         border-top: 1px solid var(--light);
         background: #fff;
         color: var(--secondary);
     }

     body {
         display: flex;
         flex-direction: column;
         min-height: 100vh;
     }

     main {
         flex: 1;
         /* takes up remaining space */
     }

     footer,
     .footer,
     .footer .copyright {
         flex-shrink: 0;
         /* prevents shrinking if content is short */
     }