/* Remove gray overlay for catering hero on mobile */
  #catering-hero.bg-overlay::before,
  #catering-hero.bg-overlay-2::before,
  #catering-hero.bg-overlay-3::before,
  #catering-hero.bg-overlay-4::before,
  #catering-hero::before {
    background: transparent !important;
    content: none !important;
  }

  /* Disable parallax on mobile to avoid repaint glitches */
  #catering-hero.bg-parallax {
    background-attachment: scroll !important;
  }

  /* Ensure background image stays behind content */
  #catering-hero .bg-img {
    z-index: 0 !important;
  }
/* Reset default margins and paddings */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* ========== Our Story Page Mobile Fixes ========== */

/* 1. Fix hero section overlay issue on mobile */
@media (max-width: 767.98px) {
  .hero-section {
    position: relative;
    overflow: hidden;
    background-attachment: scroll !important;
  }
  
  .hero-bg-img {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: -1;
    transform: none !important;
  }
  
  .hero-section .bg-overlay,
  .hero-section::before {
    background: rgba(0, 0, 0, 0.4) !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    content: '';
  }
  
  /* Disable parallax on mobile */
  .hero-section.bg-parallax {
    background-attachment: scroll !important;
  }
}

/* 2. Make first image responsive with border radius and margins */
.first-story-img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

@media (max-width: 767.98px) {
  .first-story-img {
    width: calc(100% - 30px);
    height: 300px;
    object-fit: cover;
    border-radius: 12px;
    margin: 20px 15px;
    display: block;
  }
  
  /* Ensure proper spacing around the first image section */
  .py-0.bg-black {
    padding: 20px 0 !important;
  }
  
  .py-0.bg-black .container-fluid {
    padding: 0 15px;
  }
}

/* 3. Fix last section height issue - minimal padding */
@media (max-width: 767.98px) {
  .join-us-section {
    padding: 15px 0 !important;
    min-height: auto !important;
  }
  
  .join-us-section .container {
    padding: 0 15px;
  }
  
  .join-us-section p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
  }
}

/* Second image responsive styles */
.responsive-promise-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 767.98px) {
  .responsive-promise-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
}

/* Make wrapper take full viewport height and use flexbox */
.wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Push footer to the bottom */
#footer {
  margin-top: auto;
}

/* Fix for the footer divider */
.footer__divider-shape-bottom {
  display: block;
  line-height: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  top: -17px;
  left: 0;
  width: 100%;
  height: 17px;
  pointer-events: none;
}

/* Ensure footer bottom has no extra space */
.footer-bottom {
  position: relative;
  overflow: hidden;
  margin-bottom: 0 !important;
}

/* Remove any potential extra space from the last section */
section:last-child {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Fix for any potential margin collapsing issues */
#footer > *:last-child {
  margin-bottom: 0;
}

/* Ensure no extra spacing from the body */
body {
  overflow-x: hidden;
}

/* ========== About Us Section Fixes ========== */
@media (max-width: 991.98px) {
  /* Make the banner section stack properly on mobile */
  .banner__content {
    display: flex;
    flex-direction: column;
    padding: 30px 0;
  }

  /* Ensure the text is visible and properly spaced */
  .banner__content-text {
    order: 2;
    margin-top: 30px;
    padding: 0 15px;
  }

  /* Make sure the image is visible and properly sized */
  .banner__content-img {
    order: 1;
    text-align: center;
    padding: 0 15px;
  }

  /* Fix any potential overflow issues */
  .pt-0 {
    overflow: visible !important;
  }

  /* Ensure text is readable on small screens */
  .heading__title {
    font-size: 28px !important;
    line-height: 1.3;
    margin-top: 15px;
  }

  .heading__desc {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 20px;
  }
}

/* Fix for the banner image */
.banner__content-img img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Mobile-specific adjustments */
@media (max-width: 767.98px) {
  .banner-layout1 {
    padding: 30px 0;
  }
  
  .heading__title {
    font-size: 24px !important;
    margin-bottom: 15px;
  }
  
  .heading__desc {
    font-size: 15px;
    line-height: 1.5;
  }

  /* Ensure proper spacing around the section */
  #bannerLayout1 {
    padding: 20px 0;
  }

  /* Mobile: add bottom space below the About Us button so it doesn't touch image */
  .about-readmore-btn {
    margin-bottom: 16px !important;
    display: inline-block;
  }
}

/* Ensure the about section has proper background and contrast */
.banner-layout1 {
  background-color: #f9f9f9;
  position: relative;
  z-index: 1;
}

/* Add some spacing between sections */
.banner-layout1 + section {
  padding-top: 60px;
}

/* Tablet landscape adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
  .banner__content-text {
    padding: 0 30px;
  }
  
  .banner__content-img {
    padding: 0 30px;
  }
}

/* ========== Our Promise Test Section Mobile/Tablet Fixes ========== */
@media (max-width: 991.98px) {
  /* Fix Our Promise Test section visibility on mobile */
  .our-promise-test-section {
    padding: 30px 0 !important;
    min-height: auto !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
    background-color: #000000 !important;
  }
  
  .our-promise-test-section .container {
    padding: 0 15px;
    background-color: #000000 !important;
  }
  
  .our-promise-test-section .row {
    background-color: #000000 !important;
    margin: 0;
  }
  
  .our-promise-test-section .col-lg-6 {
    margin-bottom: 20px;
  }
  
  .our-promise-test-section .p-5 {
    padding: 20px !important;
  }
  
  .our-promise-test-section h2 {
    font-size: 1.8rem !important;
    margin-bottom: 15px !important;
    color: #ffffff !important;
  }
  
  .our-promise-test-section p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin-bottom: 15px !important;
    color: #ffffff !important;
  }
  
  .our-promise-test-section .row.mt-4 {
    margin-top: 20px !important;
  }
  
  .our-promise-test-section .col-sm-6 {
    margin-bottom: 15px;
  }
  
  .our-promise-test-section h4,
  .our-promise-test-section h5 {
    color: #ffffff !important;
    font-size: 16px !important;
  }
  
  .our-promise-test-section .small {
    color: #ffffff !important;
    font-size: 13px !important;
  }
  
  .our-promise-test-section .fa-check-circle {
    color: #e2a355 !important;
  }
  
  /* Add top margin to Our Promise section image - mobile only */
  .our-promise-section .responsive-promise-img {
    margin-top: 20px !important;
  }
}

/* Mobile only - additional spacing for Our Promise image */
@media (max-width: 767.98px) {
  .our-promise-section .responsive-promise-img {
    margin-top: 40px !important;
  }
  
  /* Add top margin to the entire Our Promise section on mobile */
  .our-promise-section {
    margin-top: 30px !important;
    border-top: 3px solid #e2a355 !important;
  }
  
  /* Force AOS elements to be visible on mobile/tablet */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
  
  /* Fix join-us section mobile overlap */
  .join-us-section {
    padding: 40px 0 !important;
    min-height: auto !important;
    display: block !important;
    
  }
  
  .join-us-section .container {
    padding: 0 15px;
  }
  
  .join-us-section p {
    font-size: 16px !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
    color: #ffffff !important;
  }
}

/* ========== Catering Page Styles ========== */

/* Package card hover effects */
.package-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
  border-color: rgba(226, 163, 85, 0.3);
}

/* Form styling consistency */
.catering-enquiry-form .form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px 15px;
  font-size: 14px;
  transition: border-color 0.3s ease;
}

.catering-enquiry-form .form-control:focus {
  border-color: #e2a355;
  box-shadow: 0 0 0 0.2rem rgba(226, 163, 85, 0.25);
  outline: none;
}

.catering-enquiry-form .form-group {
  margin-bottom: 20px;
}

.catering-enquiry-form .btn {
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.catering-enquiry-form .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(226, 163, 85, 0.3);
}

/* Success message styling */
.form-result .alert {
  border-radius: 8px;
  font-weight: 500;
}

/* Mobile responsiveness for form */
@media (max-width: 767.98px) {
  .catering-enquiry-form .form-control {
    padding: 10px 12px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  .catering-enquiry-form .btn {
    padding: 12px 20px;
    font-size: 14px;
  }
  
  .menu-interests {
    flex-direction: column;
    gap: 8px;
  }
  
  .menu-interests label {
    margin-right: 0 !important;
    margin-bottom: 8px;
  }
}

/* Hero section mobile fixes */
@media (max-width: 767.98px) {
  #catering-hero {
    min-height: 80vh;
    padding: 60px 0;
    justify-content: center; /* ensure vertical centering with flex */
    position: relative; /* ensure proper stacking context */
  }

  #catering-hero .pagetitle__heading {
    font-size: 2.5rem !important;
  }

  #catering-hero p {
    font-size: 1rem !important;
  }

  /* force text centering for all hero content on mobile */
  #catering-hero,
  #catering-hero .container,
  #catering-hero .row,
  #catering-hero .col-12 {
    text-align: center !important;
  }

  /* center the grid and column content */
  #catering-hero .container {
    display: flex;
    justify-content: center;
  }

  #catering-hero .row {
    justify-content: center !important;
    width: 100% !important;
    margin-left: 0 !important;  /* neutralize bootstrap row negative margins */
    margin-right: 0 !important;
  }

  #catering-hero .col-12 {
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 560px; /* keep a nice readable width */
  }

  /* remove negative margin applied to page titles when header is transparent */
  .header-transparent + #catering-hero {
    margin-top: 0 !important;
  }

  .hero-buttons {
    margin-top: 20px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .hero-buttons .btn {
    display: block;
    width: 100%;
    margin: 10px 0 !important; /* override .mx-2 */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Step items mobile responsiveness */
@media (max-width: 767.98px) {
  .step-item {
    margin-bottom: 40px;
  }

  .step-number {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.2rem !important;
  }
}