/* Global Styles */
* {
font-family: "Open Sans", sans-serif;
scroll-behavior: smooth;
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
/*  font-family: inherit;   */
line-height: 1.6;
font-family: "Open Sans", sans-serif;
}


/* ---------------------------------------------- */
/* Video Section -------------------------------- */
/* ---------------------------------------------- */

.video-section > .container {
margin-top: 0 !important;
padding-top: 0 !important;
}

.video-section {
position: relative;
width: 100%;
height: 100vh;
/* min-height: 670px; */
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}


.page-head-image-section {
position: relative;
width: 100%;
/* height: 100vh; */
min-height: 600px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.page-head-image-section-image {
position: absolute;
top: 40%;
left: 50%;
height: 100%;
width: 100vw;
object-fit: cover;
transform: translate(-50%, -40%);
z-index: -1;
}

.bg-home-video {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: -1;
}

.video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}

.video-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
max-width: 80%;
margin: 0 auto;
font-size: 2rem;
}

.main-logo {
margin-top: 50px;
}

#video-subtext {
margin: 10px;
font-size: 1.5rem;
font-weight: 200;
color: white;
}

.btn-video-section {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
padding-top: 15px;
padding-bottom: 15px;
margin-bottom: 30px;
}

.video-btn {
width: 220px;
height: 50px;
border: 2px solid white;
color: white;
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease;
font-size: 1rem;
font-weight: bold;
text-align: center;
}

.video-btn:hover {
background-color: white;
color: #222;
}


.full-width-btn {
width: 100%;
height: 50px;
border: 2px solid white;
color: white;
background-color: transparent;
transition: background-color 0.3s ease, color 0.3s ease;
font-size: 1rem;
font-weight: bold;
text-align: center;
}

.full-width-btn:hover {
background-color: white;
color: #222;
}

/* ---------------------------------------------- */
/* About Section -------------------------------- */
/* ---------------------------------------------- */
.about-section {
position: relative;
background-color: #161616;
color: white;
padding: 5rem 0;
}

.about-section-time {
position: relative;
background-color: white;
color: black;
padding: 5rem 0 0 0;
}

/* Blending Video Section and About Section for smooth transition */
.about-section::before {
content: "";
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #161616, rgba(0, 0, 0, 0.5), transparent);
}

.about-section p {
color: white;
line-height: 30px;
}

.about-section-time p {
color: black;
line-height: 35px;
padding-bottom: 14px;
}

.about-item-left .payment-table tr td {
    padding: 10px 5px;
}

.section-title {
padding-bottom: 20px;
font-weight: 600;
}

.about-item {
padding: 0 15px;
}

.about-item-left {
padding: 0 15px;
}

.about-image {
width: 100%;
max-width: 570px;
height: 100%;
object-fit: cover;
display: inline-block;
}

.about-time-item {
width: 100%;
max-width: 570px;
}

.about-time-image {
height: 100%;
object-fit: cover;
}

.about-content, .about-section-time-content {
font-size: 1.2rem;
}

.about-section-time p a {
font-size: 1.2rem;
}

@media screen and (max-width: 768px) {
.about-image {
    width: 100%;
    height: auto;
}
}

/* ---------------------------------------------- */
/* Item Promotions ------------------------------ */
/* ---------------------------------------------- */
.item-promotion {
text-align: center;
margin-top: 30px;
}

.item-promotion .item-card {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
background-color: white;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
padding: 20px;
}

.item-promotion .item-card img {
border-radius: 10px;
}

.item-promotion .card-body {
padding-left: 20px;
}

.item-promotion .card-body h4 {
font-size: 1.5rem;
font-weight: bold;
}

.item-promotion .card-body p {
font-size: 1rem;
color: #666;
}

.item-promotion .price {
font-size: 1.5rem;
font-weight: bold;
color: #e74c3c;
}

.item-promotion .btn-primary {
font-size: 1rem;
padding: 10px 20px;
}

.item-promotion .item-card .d-flex {
margin-top: 10px;
}

/* ---------------------------------------------- */
/* Review Section ------------------------------- */
/* ---------------------------------------------- */
.customer-reviews {
background-color: #917a58;
color: white;
padding: 50px 30px;
}

.customer-reviews h2 {
font-weight: bold;
text-shadow: none;
}

.review-card {
background: transparent;
padding: 20px;
}

.review-card-text {
font-weight: 100;
color: white;
font-size: 18px;
}

.stars {
font-size: 30px;
color: #161616;
margin-bottom: 10px;
}

@media screen and (max-width: 480px) {
.customer-reviews {
    padding: 50px 0px;
}
}

/* ---------------------------------------------- */
/* Map Section ---------------------------------- */
/* ---------------------------------------------- */

iframe {
display: block; /* Prevent inline element spacing issue */
margin: 0; /* Remove any margin */
padding: 0; /* Remove any padding */
border: 0; /* Ensure no border is adding space */
width: 100%; /* Ensure full width */
}


/* ---------------------------------------------- */
/* --------------- TAKEAWAY PAGE ---------------- */
/* ---------------------------------------------- */

.top-bg > .container {
margin-top: 0 !important;
padding-top: 0 !important;
}

.top-bg {
position: relative;
width: 100%;
height: 300px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

.top-bg .bg-media {
position: absolute;
top: 50%;
left: 50%;
width: 100vw;
height: 100vh;
object-fit: cover;
transform: translate(-50%, -50%);
z-index: -1;
}

.top-bg .top-bg-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 0;
}

.top-bg .bg-content {
position: relative;
z-index: 1;
text-align: center;
color: white;
max-width: 80%;
margin: 0 auto;
font-size: 2rem;

top: 45px;
}

#banner-text {
position: relative;
/* top: -100px; */
margin: 10px;
font-size: 2rem;
font-weight: 200;
color: white;
text-transform: uppercase;
}

/* Menu */

.menu {
background-color: #161616;
/* padding: 5rem; */
display: flex;
justify-content: center;
}

.menu-container {
position: relative;
/* top: -300px; */
background: url(../../images/white-noise-bg.png) repeat;
padding: 20px;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 1rem;
overflow: visible; /* Changed from hidden to allow sticky nav to show */
margin-bottom: 50px;
}

.category-description {
font-size: 0.8rem;
color: #555;
text-align: left;
padding: 0 15px;
margin-bottom: 10px;
font-style: italic;
}

.category-description ul {
list-style-type: disc;
padding: 0 0 0 0;
margin: 0 0 0 0;
}

.scroll-container {
position: relative;
display: flex;
align-items: center;
background: white;
border-radius: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
overflow: visible;
width: 100%;
margin-left: auto;
}

.all-items-tab {
position: absolute;
left: 20px;
/* z-index: 2; */
width: 120px;
padding-right: 10px;
}

.all-items-tab .tab-card {
background-color: #f4cc57;
}

.all-items-tab .tab-card span {
color: #161616;
font-weight: bold;
}

/* Adjust slider position to accommodate the All Items button */
.slider {
margin-left: 80px; /* Space for All Items button */
/* width: calc(
    100% - 170px
);  */
width: 100%;
}

.menu-nav {
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
margin: 0;
display: flex;
justify-content: flex-end;
}

.slider {
position: relative;
/*  width: 85vw;    */
background-color: white;
border-radius: 1rem;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.slider .icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 2.4rem;
height: 100%;
color: #444;
display: flex;
align-items: center;
z-index: 1001; /* Increased z-index to appear above selected tabs */
}

.slider .icon:first-child {
left: 0;
background: linear-gradient(to right, white 45%, transparent);
}

.slider .icon:last-child {
justify-content: flex-end;
right: 0;
background: linear-gradient(to left, white 45%, transparent);
}

.slider .icon.hide {
display: none;
}

.icon .left-arrow,
.icon .right-arrow {
display: inline-block;
width: 2.4rem;
height: auto;
/* border-radius: 0%; */
text-align: center;
font: 200 2rem / 2.4rem "poppins", sans-serif;
z-index: 2000;
}

.icon span:hover {
/* background-color: #AB47BC; */
color: #006064;
cursor: pointer;
}

.slider .tabs {
min-width: 90%;
list-style: none;
display: flex;
/* gap: 0.5rem; */
overflow-x: auto;
scroll-behavior: smooth;
margin-top: 15px;
padding: 0 25px;
}

.slider .tabs::-webkit-scrollbar {
display: none;
}

/* WebKit browsers (Chrome, Safari, Edge) */
.custom-scroll::-webkit-scrollbar {
  width: 8px;
}

.custom-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scroll::-webkit-scrollbar-thumb {
  background-color: rgba(100, 100, 100, 0.4);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.custom-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 100, 100, 0.6);
}

/* Firefox */
.custom-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 100, 100, 0.4) transparent;
}

.tabs .tab {
white-space: nowrap;
display: flex;
justify-content: center; /* Center the card horizontally */
align-items: center; /* Center the card vertically */
padding: 0.3em;
transition: 0.2s ease-in-out;
}

.tabs .tab:hover {
/* background-color: #e1bee7; */
cursor: pointer;
}

.tabs .tab.active {
/* background-color: #ab47bc; */
color: white;
}

.tab-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e0f7fa;
padding: 10px;
border-radius: 7px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Card shadow */
transition: 0.3s ease;
}

.tab-card:hover {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Hover effect for the card */
}

.tab-icon {
width: 30px; /* Icon size */
height: 30px;
margin-bottom: 8px; /* Space between icon and text */
}

.tab span {
font-size: 0.9rem;
font-weight: 500;
}

.tab-card span {
font-size: 0.9rem;
font-weight: 500;
color: #808080; /* Default grey color */
}

.tab-card:hover span {
color: black; /* Change text color to black on hover */
}

/* Hover effect - keep styles when selected */
.tab-card.selected {
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Keep shadow on select */
}

.tab-card.selected span {
color: black; /* Keep text color black when selected */
}

/* Icon styling */
.tab-card img {
width: 2.5rem; /* Icon size */
height: 2.5rem;
margin-bottom: 8px; /* Space between image and text */

display: none;
}

/* Menu items visibility */
.menu-item {
display: none;
}

.menu-item.selected {
display: block;
}

.scroll-menu {
display: flex;
gap: 5px;
overflow-x: auto;
scroll-behavior: smooth;
white-space: nowrap;
scrollbar-width: none; /* Hide scrollbar for Firefox */
-ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
flex-grow: 1;
}

/* Hide scrollbar for Chrome, Safari */
.scroll-menu::-webkit-scrollbar {
display: none;
}

/* Menu items */
.menu-item {
padding: 10px 20px;
font-size: 16px;
color: #333;
cursor: pointer;
flex-shrink: 0;
border-right: 1px solid #ddd;
}

/* Remove last border */
.menu-item:last-child {
border-right: none;
}

.menu-item.selected {
background-color: #f4cc57; /* Yellow background for selected item */
color: #161616; /* Dark text color */
font-weight: bold; /* Optional: make text bold */
border-radius: 10px;
}

/* Scroll buttons */
.scroll-btn {
background: #f4cc57;
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

/* Adjust button visibility */
.scroll-btn:hover {
background: #e5b945;
}

.menu .row {
display: flex;
flex-wrap: wrap;
justify-content: center; /* Center the cards */
/* gap: 20px; */
}

.card {
display: flex;
flex-direction: column;
max-width: 300px;
border-radius: 20px;
overflow: hidden;
transition: transform 0.2s;
align-content: center;
padding: 10px;
position: relative;
margin: 0 auto; /* Add auto margin for centering */
}

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

.card img {
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 10px;
margin-bottom: 10px;
}

.card-body {
text-align: center;
padding: 10px;
}
.card-bottom-container {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
margin-top: auto;
}

.card-price {
font-weight: bold;
font-size: 0.9rem;
color: #161616;
margin-bottom: 10px;
}

.card-btn {
background: #161616;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
font-size: 1rem;
border-radius: 8px;
width: 100%;
margin-top: auto;
}

.card-btn:hover {
border: 1px solid black;
font-weight: bold;
color: black;
}

.restaurant-menu {
padding: 0px 5px 5px 5px;
position: relative;
overflow: hidden;
}

.title-section {
position: relative;
margin: 0 auto;
text-align: center;
}

.menu-subtitle {
font-size: 0.8rem;
letter-spacing: 0.5rem;
padding-bottom: 20px;
}

.title-section h2 {
font-size: 3.5rem;
font-weight: 100;
/*  padding-bottom: 3rem;   */
}

.menu-title {
font-size: 2rem;
}

.separator {
position: relative;
width: 8rem;
height: auto;
display: block;
margin: 1rem auto;
}

.menu-inner-section {
padding: 0 2rem;
}

.menu-item-block {
padding-bottom: 0.5rem;
}

.menu-image-col {
position: relative;
}

.menu-image img {
width: 100%;
height: auto;
display: block;
max-width: 100%;
border-radius: 10px;
}

.menu-image {
padding-left: 0; /* remove fixed padding if unnecessary */
padding-bottom: 15px;
}

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

.dish-name {
white-space: nowrap;
margin: 0;
font-size: 1.3rem;
}

.dots-line {
flex-grow: 1;
border-bottom: 1px dashed white;
border-bottom-style: dotted; /* Ensure it's dotted */
height: 1px;
margin-top: 4px;
border-top: none; /* Remove top border */
border-bottom-width: 1px; /* Adjust the thickness */
border-color: white; /* dot color*/
width: 100%;
margin-left: 10px;
margin-right: 10px;
display: inline-block;
transform: translateY(-2px); /* Align it better vertically */
}

.munu-item-price h5 {
margin: 0;
white-space: nowrap;
font-size: 1.3rem;
}

.munu-item-price {
display: flex;
align-items: center;
justify-content: flex-end;
}

.menu-item-desc p {
font-weight: 100;
font-size: 0.8rem;
color: white;
}

.menu-section-first {
position: relative;
background-color: #161616;
color: white;
padding: 5rem 10rem 5rem 10rem;
}

/* Blending Video Section and About Section for smooth transition for Menu Page */
.menu-section-first::before {
content: "";
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #161616, rgba(0, 0, 0, 0.5), transparent);
}

.menu-section {
position: relative;
background-color: #161616;
color: white;
padding: 0 10rem 5rem 10rem;
}

/* Active and selected tab states */
.tab.active .tab-card,
.tab-card.selected {
background-color: #ff4d4d;
transform: translateY(-2px);
transition: all 0.3s ease;
}

.tab.active .tab-card span,
.tab-card.selected span {
color: white;
}

/* Smooth scroll behavior for the tabs container */
.tabs {
scroll-behavior: smooth;
}

/* Initially hide the dropdown menu */
.all-items-tab .dropdown-menu {
display: none;
position: absolute;
background-color: white;
list-style: none;
border-radius: 5px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1500;
max-height: 400px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #f4cc57 #ffffff;
}

.all-items-tab:hover .dropdown-menu {
display: block;
}

.dropdown-menu li {
padding: 0;
}

.dropdown-menu li a {
color: #161616;
text-decoration: none;
display: block;
padding: 8px 16px;
transition: all 0.3s ease;
border-radius: 5px;
margin: 2px;
}

.dropdown-menu li a:hover {
background-color: #f4cc57;
color: #161616;
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li a.selected {
background-color: #ff4d4d;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.all-items-tab .dropdown-menu::-webkit-scrollbar {
width: 8px;
}

.all-items-tab .dropdown-menu::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 4px;
}

.all-items-tab .dropdown-menu::-webkit-scrollbar-thumb {
background-color: #f4cc57;
border-radius: 4px;
border: 2px solid #ffffff;
}

.all-items-tab .dropdown-menu::-webkit-scrollbar-thumb:hover {
background-color: #e5b945;
}

.cart {
display: flex;
flex-direction: column;
gap: 1rem;
}

/* Cart */
.floating-cart {
position: fixed;
top: 50%;
right: 0;
transform: translateY(-50%);
background-color: #ffffff;
height: 10rem;
padding: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 1001;
transition: right 0.3s ease-in-out;
border-top-left-radius: 150px;
border-bottom-left-radius: 150px;
display: flex;
align-items: center;
justify-content: center;
}

.cart-panel {
position: fixed;
top: 0;
right: -30rem;
width: 30rem;
height: 100vh;
background-color: #fff;
box-shadow: -4px 0 8px rgba(0, 0, 0, 0.2);
z-index: 1200;
transition: right 0.3s ease-in-out;
display: flex;
flex-direction: column;
}

.close-cart-btn {
font-size: 1.5rem;
background: none;
border: none;
cursor: pointer;
color: #333;
padding: 0;
margin-right: auto; /* if you want it on the left */
cursor: pointer;
z-index: 1300;
}

.cart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem;
border-bottom: 1px solid #ddd;
position: relative;
}

.cart-header h3 {
margin: 0;
}

.cart-panel.active {
right: 0;
}

.cart-footer {
padding: 1rem;
background: #fff;
border-top: 1px solid #ddd;
}

.checkout-btn {
width: 100%;
padding: 1rem;
background-color: #007bff;
color: white;
border: none;
font-size: 1.1rem;
font-weight: bold;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
transition: background 0.2s ease;
}

.checkout-btn:hover {
background-color: #0056b3;
}

.cart-items {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}

.cart-item-wrapper {
position: relative;
}

.item-number {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-weight: bold;
color: #333;
/* background: #eee; */
/* border-radius: 50%; */
/* width: 1.5rem; */
/* height: 1.5rem; */
display: flex;
align-items: center;
justify-content: center;
/* box-shadow: 0 0 4px rgba(0, 0, 0, 0.1); */
}

.cart-item {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 8px;
background: #f9f9f9;
margin-left: 1.5rem; /* Space to make room for the item number */
}

.cart-item-img {
width: 4rem;
height: 4rem;
overflow: hidden;
border-radius: 6px;
flex-shrink: 0;
}

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

.cart-item-details {
flex-grow: 1;
}

.cart-item-name {
margin: 0;
font-size: 1.1rem;
}

.item-description {
margin: 0.25rem 0 0;
font-size: 0.9rem;
color: #666;
}

.cart-item-price {
white-space: nowrap;
font-size: 1.1rem;
font-weight: bold;
padding-top: 0.5rem;
color: #000;
}

.circular-btn {
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #ff4d4d;
color: white;
border: none;
font-size: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s ease;
z-index: 1002;
}

.circular-btn:hover {
background-color: #0056b3;
}

.cart-bar {
display: none; /* hidden by default */
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #ffffff;
border-top: 1px solid #ddd;
padding: 0.5rem 1rem;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 999;
box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
}

.cart-bar-info {
font-size: 1rem;
color: #333;
font-weight: 500;
}

.cart-bar-btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 0.6rem 3rem;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
}

.container-fluid {
padding: 0 3%;
}

.common-section {
position: relative;
color: white;
padding: 0;
}

/* Blending Video Section and About Section for smooth transition */
.common-section::before {
content: "";
position: absolute;
top: -100px;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(to top, #161616, rgba(0, 0, 0, 0.5), transparent);
}

.common-section p {
color: #323232;
line-height: 21px;
}
    
.common-container {
position: relative;
overflow: visible; /* Changed from hidden to allow sticky nav to show */
background: url(../../images/white-noise-bg.png) repeat;
display: flex;
flex-direction: column;
width: 100%;
border-radius: 1rem;
margin: 25px 0;
border-radius: 10px;
/* 
border: 5px solid #D7D7D7;
top: -300px; 
padding: 20px;
*/
}