/* =============================================
   AARNA MAHAL — Responsive Stylesheet
   Mobile-First Breakpoints
   xs  <576px  |  sm  576px  |  md  768px
   lg  992px   |  xl  1200px |  xxl 1400px
   ============================================= */

/* =============================================
   MOBILE STICKY BAR — show on mobile only
   ============================================= */
@media (max-width: 991.98px) {
  .mobile-sticky-bar {
    display: flex;
  }

  /* Push floating buttons above sticky bar */
  .floating-btns {
    bottom: 80px;
  }

  #scrollTop {
    bottom: 80px;
  }

  /* Add bottom padding to body so last section
     content isn't hidden under sticky bar */
  body {
    padding-bottom: 64px;
  }
}

/* =============================================
   NAVBAR
   ============================================= */
@media (max-width: 991.98px) {
  #mainNav .navbar-collapse {
    background: rgba(48, 26, 15, 0.99);
    border-top: 1px solid rgba(200, 151, 58, 0.25);
    padding: 1rem 0.5rem;
    margin-top: 0.5rem;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.3);
  }

  .nav-link {
    padding: 0.6rem 1rem !important;
    border-radius: 8px;
  }

  .nav-link:hover,
  .nav-link.active {
    background: rgba(200, 151, 58, 0.1);
  }

  .nav-link::after { display: none; }

  #mainNav .btn-gold {
    margin: 0.5rem 1rem 0.25rem;
    justify-content: center;
    width: calc(100% - 2rem);
  }
}

@media (max-width: 575.98px) {
  .brand-name     { font-size: 1.1rem; }
  .brand-tagline  { font-size: 0.55rem; }
  .brand-logo-img { width: 38px; height: 38px; }
}

/* =============================================
   HERO
   ============================================= */
@media (max-width: 991.98px) {
  #hero { min-height: 100svh; }

  .hero-content { padding: 2rem 0.75rem; }

  .hero-cta {
    gap: 0.75rem;
  }

  .hero-cta .btn-ghost-cream {
    display: none; /* hide 4th button on tablet */
  }
}

@media (max-width: 767.98px) {
  .hero-cta .btn-ghost-cream { display: none; }

  .hero-luxury-line {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
  }

  .hero-badges {
    gap: 0.55rem;
  }

  .hero-badge {
    font-size: 0.72rem;
    padding: 0.32rem 0.85rem;
  }
}

@media (max-width: 575.98px) {
  .hero-cta {
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
  }

  .hero-cta .btn-gold,
  .hero-cta .btn-maroon,
  .hero-cta .btn-outline-gold {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }

  .hero-cta .btn-ghost-cream { display: none; }

  .hero-scroll-indicator { display: none; }
}

/* =============================================
   STATS STRIP
   ============================================= */
@media (max-width: 575.98px) {
  #stats-strip { padding: 36px 0; }

  .stat-number { font-size: 1.65rem; }
  .stat-label  { font-size: 0.68rem; }
}

/* =============================================
   SECTION PADDING
   ============================================= */
@media (max-width: 991.98px) {
  .section-pad    { padding: 72px 0; }
  .section-pad-sm { padding: 48px 0; }
}

@media (max-width: 767.98px) {
  .section-pad    { padding: 56px 0; }
  .section-pad-sm { padding: 36px 0; }
}

@media (max-width: 575.98px) {
  .section-pad    { padding: 48px 0; }
  .section-pad-sm { padding: 28px 0; }
}

/* =============================================
   ABOUT
   ============================================= */
@media (max-width: 991.98px) {
  .about-img-wrap img { height: 380px; }
}

@media (max-width: 767.98px) {
  .about-img-wrap img { height: 280px; }

  .about-img-badge {
    padding: 10px 14px;
  }

  .about-img-badge .num   { font-size: 1.45rem; }
  .about-img-badge .label { font-size: 0.6rem; }
}

/* =============================================
   WHY CHOOSE / FACILITIES
   ============================================= */
@media (max-width: 575.98px) {
  .why-card {
    padding: 1.35rem 1.1rem;
  }

  .why-icon {
    width: 54px;
    height: 54px;
    font-size: 1.35rem;
  }

  .why-card h5 { font-size: 0.82rem; }
  .why-card p  { font-size: 0.76rem; }

  .facility-item {
    padding: 0.8rem 1rem;
  }

  .facility-icon {
    width: 38px;
    height: 38px;
    font-size: 1rem;
  }

  .facility-item span { font-size: 0.8rem; }
}

/* =============================================
   EVENTS
   ============================================= */
@media (max-width: 575.98px) {
  .event-card {
    padding: 1.1rem 0.75rem;
  }

  .event-icon { font-size: 1.85rem; }
  .event-card h6 { font-size: 0.8rem; }
  .event-card p  { display: none; } /* hide desc on xs for compactness */
}

/* =============================================
   CATERING
   ============================================= */
@media (max-width: 991.98px) {
  .catering-img-main img { height: 220px; }
  .catering-img-row img  { height: 130px; }
}

@media (max-width: 767.98px) {
  .catering-img-grid { order: -1; }

  .catering-img-main img { height: 200px; }
  .catering-img-row img  { height: 115px; }
}

/* =============================================
   CUSTOM MENU STRIP
   ============================================= */
@media (max-width: 767.98px) {
  .custom-menu-strip { padding: 48px 0; }

  .custom-menu-title { text-align: center; font-size: 1.45rem; }
  .custom-menu-text  { text-align: center; font-size: 0.92rem; }
}

/* =============================================
   AARNA CUISINE
   ============================================= */
@media (max-width: 991.98px) {
  .cuisine-img-wrap img { height: 340px; }
}

@media (max-width: 767.98px) {
  .cuisine-img-wrap img { height: 260px; }
}

@media (max-width: 575.98px) {
  .cuisine-feature-card {
    padding: 0.7rem 0.8rem;
    font-size: 0.8rem;
  }

  .cuisine-feature-card i { font-size: 1rem; }
}

/* =============================================
   GALLERY PREVIEW
   ============================================= */
@media (max-width: 767.98px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 200px);
  }

  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}

@media (max-width: 575.98px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 160px);
    gap: 8px;
  }

  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* =============================================
   PACKAGES
   ============================================= */
@media (max-width: 767.98px) {
  .package-card { padding: 1.75rem 1.5rem; }
}

@media (max-width: 575.98px) {
  .package-card { padding: 1.5rem 1.25rem; }

  .package-title { font-size: 1.1rem; }
  .package-list li { font-size: 0.82rem; }
}

/* =============================================
   TESTIMONIALS
   ============================================= */
@media (max-width: 767.98px) {
  .testimonial-card { padding: 1.5rem; }
  .testimonial-text { font-size: 0.88rem; }
}

/* =============================================
   FAQ
   ============================================= */
@media (max-width: 991.98px) {
  #faq .col-lg-4 { margin-bottom: 2rem; }

  #faq .d-flex.flex-column {
    flex-direction: row !important;
    flex-wrap: wrap;
  }
}

@media (max-width: 575.98px) {
  .accordion-button { font-size: 0.84rem; padding: 1rem 1.1rem; }
  .accordion-body   { font-size: 0.84rem; padding: 0.9rem 1.1rem 1.1rem; }
}

/* =============================================
   MAP SECTION
   ============================================= */
@media (max-width: 991.98px) {
  .map-info-panel { margin-bottom: 1.5rem; }

  .map-wrap,
  .map-wrap iframe {
    min-height: 320px;
  }
}

@media (max-width: 575.98px) {
  .map-info-panel { padding: 1.5rem; }

  .map-info-icon {
    width: 36px;
    height: 36px;
    font-size: 0.88rem;
  }

  .map-info-item h6  { font-size: 0.76rem; }
  .map-info-item p,
  .map-info-item a   { font-size: 0.82rem; }

  .map-wrap,
  .map-wrap iframe { min-height: 260px; }
}

/* =============================================
   CONTACT CTA STRIP
   ============================================= */
@media (max-width: 767.98px) {
  #contact-cta { padding: 60px 0; }

  .cta-title { font-size: 1.75rem; }
  .cta-text  { font-size: 0.92rem; }

  #contact-cta .d-flex {
    gap: 0.75rem;
  }
}

@media (max-width: 575.98px) {
  #contact-cta .d-flex {
    flex-direction: column;
    align-items: center;
  }

  #contact-cta .btn-gold,
  #contact-cta .btn-outline-gold-light,
  #contact-cta .btn-whatsapp {
    width: 100%;
    max-width: 280px;
    justify-content: center;
  }
}

/* =============================================
   FOOTER
   ============================================= */
@media (max-width: 991.98px) {
  #footer { padding: 56px 0 0; }
}

@media (max-width: 767.98px) {
  #footer { padding: 48px 0 0; }

  .footer-brand-name { font-size: 1.45rem; }

  .footer-social { gap: 8px; }
}

@media (max-width: 575.98px) {
  .footer-bottom {
    font-size: 0.74rem;
    padding: 1rem 0;
  }

  .footer-heading { font-size: 0.82rem; }
  .footer-links a { font-size: 0.82rem; }
  .footer-contact-item { font-size: 0.82rem; }
}

/* =============================================
   PAGE HERO (inner pages)
   ============================================= */
@media (max-width: 991.98px) {
  .page-hero { padding: 120px 0 55px; }
}

@media (max-width: 767.98px) {
  .page-hero { padding: 110px 0 48px; }
}

@media (max-width: 575.98px) {
  .page-hero { padding: 100px 0 40px; }
  .page-hero-title { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .page-hero-subtitle { font-size: 0.88rem; }
}

/* =============================================
   GALLERY PAGE — MASONRY
   ============================================= */
@media (max-width: 991.98px) {
  .masonry-grid { columns: 2 240px; }
}

@media (max-width: 575.98px) {
  .masonry-grid { columns: 2 160px; column-gap: 10px; }
  .masonry-item { margin-bottom: 10px; }

  .filter-tabs  { gap: 0.45rem; }
  .filter-btn   { padding: 0.45rem 1rem; font-size: 0.72rem; }
}

/* =============================================
   LIGHTBOX
   ============================================= */
@media (max-width: 575.98px) {
  .lightbox-img { max-width: 95vw; max-height: 78vh; }

  .lightbox-prev { left: 8px; width: 40px; height: 40px; font-size: 1rem; }
  .lightbox-next { right: 8px; width: 40px; height: 40px; font-size: 1rem; }

  .lightbox-caption {
    font-size: 0.76rem;
    padding: 0.3rem 1rem;
    bottom: 12px;
  }
}

/* =============================================
   CONTACT PAGE — ENQUIRY FORM
   ============================================= */
@media (max-width: 767.98px) {
  .enquiry-form-card { padding: 1.75rem 1.5rem; }
}

@media (max-width: 575.98px) {
  .enquiry-form-card { padding: 1.4rem 1.1rem; }

  .form-label    { font-size: 0.74rem; }
  .form-control,
  .form-select   { font-size: 0.86rem; padding: 0.6rem 0.85rem; }
}

/* =============================================
   CONTACT INFO CARDS
   ============================================= */
@media (max-width: 575.98px) {
  .contact-info-card { padding: 1.4rem 1.2rem; }

  .contact-icon-wrap {
    width: 54px;
    height: 54px;
    font-size: 1.25rem;
  }

  .contact-info-card h5 { font-size: 0.88rem; }
  .contact-info-card p,
  .contact-info-card a  { font-size: 0.84rem; }
}

/* =============================================
   FLOATING BUTTONS — hide on very small widths
   ============================================= */
@media (max-width: 399.98px) {
  .floating-btns { right: 12px; }

  .float-btn {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
  }
}

/* =============================================
   SECTION TAG — left-aligned on small screens
   ============================================= */
@media (max-width: 575.98px) {
  .section-header .section-tag { display: inline-block; }
}

/* =============================================
   DIVIDER ORNAMENT
   ============================================= */
@media (max-width: 575.98px) {
  .divider-ornament::before,
  .divider-ornament::after {
    max-width: 60px;
  }
}

/* =============================================
   CATERING LIST CARDS — stack on xs
   ============================================= */
@media (max-width: 399.98px) {
  .catering-list-card { padding: 1rem 0.9rem; }
  .catering-list li   { font-size: 0.78rem; }
}

/* =============================================
   PACKAGE FEATURED BADGE — wrap text on xs
   ============================================= */
@media (max-width: 399.98px) {
  .package-featured-badge { font-size: 0.58rem; padding: 0.2rem 0.6rem; }
}

/* =============================================
   SMOOTH FONT RENDERING ACROSS ALL SIZES
   ============================================= */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}