/* main.css */
body {
    font-family: 'Arial', sans-serif;
    padding: 0;
    margin: 0;
    background-color: #FAF8F8;
}
.bg-food {
    background-color: #FAF8F8 !important;
}
.header-title{
    color: #4C4C4C;
    margin-left: 20px;
}

/* banner and header section */
/* Banner Section - Full Responsive Background */
/* .banner-section {
  position: relative;
  width: 100%;
  overflow: hidden;
} */

/* Banner Section */
.banner-section {
  position: relative;
  width: 100%;
  margin-top: 0; /* Remove any margin-top */
}
/* laptop */
@media (min-width: 992px) {
.banner-background {
  width: 100%;
  height: 40vh; /* Full viewport height */
  min-height: 260px;
  background-size: cover;
  background-position: center;
  margin-top: -56px; /* Pull up behind navbar */
  padding-top: 56px; /* Push content down below navbar */
}
}
/* large device  */
@media (min-width: 1500px) {
  .banner-background {
    min-height: 390px; /* Desktops and large screens */
  }
}
/* Responsive Adjustments */
@media (max-width: 992px) {
  .banner-background {
    height: 40vh;
  }
}

@media (max-width: 768px) {
  .banner-background {
    height: 35vh;
    min-height: 200px;
    background-position: center top; /* Often better for mobile */
  }
}

@media (max-width: 576px) {
  .banner-background {
    height: 30vh;
    min-height: 180px;
  }
}

/* For ultra-wide screens */
/* @media (min-width: 1500px) {
  .banner-background {
    height: 50vh;
  }
} */

/* Ensure content starts below the banner */
.main {
  position: relative;
  z-index: 1;
  background-color: #FAF8F8; /* Your body background */
}


/* Header Section (keep your existing styles) */
/* .header-section {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
} */
 /* Header Section */
.header-section {
  width: 100%;
}

.promo-section {
    position: relative;
    margin-top: -60px;
}

.promo-card {
    position: relative;
    z-index: 2;
    max-width: 400px;
    margin: auto;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}

.promo-blur {
    filter: blur(4px);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.promo-content {
    position: relative;
    z-index: 2;
}

.promo-card img {
    width: 100%;
    display: block;
}

.promo-text {
    position: absolute;
    top: 10px;
    left: 10px;
    color: white;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 10px;
    border-radius: 5px;
}


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

.custom-transparent {
  background-color: transparent !important;
}

/* mobile screen accordian box shadow  */
.accordion-button:focus{
    box-shadow: none !important;
}


/* All Device responsive  */
/* Large devices (desktops, ≥992px) */
@media (min-width: 992px) {
  .example {
    background-color: #f8f9fa;
  }
}

/* Extra large devices (large desktops, ≥1200px) */
@media (min-width: 1200px) {
  .example {
    background-color: #e9ecef;
  }
}

/* Extra extra large devices (very large screens, ≥1400px) */
@media (min-width: 1400px) {
  .example {
    background-color: #dee2e6;
  }
}