/* ==========================================================================
       CSS RESET & DESIGN TOKENS
       ========================================================================== */
    :root {
      /* Royal South Indian Hospitality Palette */
      --maroon-950: #1a0306;
      --maroon-900: #38070d;
      --maroon-800: #58111a;
      --maroon-700: #6b1724;
      --maroon-600: #881e2e;
      --maroon-50: #fbf3f4;
      
      --gold-600: #a98030;
      --gold-500: #c5a059;
      --gold-400: #dfb96c;
      --gold-300: #edd39b;
      --gold-100: #faf3e6;
      --gold-50:  #fdfaf3;
      
      --sand-50:  #fdfbf7;
      --sand-100: #f7f3ec;
      --sand-200: #eee8de;
      --sand-300: #ded5c5;
      
      --charcoal-900: #1b1918;
      --charcoal-800: #2c2927;
      --charcoal-700: #423e3b;
      --charcoal-600: #5f5a55;
      --charcoal-400: #8d8780;
      --charcoal-200: #d6d1cb;
      --white: #ffffff;
      
      --font-heading: 'Cinzel', Georgia, serif;
      --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      
      --shadow-sm: 0 2px 8px rgba(88, 17, 26, 0.06);
      --shadow-md: 0 8px 24px rgba(88, 17, 26, 0.08);
      --shadow-lg: 0 16px 40px rgba(88, 17, 26, 0.12);
      --shadow-gold: 0 8px 25px rgba(197, 160, 89, 0.28);
      
      --radius-sm: 8px;
      --radius-md: 14px;
      --radius-lg: 20px;
      --radius-xl: 28px;
      
      --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
      --header-height: 84px;
    }

    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      font-size: 16px;
    }

    body {
      font-family: var(--font-body);
      background-color: var(--sand-50);
      color: var(--charcoal-800);
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: var(--transition);
    }

    button {
      font-family: inherit;
      cursor: pointer;
      border: none;
      background: none;
      transition: var(--transition);
    }

    /* Container Utility */
    .container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 1.5rem;
    }

    /* Typography Utilities */
    .heading-primary {
      font-family: var(--font-heading);
      font-weight: 700;
      color: var(--maroon-900);
      letter-spacing: -0.01em;
      line-height: 1.25;
    }

    .heading-secondary {
      font-family: var(--font-heading);
      font-weight: 600;
      color: var(--maroon-800);
      letter-spacing: 0.02em;
    }

    .sub-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-family: var(--font-body);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--gold-600);
      margin-bottom: 0.75rem;
    }

    .sub-tag::before, .sub-tag::after {
      content: "";
      width: 24px;
      height: 1px;
      background-color: var(--gold-500);
    }

    /* Button System */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      padding: 0.85rem 1.75rem;
      font-size: 0.92rem;
      font-weight: 600;
      border-radius: var(--radius-sm);
      transition: var(--transition);
      white-space: nowrap;
      text-align: center;
    }

    .btn-maroon {
      background-color: var(--maroon-800);
      color: var(--white);
      box-shadow: 0 4px 15px rgba(88, 17, 26, 0.2);
    }

    .btn-maroon:hover {
      background-color: var(--maroon-900);
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(88, 17, 26, 0.3);
      color: var(--white);
    }

    .btn-gold {
      background: linear-gradient(135deg, var(--gold-500), var(--gold-600));
      color: var(--white);
      box-shadow: var(--shadow-gold);
    }

    .btn-gold:hover {
      background: linear-gradient(135deg, var(--gold-400), var(--gold-500));
      transform: translateY(-2px);
      box-shadow: 0 10px 24px rgba(197, 160, 89, 0.4);
      color: var(--white);
    }

    .btn-whatsapp {
      background-color: #25D366;
      color: var(--white);
      box-shadow: 0 4px 15px rgba(37, 211, 102, 0.25);
    }

    .btn-whatsapp:hover {
      background-color: #20bd5a;
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
      color: var(--white);
    }

    .btn-outline-gold {
      background-color: transparent;
      color: var(--gold-600);
      border: 1.5px solid var(--gold-500);
    }

    .btn-outline-gold:hover {
      background-color: var(--gold-500);
      color: var(--white);
      transform: translateY(-2px);
    }

    .btn-outline-white {
      background-color: transparent;
      color: var(--white);
      border: 1.5px solid rgba(255, 255, 255, 0.7);
    }

    .btn-outline-white:hover {
      background-color: var(--white);
      color: var(--maroon-900);
      border-color: var(--white);
      transform: translateY(-2px);
    }

    /* ==========================================================================
       HEADER & NAVIGATION
       ========================================================================== */
    .top-bar {
      background-color: #FFF6F7; /* Pale warm cream blush as per reference */
      color: #5C0612; /* Deep royal maroon text */
      font-size: 0.73rem;
      padding: 0.32rem 0;
      border-bottom: 1px solid rgba(197, 160, 89, 0.32);
      letter-spacing: 0.02em;
    }

    .top-bar .container,
    .top-bar-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .top-bar-info,
    .top-bar-left {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .top-bar-right {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
    }

    .top-bar-item {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.73rem;
      color: #5C0612;
    }

    .top-bar-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      color: #5C0612;
      font-weight: 600;
      font-size: 0.73rem;
      transition: var(--transition);
      text-decoration: none;
      cursor: pointer;
    }

    .top-bar-link:hover {
      color: var(--gold-600);
      text-decoration: underline;
    }

    .top-bar-badge {
      color: #6B111F;
      font-weight: 700;
      font-size: 0.73rem;
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
    }

    /* Live Animated Pulsing Dot - Compact & Refined */
    .pulse-dot {
      display: inline-block;
      width: 6.5px;
      height: 6.5px;
      border-radius: 50%;
      background-color: #9C1B30;
      box-shadow: 0 0 0 rgba(156, 27, 48, 0.6);
      animation: pulseGlowMaroon 1.8s infinite ease-in-out;
      flex-shrink: 0;
      margin-right: 0.25rem;
    }

    @keyframes pulseGlowMaroon {
      0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(156, 27, 48, 0.6);
      }
      70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 6px rgba(156, 27, 48, 0);
      }
      100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(156, 27, 48, 0);
      }
    }

    /* Top Bar Divider with Proper Compact Spacing */
    .top-bar-divider {
      color: rgba(197, 160, 89, 0.55);
      margin: 0 0.65rem;
      user-select: none;
      display: inline-block;
      font-size: 0.73rem;
    }

    .top-bar-location {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      font-size: 0.73rem;
      color: #5C0612;
      font-weight: 500;
    }

    /* Top Bar Icons Scaling */
    .top-bar svg {
      width: 12px;
      height: 12px;
      flex-shrink: 0;
      color: #8C6A28;
    }

    .site-header,
    .main-header {
      position: sticky;
      top: 0;
      left: 0;
      right: 0;
      z-index: 1000;
      background-color: rgba(253, 251, 247, 0.96);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      box-shadow: 0 4px 20px rgba(88, 17, 26, 0.05);
      transition: var(--transition);
      border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    }

    .header-container,
    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: var(--header-height);
    }

    /* Brand Crest & Logo */
    .brand-logo {
      display: flex;
      align-items: center;
      gap: 0.9rem;
      text-decoration: none;
    }

    .brand-crest,
    .crest-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: transparent;
      border: none;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: none;
      filter: drop-shadow(0 3px 8px rgba(94, 18, 36, 0.22));
      flex-shrink: 0;
      transition: transform 0.25s ease, filter 0.25s ease;
    }

    .brand-logo:hover .brand-crest,
    .brand-logo:hover .crest-icon {
      transform: scale(1.05);
      filter: drop-shadow(0 6px 14px rgba(94, 18, 36, 0.35));
    }

    /* Brand Text Container: Centered Alignment so Tagline aligns with center of Arunai Mahal */
    .brand-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      justify-content: center;
    }

    /* Arunai Mahal: Bold Royal Maroon Serif (As in attached reference) */
    .brand-text .brand-title,
    .brand-title,
    .brand-text h1 {
      font-family: var(--font-heading);
      font-size: 1.5rem;
      font-weight: 700;
      color: #5E1224; /* Royal Maroon from reference image */
      line-height: 1.1;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      display: block;
      text-align: center;
      margin: 0;
      padding: 0;
    }

    /* Tagline: Warm Metallic Gold with Refined Tracking Centered Under Arunai Mahal */
    .brand-text .brand-subtitle,
    .brand-subtitle {
      font-family: var(--font-body);
      font-size: 0.64rem;
      font-weight: 600;
      color: #B58738; /* Warm Metallic Gold from reference image */
      letter-spacing: 0.16em;
      text-transform: uppercase;
      display: block;
      text-align: center;
      margin-top: 3px;
      line-height: 1.2;
      white-space: nowrap;
    }

    /* Mobile Drawer & Footer Overrides */
    .mobile-drawer .brand-text {
      align-items: center;
      text-align: center;
    }

    .mobile-drawer .brand-title {
      font-size: 1.25rem;
      color: #5E1224;
      text-align: center;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .mobile-drawer .brand-subtitle {
      font-size: 0.62rem;
      color: #B58738;
      text-align: center;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    .site-footer .brand-text {
      align-items: center;
      text-align: center;
    }

    .site-footer .brand-title {
      color: var(--white);
      text-align: center;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    .site-footer .brand-subtitle {
      color: #DFB96C;
      text-align: center;
      letter-spacing: 0.16em;
      text-transform: uppercase;
    }

    /* Desktop Nav */
    .nav-menu {
      display: flex;
      align-items: center;
      list-style: none;
      gap: 1.25rem;
    }

    .nav-link {
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--charcoal-700);
      padding: 0.45rem 0.85rem;
      border-radius: 6px;
      position: relative;
      cursor: pointer;
      letter-spacing: 0.015em;
      transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease;
      display: inline-flex;
      align-items: center;
    }

    /* Soft Warm Gold Pill Background Highlight on Hover */
    .nav-link::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(197, 160, 89, 0.1);
      border-radius: 6px;
      opacity: 0;
      transform: scale(0.92);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    /* Animated Gold-Maroon Underline Sliding Out from Center on Hover */
    .nav-link::after {
      content: "";
      position: absolute;
      bottom: 2px;
      left: 50%;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--gold-600), var(--maroon-800), var(--gold-400));
      border-radius: 2px;
      transform: translateX(-50%);
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nav-link:hover {
      color: var(--maroon-900);
      transform: translateY(-1px);
    }

    .nav-link:hover::before {
      opacity: 1;
      transform: scale(1);
    }

    .nav-link:hover::after {
      width: 75%;
    }

    .nav-link.active {
      color: var(--maroon-900);
      font-weight: 700;
      background: rgba(56, 7, 13, 0.05);
    }

    .nav-link.active::after {
      width: 80%;
      background: linear-gradient(90deg, var(--gold-600), var(--gold-400), var(--gold-600));
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .header-actions .btn {
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      transition: var(--transition);
    }

    .hamburger-btn {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      color: var(--maroon-900);
      background: var(--sand-100);
      border-radius: var(--radius-sm);
      border: 1px solid var(--sand-300);
    }

    /* Mobile Drawer */
    .mobile-drawer {
      position: fixed;
      top: 0;
      right: -100%;
      width: 82%;
      max-width: 380px;
      height: 100vh;
      background-color: var(--sand-50);
      z-index: 2000;
      box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
      transition: right 0.35s ease-in-out;
      display: flex;
      flex-direction: column;
      padding: 1.5rem;
      overflow-y: auto;
    }

    .mobile-drawer.open {
      right: 0;
    }

    .drawer-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background: rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(4px);
      z-index: 1999;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease;
    }

    .drawer-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .drawer-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 1.25rem;
      border-bottom: 1px solid var(--sand-200);
      margin-bottom: 1.5rem;
    }

    .drawer-close-btn {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: var(--sand-200);
      color: var(--charcoal-700);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--sand-300);
      cursor: pointer;
      transition: var(--transition);
    }

    .drawer-close-btn:hover {
      background: var(--maroon-800);
      color: var(--white);
      border-color: var(--maroon-800);
    }

    .drawer-nav,
    .drawer-nav-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .drawer-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 1rem;
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--charcoal-800);
      border-radius: var(--radius-sm);
      transition: var(--transition);
    }

    .drawer-link:hover, .drawer-link.active {
      background-color: var(--gold-100);
      color: var(--maroon-800);
    }

    .drawer-footer {
      margin-top: auto;
      padding-top: 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    /* ==========================================================================
       Girivalam Auspicious Dates & Timings Scrolling Ticker (Below Header)
       ========================================================================== */
    .girivalam-ticker-bar {
      position: relative;
      background-color: var(--maroon-900); /* Same authentic royal maroon as top header */
      background: linear-gradient(90deg, #2E050B 0%, #3D0811 50%, #2E050B 100%);
      border-top: 1px solid rgba(197, 160, 89, 0.25);
      border-bottom: 1.5px solid rgba(197, 160, 89, 0.4);
      height: 42px;
      display: flex;
      align-items: center;
      overflow: hidden;
      z-index: 990;
      box-shadow: 0 4px 14px rgba(46, 5, 11, 0.35);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Mukta Malar", "Noto Sans Tamil", sans-serif;
    }

    @media (min-width: 992px) {
      .girivalam-ticker-bar {
        position: sticky;
        top: var(--header-height);
      }
    }

    /* Container matching site header width and margins */
    .ticker-container {
      width: 100%;
      max-width: 1240px;
      margin: 0 auto;
      padding: 0 1.5rem;
      display: flex;
      align-items: center;
      height: 100%;
      gap: 1.15rem;
    }

    /* Left Badge Pill: Deep Royal Blue with Gold Accent (Inspired by Attached Reference) */
    .ticker-badge {
      background: linear-gradient(135deg, #09216B 0%, #011246 100%);
      color: #FFFFFF;
      height: 30px;
      padding: 0 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      font-weight: 700;
      letter-spacing: 0.02em;
      white-space: nowrap;
      flex-shrink: 0;
      z-index: 10;
      border: 1px solid rgba(223, 185, 108, 0.55);
      border-radius: 999px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    }

    .ticker-badge-full {
      display: inline;
    }
    .ticker-badge-short {
      display: none;
    }

    @media (max-width: 860px) {
      .girivalam-ticker-bar {
        height: 38px;
      }
      .ticker-container {
        padding: 0 0.65rem;
        gap: 0.55rem;
      }
      .ticker-badge {
        height: 25px;
        padding: 0 0.65rem;
        font-size: 0.72rem;
        gap: 0.35rem;
      }
      .ticker-badge-full {
        display: none;
      }
      .ticker-badge-short {
        display: inline;
      }
      .ticker-marquee-wrapper {
        mask-image: linear-gradient(90deg, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8px, black calc(100% - 8px), transparent 100%);
      }
      .ticker-item {
        font-size: 0.76rem;
        padding: 0 0.35rem;
      }
      .ticker-pulse-dot {
        width: 7px;
        height: 7px;
      }
    }

    @media (max-width: 480px) {
      .girivalam-ticker-bar {
        height: 36px;
      }
      .ticker-container {
        padding: 0 0.4rem;
        gap: 0.45rem;
      }
      .ticker-badge {
        height: 23px;
        padding: 0 0.5rem;
        font-size: 0.68rem;
      }
      .ticker-item {
        font-size: 0.73rem;
      }
      .ticker-tag-highlight {
        font-size: 0.73rem;
      }
    }

    .ticker-pulse-dot {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: #FF3B30;
      box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
      animation: tickerPulse 1.8s infinite;
      flex-shrink: 0;
    }

    @keyframes tickerPulse {
      0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7); }
      70% { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255, 59, 48, 0); }
      100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); }
    }

    /* Horizontal Scrolling Marquee Track */
    .ticker-marquee-wrapper {
      flex: 1;
      overflow: hidden;
      position: relative;
      height: 100%;
      display: flex;
      align-items: center;
      mask-image: linear-gradient(90deg, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
      -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 20px, black calc(100% - 20px), transparent 100%);
    }

    .ticker-marquee-track {
      display: flex;
      align-items: center;
      width: max-content;
      will-change: transform;
      animation: tickerScroll 36s linear infinite;
    }

    .ticker-marquee-wrapper:hover .ticker-marquee-track,
    .ticker-marquee-track:hover,
    .ticker-marquee-wrapper:focus-within .ticker-marquee-track {
      animation-play-state: paused;
    }

    @keyframes tickerScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    .ticker-content-block {
      display: inline-flex;
      align-items: center;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .ticker-item {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.85rem;
      color: #FFF8EB;
      padding: 0 0.5rem;
    }

    .ticker-tag-highlight {
      color: #F8D37C;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .ticker-time {
      color: #5BF7A4;
      font-weight: 700;
      background: rgba(91, 247, 164, 0.12);
      padding: 0.1rem 0.35rem;
      border-radius: 4px;
    }

    .ticker-en {
      color: rgba(255, 255, 255, 0.8);
      font-size: 0.8rem;
      margin-left: 0.25rem;
    }

    .ticker-book-link {
      color: #FDF3DA;
      background: linear-gradient(135deg, rgba(197, 160, 89, 0.35) 0%, rgba(138, 101, 35, 0.45) 100%);
      border: 1px solid rgba(223, 185, 108, 0.6);
      padding: 0.18rem 0.65rem;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 700;
      text-decoration: none;
      margin-left: 0.5rem;
      display: inline-flex;
      align-items: center;
      gap: 0.3rem;
      transition: all 0.2s ease;
    }

    .ticker-book-link:hover {
      background: linear-gradient(135deg, #DFB96C 0%, #C5A059 100%);
      color: #2D050B;
      border-color: #FFFFFF;
      transform: translateY(-1px);
    }

    .ticker-item-separator {
      color: #DFB96C;
      font-size: 0.7rem;
      padding: 0 1.5rem;
      opacity: 0.65;
    }

    @media (prefers-reduced-motion: reduce) {
      .ticker-marquee-track {
        animation-duration: 90s;
      }
    }

    /* Mobile Sticky Bottom Action Bar */
    .mobile-bottom-bar {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      padding: 0.65rem 1rem;
      border-top: 1px solid var(--sand-300);
      box-shadow: 0 -4px 15px rgba(0,0,0,0.06);
      z-index: 990;
    }

    .mobile-bottom-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.75rem;
    }

    /* Page View Switching Logic */
    .page-view {
      display: none;
      animation: fadeIn 0.35s ease forwards;
    }

    .page-view.active-page {
      display: block;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(6px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ==========================================================================
       HERO SECTIONS
       ========================================================================== */
    .hero-section {
      position: relative;
      min-height: 82vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--white);
      background-color: var(--maroon-950);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 50% 38%, rgba(68, 10, 18, 0.62) 0%, rgba(46, 5, 11, 0.78) 58%, rgba(20, 2, 5, 0.88) 100%),
                  linear-gradient(180deg, rgba(30, 4, 8, 0.35) 0%, rgba(46, 5, 11, 0.65) 100%);
    }

    .hero-content {
      position: relative;
      z-index: 2;
      max-width: 880px;
      margin: 0 auto;
      text-align: center;
      padding: 5rem 1rem;
    }

    .hero-badge-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 1.5rem;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.55rem;
      background: rgba(28, 4, 8, 0.68);
      border: 1px solid rgba(223, 185, 108, 0.5);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: 0.45rem 1.4rem;
      border-radius: 999px;
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #DFB96C;
      margin-bottom: 0;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    }

    .hero-pulse-dot {
      display: inline-block;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: #25D366;
      box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.75);
      animation: heroPulseDot 2s infinite ease-in-out;
      margin-left: 0.25rem;
      flex-shrink: 0;
    }

    @keyframes heroPulseDot {
      0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.75);
      }
      70% {
        transform: scale(1.15);
        box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
      }
      100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
      }
    }

    .hero-title {
      font-size: clamp(2.1rem, 4.4vw, 3.65rem);
      line-height: 1.25;
      color: #FFFFFF;
      margin: 1.35rem auto 1.25rem;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      text-transform: none;
      letter-spacing: -0.01em;
      text-align: center;
      text-shadow: 0 3px 18px rgba(0, 0, 0, 0.55);
      max-width: 960px;
    }

    .hero-title-line {
      display: block;
      white-space: nowrap;
    }

    @media (max-width: 600px) {
      .hero-title {
        font-size: clamp(1.45rem, 6.2vw, 2.05rem);
        line-height: 1.32;
      }
      .hero-title-line {
        white-space: normal;
      }
    }

    .hero-brand-gold {
      display: inline-block;
      white-space: nowrap;
      font-weight: 700;
      font-family: 'Playfair Display', Georgia, serif;
      text-transform: none;
      background: linear-gradient(135deg, #FFF4D9 0%, #F5D38A 22%, #DFB96C 48%, #F7E1A6 72%, #C5A059 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 3px 14px rgba(0, 0, 0, 0.65));
      letter-spacing: -0.01em;
      position: relative;
    }

    .hero-subtitle {
      font-size: clamp(1.05rem, 1.8vw, 1.22rem);
      line-height: 1.68;
      color: rgba(255, 255, 255, 0.92);
      margin: 0 auto 2.35rem auto;
      font-weight: 400;
      max-width: 760px;
      text-align: center;
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    }

    .hero-cta-group {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    /* Hero Primary Solid Gold / Bronze Button */
    .hero-cta-group .btn-hero-gold,
    .btn-hero-gold {
      background: linear-gradient(135deg, #B88E52 0%, #A27938 100%);
      color: #FFFFFF !important;
      padding: 0.8rem 1.65rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      border: 1px solid rgba(223, 185, 108, 0.45);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
    }
    .hero-cta-group .btn-hero-gold:hover,
    .btn-hero-gold:hover {
      background: linear-gradient(135deg, #C59D60 0%, #AF8543 100%);
      transform: translateY(-2px);
      box-shadow: 0 6px 22px rgba(0, 0, 0, 0.38);
      color: #FFFFFF !important;
    }

    /* Hero Secondary Glass Effect Button (Explore AC Rooms) */
    .hero-cta-group .btn-hero-glass,
    .btn-hero-glass {
      background: rgba(255, 255, 255, 0.08);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.24);
      color: #FFFFFF !important;
      padding: 0.8rem 1.65rem;
      border-radius: 8px;
      font-weight: 600;
      font-size: 0.95rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
    }
    .hero-cta-group .btn-hero-glass:hover,
    .btn-hero-glass:hover {
      background: rgba(255, 255, 255, 0.16);
      border-color: rgba(223, 185, 108, 0.65);
      color: #FFFFFF !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35);
    }

    /* Hero Tertiary Pure White Button (Contact Us & Direct Action) */
    .hero-cta-group .btn-hero-white,
    .btn-hero-white {
      background: #FFFFFF !important;
      color: #1a0306 !important;
      border: 1px solid #FFFFFF !important;
      padding: 0.85rem 1.75rem;
      border-radius: 8px;
      font-weight: 700;
      font-size: 0.92rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      text-decoration: none;
    }
    .hero-cta-group .btn-hero-white *,
    .btn-hero-white * {
      color: #1a0306 !important;
    }
    .hero-cta-group .btn-hero-white svg,
    .btn-hero-white svg {
      color: #1a0306 !important;
      fill: currentColor;
    }
    .hero-cta-group .btn-hero-white:hover,
    .btn-hero-white:hover {
      background: #F4EFEA !important;
      color: #140204 !important;
      border-color: #DFB96C !important;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    }
    .hero-cta-group .btn-hero-white:hover *,
    .btn-hero-white:hover * {
      color: #140204 !important;
    }
    .hero-cta-group .btn-hero-white:hover svg,
    .btn-hero-white:hover svg {
      color: #140204 !important;
      fill: currentColor;
    }

    .hero-direct-assist {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      flex-wrap: wrap;
      margin-top: 1.15rem;
      padding-top: 0;
      border-top: none;
    }

    .direct-assist-label {
      font-size: 0.92rem;
      color: rgba(255, 255, 255, 0.88);
      font-weight: 400;
      letter-spacing: 0.01em;
    }

    .direct-assist-link {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      color: #25D366;
      font-weight: 600;
      font-size: 0.92rem;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1.5px;
      transition: color 0.25s ease, text-decoration-color 0.25s ease;
    }

    .direct-assist-link:hover {
      color: #4AE784;
      text-decoration-color: #4AE784;
    }

    .direct-assist-link svg {
      flex-shrink: 0;
    }

    /* Page Header Hero (for Secondary Pages) */
    .page-hero {
      position: relative;
      padding: 5rem 0 4.5rem;
      background-color: var(--maroon-900);
      color: var(--white);
      text-align: center;
      background-size: cover;
      background-position: center;
    }

    .page-hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(56, 7, 13, 0.88), rgba(88, 17, 26, 0.82));
    }

    .page-hero .container {
      position: relative;
      z-index: 2;
      max-width: 800px;
    }

    .page-hero h1 {
      font-size: clamp(2rem, 4vw, 3rem);
      margin-bottom: 0.8rem;
    }

    .page-hero p {
      color: rgba(255, 255, 255, 0.88);
      font-size: 1.1rem;
      font-weight: 300;
    }

    /* ==========================================================================
       SECTION COMMON STYLES
       ========================================================================== */
    .section-py {
      padding: 5.5rem 0;
    }

    .section-header {
      text-align: center;
      max-width: 740px;
      margin: 0 auto 3.5rem;
    }

    .section-header h2 {
      font-size: clamp(1.8rem, 3.2vw, 2.5rem);
      margin-bottom: 0.75rem;
    }

    .section-header p {
      color: var(--charcoal-600);
      font-size: 1.05rem;
    }

    /* Dual Column Layout */
    .two-col-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 3.5rem;
      align-items: center;
    }

    .visual-wrapper {
      position: relative;
    }

    .visual-img {
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      width: 100%;
      height: 440px;
      object-fit: cover;
      border: 3px solid var(--white);
    }

    .visual-badge {
      position: absolute;
      bottom: -20px;
      right: 20px;
      background: var(--white);
      padding: 1.25rem 1.75rem;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-md);
      border-left: 4px solid var(--gold-500);
    }

    .visual-badge span {
      display: block;
      font-size: 0.8rem;
      color: var(--charcoal-600);
      text-transform: uppercase;
      font-weight: 600;
    }

    .visual-badge strong {
      font-family: var(--font-heading);
      font-size: 1.3rem;
      color: var(--maroon-800);
    }

    /* ==========================================================================
       SECTION 2: INTRODUCTION TO ARUNAI MAHAL (ENHANCED LAYOUT)
       ========================================================================== */
    .intro-section {
      background-color: var(--white);
      position: relative;
    }

    .intro-layout {
      grid-template-columns: 1.08fr 0.92fr;
      gap: 3.5rem;
      align-items: center;
    }

    .intro-kicker {
      color: var(--gold-600);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      display: inline-block;
      margin-bottom: 0.65rem;
    }

    .intro-heading {
      font-size: clamp(1.85rem, 2.5vw, 2.45rem);
      color: var(--maroon-900);
      line-height: 1.25;
      margin-bottom: 0.6rem;
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      text-transform: none;
      white-space: nowrap;
    }

    .intro-gold-bar {
      width: 52px;
      height: 3px;
      background: var(--gold-500);
      margin-top: 0.4rem;
      margin-bottom: 1.5rem;
      border-radius: 2px;
    }

    .intro-lead-p {
      font-size: 1.02rem;
      line-height: 1.68;
      color: var(--charcoal-700);
      margin-bottom: 1rem;
    }

    .intro-lead-p strong {
      color: var(--maroon-900);
      font-weight: 700;
    }

    .intro-sub-p {
      font-size: 0.96rem;
      line-height: 1.68;
      color: var(--charcoal-600);
      margin-bottom: 1.75rem;
    }

    /* Key Metric Stats Strip */
    .intro-stats-row {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-bottom: 2.25rem;
      padding-top: 1.25rem;
      border-top: 1px solid var(--sand-200);
    }

    .intro-stat-item {
      display: flex;
      flex-direction: column;
    }

    .intro-stat-num {
      display: block;
      font-family: var(--font-heading);
      font-size: clamp(1.65rem, 2.4vw, 2.15rem);
      font-weight: 700;
      color: var(--maroon-900);
      line-height: 1.15;
      margin-bottom: 0.35rem;
      letter-spacing: -0.01em;
    }

    .intro-stat-num.stat-gold {
      color: var(--gold-600);
    }

    .intro-stat-lbl {
      display: block;
      font-size: 0.8rem;
      color: var(--charcoal-600);
      line-height: 1.35;
      font-weight: 500;
    }

    /* Action Buttons Group */
    .intro-action-group {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .intro-btn-schedule {
      padding: 0.8rem 1.65rem;
      font-weight: 600;
      font-size: 0.92rem;
      box-shadow: 0 4px 14px rgba(36, 4, 8, 0.2);
    }

    .intro-btn-muhurtham {
      padding: 0.78rem 1.5rem;
      font-weight: 600;
      font-size: 0.92rem;
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      background: rgba(197, 160, 89, 0.08);
      border: 1.5px solid var(--gold-400);
      color: var(--maroon-900);
      border-radius: var(--radius-sm);
      transition: all 0.25s ease;
      cursor: pointer;
    }

    .intro-btn-muhurtham:hover {
      background: var(--gold-500);
      color: var(--white);
      border-color: var(--gold-500);
      box-shadow: 0 6px 18px rgba(197, 160, 89, 0.35);
      transform: translateY(-2px);
    }

    /* Visual Image Frame & Overlapping Floating Badge */
    .intro-visual-col {
      position: relative;
    }

    .intro-visual-container {
      position: relative;
      padding-bottom: 1.75rem;
    }

    .intro-image-frame {
      position: relative;
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 16px 40px rgba(36, 4, 8, 0.15);
      border: 4px solid var(--white);
      background: var(--sand-200);
    }

    .intro-main-photo {
      width: 100%;
      height: 520px;
      object-fit: cover;
      object-position: top center;
      display: block;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      transform-origin: center top;
    }

    .intro-image-frame:hover .intro-main-photo {
      transform: scale(1.03);
    }

    .intro-photo-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(23, 2, 4, 0.01) 0%, rgba(23, 2, 4, 0.03) 40%, rgba(56, 7, 18, 0.28) 100%);
      pointer-events: none;
    }

    /* Floating Badge: Uncompromising Purity */
    .intro-floating-badge {
      position: absolute;
      bottom: 0px;
      left: -20px;
      background: #FFFFFF;
      border-radius: 14px;
      box-shadow: 0 14px 35px rgba(36, 4, 8, 0.16), 0 2px 8px rgba(0, 0, 0, 0.06);
      border: 1px solid rgba(223, 185, 108, 0.35);
      padding: 0.95rem 1.25rem;
      display: flex;
      align-items: center;
      gap: 0.95rem;
      max-width: 330px;
      z-index: 4;
      animation: introBadgeFloat 4.5s ease-in-out infinite;
    }

    @keyframes introBadgeFloat {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-6px);
      }
    }

    .floating-badge-icon {
      width: 42px;
      height: 42px;
      min-width: 42px;
      border-radius: 50%;
      background: #E8F8F0;
      color: #10B981;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      box-shadow: 0 2px 6px rgba(16, 185, 129, 0.15);
    }

    .floating-badge-text {
      display: flex;
      flex-direction: column;
      gap: 0.2rem;
    }

    .floating-badge-title {
      font-family: var(--font-heading);
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--maroon-900);
      margin: 0;
      line-height: 1.25;
    }

    .floating-badge-desc {
      font-size: 0.78rem;
      color: var(--charcoal-600);
      margin: 0;
      line-height: 1.35;
    }

    /* Core Service Cards */
    .services-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2rem;
    }

    .service-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      transition: var(--transition);
      border: 1px solid var(--sand-200);
      display: flex;
      flex-direction: column;
    }

    .service-card:hover {
      transform: translateY(-6px);
      box-shadow: var(--shadow-lg);
      border-color: var(--gold-400);
    }

    .service-card-img-wrap {
      position: relative;
      height: clamp(240px, 30vw, 300px);
      overflow: hidden;
      background: #170204;
    }

    .service-card-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
      filter: contrast(1.05) saturate(1.08) brightness(0.96);
    }

    /* Temple Maroon & Warm Gold Multi-Stop Scrim Gradient Overlay */
    .service-card-img-wrap::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        180deg,
        rgba(56, 7, 18, 0.35) 0%,
        rgba(23, 2, 4, 0.06) 32%,
        rgba(23, 2, 4, 0.42) 68%,
        rgba(35, 4, 11, 0.90) 100%
      );
      pointer-events: none;
      transition: background 0.45s ease, opacity 0.45s ease;
      z-index: 1;
    }

    /* Bottom Decorative Gold Divider Line */
    .service-card-img-wrap::before {
      content: '';
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, transparent 0%, var(--gold-500) 25%, var(--gold-300) 50%, var(--gold-500) 75%, transparent 100%);
      z-index: 3;
      transition: height 0.3s ease, opacity 0.3s ease;
    }

    .service-card:hover .service-card-img {
      transform: scale(1.07);
      filter: contrast(1.08) saturate(1.15) brightness(1.02);
    }

    .service-card:hover .service-card-img-wrap::after {
      background: linear-gradient(
        180deg,
        rgba(88, 17, 26, 0.46) 0%,
        rgba(23, 2, 4, 0.10) 30%,
        rgba(23, 2, 4, 0.50) 68%,
        rgba(56, 7, 18, 0.94) 100%
      );
    }

    .service-card:hover .service-card-img-wrap::before {
      height: 4px;
    }

    .service-card-tag {
      position: absolute;
      top: 1rem;
      left: 1rem;
      z-index: 2;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      background: linear-gradient(135deg, rgba(88, 17, 26, 0.95), rgba(46, 5, 14, 0.96));
      color: var(--gold-300);
      font-size: 0.76rem;
      font-weight: 700;
      padding: 0.4rem 0.95rem;
      border-radius: 50px;
      letter-spacing: 0.05em;
      border: 1px solid rgba(223, 185, 108, 0.7);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.38), 0 0 10px rgba(197, 160, 89, 0.22);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      text-transform: uppercase;
    }

    .service-card-overlay-badge {
      position: absolute;
      bottom: 0.85rem;
      left: 1rem;
      right: 1rem;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
      pointer-events: none;
    }

    .overlay-badge-pill {
      font-size: 0.74rem;
      font-weight: 600;
      color: #FFF9EE;
      background: rgba(23, 2, 4, 0.82);
      border: 1px solid rgba(223, 185, 108, 0.45);
      padding: 0.22rem 0.65rem;
      border-radius: 4px;
      letter-spacing: 0.02em;
      backdrop-filter: blur(4px);
      -webkit-backdrop-filter: blur(4px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

    .service-card-body {
      padding: 2rem;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .service-card-body h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--maroon-900);
      margin-bottom: 0.85rem;
      line-height: 1.3;
    }

    .service-card-body .service-desc {
      color: var(--charcoal-600);
      margin-bottom: 1.25rem;
      font-size: 0.95rem;
      line-height: 1.6;
    }

    .service-feature-list {
      list-style: none;
      padding: 0;
      margin: 0 0 1.5rem 0;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      flex-grow: 1;
    }

    .service-feature-list li {
      display: flex;
      align-items: flex-start;
      gap: 0.75rem;
      font-size: 0.92rem;
      color: var(--charcoal-700);
      line-height: 1.45;
    }

    .service-feature-list .tick-icon {
      color: #10B981;
      background: #E8F8F0;
      border-radius: 50%;
      padding: 3px;
      width: 20px;
      height: 20px;
      min-width: 20px;
      flex-shrink: 0;
      margin-top: 1px;
    }

    .service-card-btn-wrap {
      margin-top: auto;
      padding-top: 1.25rem;
      border-top: 1px solid var(--sand-200);
      width: 100%;
    }

    .btn-full-card {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 0.95rem 1.5rem;
      font-weight: 600;
      font-size: 0.96rem;
      border-radius: var(--radius-sm);
      transition: all 0.3s ease;
      letter-spacing: 0.02em;
    }

    .btn-maroon.btn-full-card {
      background: linear-gradient(135deg, var(--maroon-800) 0%, var(--maroon-900) 100%);
      color: var(--white);
      border: 1px solid rgba(223, 185, 108, 0.35);
      box-shadow: 0 4px 14px rgba(36, 4, 8, 0.22);
    }

    .btn-maroon.btn-full-card:hover {
      background: linear-gradient(135deg, var(--maroon-700) 0%, var(--maroon-800) 100%);
      box-shadow: 0 8px 22px rgba(36, 4, 8, 0.35);
      border-color: var(--gold-400);
      transform: translateY(-2px);
      color: var(--white);
    }

    .btn-gold.btn-full-card {
      background: linear-gradient(135deg, #DFB96C 0%, #C5A059 50%, #B08A42 100%);
      color: var(--white);
      text-shadow: 0 1px 2px rgba(36, 4, 8, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.25);
      box-shadow: 0 4px 14px rgba(197, 160, 89, 0.35);
    }

    .btn-gold.btn-full-card:hover {
      background: linear-gradient(135deg, #F0CC82 0%, #D8B265 50%, #C09A50 100%);
      box-shadow: 0 8px 22px rgba(197, 160, 89, 0.5);
      border-color: #FFF2D6;
      transform: translateY(-2px);
      color: var(--white);
    }

    /* Feature Highlights Strip */
    .highlights-strip {
      background: linear-gradient(180deg, var(--maroon-900) 0%, var(--maroon-800) 100%);
      color: var(--white);
      padding: 1.5rem 0;
      border-top: 1.5px solid rgba(223, 185, 108, 0.4);
      border-bottom: 1.5px solid rgba(223, 185, 108, 0.4);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
      position: relative;
    }

    .highlights-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    /* Unboxed Horizontal Layout: Medium Sized Icon on Left, Heading & Subheading on Right */
    .highlight-item {
      display: flex;
      align-items: center;
      gap: 0.85rem;
      padding: 0.35rem 0.15rem;
      text-align: left;
      background: transparent;
      border: none;
      box-shadow: none;
      cursor: default;
    }

    /* Medium Icon Box with Subtle Pulse Animation */
    .highlight-icon {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 11px;
      background: linear-gradient(135deg, rgba(197, 160, 89, 0.14) 0%, rgba(56, 7, 13, 0.4) 100%);
      border: 1px solid rgba(223, 185, 108, 0.38);
      color: var(--gold-300);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      animation: highlightIconPulse 3.2s infinite ease-in-out;
      cursor: pointer;
    }

    @keyframes highlightIconPulse {
      0%, 100% {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25), 0 0 0 0 rgba(223, 185, 108, 0.35);
        transform: scale(1);
      }
      50% {
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25), 0 0 0 3.5px rgba(223, 185, 108, 0);
        transform: scale(1.02);
      }
    }

    .highlight-icon svg {
      transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
      filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
    }

    /* Icon-Only Light Hover Effect & Animation */
    .highlight-icon:hover,
    .highlight-item:hover .highlight-icon {
      background: linear-gradient(135deg, rgba(255, 248, 235, 0.28) 0%, rgba(223, 185, 108, 0.35) 100%);
      border-color: #FFF2D1;
      color: #FFFDF8;
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 6px 18px rgba(255, 235, 185, 0.28);
      animation: none;
    }

    .highlight-icon:hover svg,
    .highlight-item:hover .highlight-icon svg {
      transform: scale(1.1);
      color: #FFFFFF;
    }

    /* Vertical Heading & Subheading Column */
    .highlight-body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 0.18rem;
    }

    .highlight-item h4 {
      font-family: var(--font-heading);
      font-size: 0.90rem;
      font-weight: 700;
      color: var(--gold-100);
      margin: 0;
      line-height: 1.25;
      letter-spacing: 0.015em;
      transition: color 0.25s ease;
    }

    .highlight-item:hover h4 {
      color: #FFFFFF;
    }

    .highlight-item p {
      font-size: 0.78rem;
      color: rgba(255, 255, 255, 0.74);
      margin: 0;
      line-height: 1.35;
      font-weight: 400;
    }

    /* Why Choose Us Cards */
    .why-us-grid,
    .features-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
    }

    .why-card,
    .feature-card {
      background: var(--white);
      padding: 2.25rem 1.25rem;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--sand-200);
      transition: var(--transition);
      text-align: center;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .why-card::before,
    .feature-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: linear-gradient(90deg, var(--maroon-800), var(--gold-500));
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .why-card:hover,
    .feature-card:hover {
      transform: translateY(-5px);
      box-shadow: var(--shadow-md);
      border-color: var(--gold-400);
    }

    .why-card:hover::before,
    .feature-card:hover::before {
      opacity: 1;
    }

    .why-icon,
    .feature-icon-box {
      width: 64px;
      height: 64px;
      margin: 0 auto 1.25rem;
      border-radius: 50%;
      background: var(--gold-100);
      color: var(--maroon-800);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--gold-300);
      transition: var(--transition);
      flex-shrink: 0;
    }

    .why-card:hover .why-icon,
    .feature-card:hover .feature-icon-box {
      background: var(--maroon-800);
      color: var(--gold-400);
      border-color: var(--gold-400);
      transform: scale(1.08);
    }

    .why-card h3,
    .feature-card h3 {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--maroon-900);
      margin-bottom: 0.75rem;
      white-space: nowrap;
      letter-spacing: -0.01em;
    }

    .why-choose-title {
      font-family: 'Playfair Display', Georgia, serif;
      font-weight: 700;
      text-transform: none;
      letter-spacing: -0.01em;
    }

    .why-card p,
    .feature-card p {
      font-size: 0.92rem;
      color: var(--charcoal-600);
      line-height: 1.6;
    }

    /* Facility Feature Items in Wedding Hall */
    .feature-item {
      background: var(--white);
      padding: 1.75rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--sand-200);
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
      transition: var(--transition);
    }

    .feature-item:hover {
      border-color: var(--gold-400);
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .feature-icon-circle {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: var(--gold-100);
      color: var(--maroon-800);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid var(--gold-300);
      flex-shrink: 0;
      transition: var(--transition);
    }

    .feature-item:hover .feature-icon-circle {
      background: var(--maroon-800);
      color: var(--gold-400);
      border-color: var(--gold-400);
      transform: scale(1.08);
    }

    .feature-item h4 {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      color: var(--maroon-900);
      margin-bottom: 0.35rem;
    }

    .feature-item p {
      font-size: 0.9rem;
      color: var(--charcoal-600);
      line-height: 1.6;
    }

    /* Specs & Facilities Box */
    .specs-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
      margin: 2rem 0;
    }

    .spec-item {
      background: var(--white);
      padding: 1.5rem;
      border-radius: var(--radius-md);
      border-left: 4px solid var(--gold-500);
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .spec-icon {
      color: var(--maroon-700);
      flex-shrink: 0;
      margin-top: 0.2rem;
    }

    .spec-info h4 {
      font-family: var(--font-heading);
      font-size: 1.1rem;
      color: var(--maroon-900);
      margin-bottom: 0.25rem;
    }

    .spec-info p {
      font-size: 0.9rem;
      color: var(--charcoal-600);
    }

    /* Room Cards Comparison */
    .rooms-deck {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.5rem;
      align-items: stretch;
    }

    .room-tier-card {
      background: var(--white);
      border-radius: var(--radius-lg);
      border: 1px solid var(--sand-300);
      box-shadow: var(--shadow-md);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    .room-tier-card.featured {
      border: 2px solid var(--gold-500);
    }

    .room-popular-pill {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--gold-500);
      color: var(--white);
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      padding: 0.35rem 0.85rem;
      border-radius: 50px;
      z-index: 2;
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }

    .room-tier-img {
      width: 100%;
      height: 300px;
      object-fit: cover;
    }

    .room-tier-content {
      padding: 2.25rem;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .room-tier-content h3 {
      font-family: var(--font-heading);
      font-size: 1.6rem;
      color: var(--maroon-900);
      margin-bottom: 0.5rem;
    }

    .room-checklist {
      list-style: none;
      margin: 1.5rem 0 2rem;
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .room-checklist li {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 0.95rem;
      color: var(--charcoal-700);
    }

    .check-bullet {
      color: var(--gold-600);
      flex-shrink: 0;
    }

    /* Pill Chips and Room Price Tags */
    .pill-chip,
    .facility-tag,
    .spec-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      padding: 0.35rem 0.85rem;
      background: var(--sand-100);
      color: var(--maroon-900);
      border: 1px solid var(--sand-300);
      border-radius: 50px;
      font-size: 0.82rem;
      font-weight: 600;
      transition: var(--transition);
    }

    .room-price-info {
      font-size: 0.92rem;
      font-weight: 700;
      color: var(--maroon-800);
      background: var(--sand-100);
      padding: 0.45rem 0.85rem;
      border-radius: var(--radius-sm);
      border: 1px solid var(--sand-300);
      display: inline-flex;
      align-items: center;
    }

    /* Verification Badge Notice */
    .verification-notice {
      background: var(--gold-50);
      border: 1px dashed var(--gold-500);
      padding: 1.25rem 1.5rem;
      border-radius: var(--radius-md);
      font-size: 0.92rem;
      color: var(--charcoal-700);
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 2rem 0;
    }

    /* FAQs Accordion */
    .faq-container,
    .faq-wrapper {
      max-width: 840px;
      margin: 0 auto;
    }

    .faq-item {
      background: var(--white);
      border: 1px solid var(--sand-200);
      border-radius: var(--radius-md);
      margin-bottom: 1rem;
      overflow: hidden;
      transition: var(--transition);
    }

    details.faq-item summary::-webkit-details-marker {
      display: none;
    }

    details.faq-item summary {
      list-style: none;
      cursor: pointer;
    }

    .faq-item:hover {
      border-color: var(--gold-400);
    }

    .faq-question {
      width: 100%;
      text-align: left;
      padding: 1.25rem 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-heading);
      font-size: 1.05rem;
      font-weight: 600;
      color: var(--maroon-900);
      background: none;
      cursor: pointer;
    }

    .faq-chevron,
    .faq-icon {
      transition: transform 0.3s ease;
      color: var(--gold-600);
      flex-shrink: 0;
    }

    .faq-item[open] .faq-chevron,
    .faq-item[open] .faq-icon,
    .faq-item.active .faq-chevron,
    .faq-item.active .faq-icon {
      transform: rotate(180deg);
      color: var(--maroon-800);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease, padding 0.35s ease;
      padding: 0 1.5rem;
      color: var(--charcoal-600);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .faq-item[open] .faq-answer,
    .faq-item.active .faq-answer {
      padding: 0 1.5rem 1.5rem 1.5rem;
      max-height: 500px;
    }

    /* ==========================================================================
       PHOTO GALLERY & LIGHTBOX
       ========================================================================== */
    .gallery-filter-bar {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.75rem;
      margin-bottom: 2.5rem;
    }

    .filter-btn {
      padding: 0.6rem 1.4rem;
      border-radius: 50px;
      font-size: 0.88rem;
      font-weight: 600;
      background: var(--white);
      color: var(--charcoal-700);
      border: 1px solid var(--sand-300);
      transition: var(--transition);
    }

    .filter-btn:hover, .filter-btn.active {
      background: var(--maroon-800);
      color: var(--white);
      border-color: var(--maroon-800);
      box-shadow: var(--shadow-sm);
    }

    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
    }

    .gallery-card {
      position: relative;
      border-radius: var(--radius-md);
      overflow: hidden;
      aspect-ratio: 4 / 3;
      cursor: pointer;
      box-shadow: var(--shadow-sm);
      border: 1px solid var(--sand-200);
      background-color: var(--sand-200);
    }

    .gallery-card img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .gallery-card:hover img {
      transform: scale(1.08);
    }

    .gallery-card-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, transparent 40%, rgba(56, 7, 13, 0.85) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.25rem;
      color: var(--white);
    }

    .gallery-card:hover .gallery-card-overlay {
      opacity: 1;
    }

    .gallery-card-overlay h4 {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      color: var(--gold-300);
    }

    .gallery-card-overlay span {
      font-size: 0.8rem;
      color: rgba(255, 255, 255, 0.8);
    }

    /* Modal Lightbox */
    .lightbox-modal {
      position: fixed;
      inset: 0;
      background: rgba(10, 5, 5, 0.95);
      z-index: 3000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 2rem;
    }

    .lightbox-modal.active {
      display: flex;
    }

    .lightbox-content-box {
      position: relative;
      max-width: 960px;
      width: 100%;
      max-height: 90vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .lightbox-image,
    .lightbox-main-img {
      max-width: 100%;
      max-height: 75vh;
      border-radius: var(--radius-sm);
      object-fit: contain;
      box-shadow: 0 10px 40px rgba(0,0,0,0.5);
      border: 2px solid var(--gold-500);
      display: block;
      margin: 0 auto;
    }

    .lightbox-meta,
    .lightbox-caption {
      margin-top: 1rem;
      text-align: center;
      color: var(--white);
    }

    .lightbox-caption h4 {
      font-family: var(--font-heading);
      font-size: 1.2rem;
      color: var(--gold-400);
    }

    .lightbox-caption p {
      font-size: 0.88rem;
      color: rgba(255, 255, 255, 0.7);
    }

    .lightbox-btn {
      position: absolute;
      background: rgba(255, 255, 255, 0.15);
      color: var(--white);
      width: 48px;
      height: 48px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 255, 255, 0.3);
      transition: var(--transition);
      z-index: 3010;
    }

    .lightbox-btn:hover {
      background: var(--gold-500);
      color: var(--white);
      border-color: var(--gold-500);
    }

    .lightbox-close {
      top: 1.5rem;
      right: 1.5rem;
    }

    .lightbox-prev {
      left: 1rem;
      top: 50%;
      transform: translateY(-50%);
    }

    .lightbox-next {
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
    }

    /* ==========================================================================
       CONTACT & ENQUIRY PAGE
       ========================================================================== */
    .contact-grid {
      display: grid;
      grid-template-columns: 1fr 1.3fr;
      gap: 3.5rem;
      align-items: flex-start;
    }

    .contact-info-deck {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .contact-info-card {
      background: var(--white);
      padding: 1.75rem;
      border-radius: var(--radius-md);
      border: 1px solid var(--sand-200);
      box-shadow: var(--shadow-sm);
      display: flex;
      align-items: flex-start;
      gap: 1.25rem;
      transition: var(--transition);
    }

    .contact-info-card:hover {
      border-color: var(--gold-400);
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .contact-info-card .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--gold-100);
      color: var(--maroon-800);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    .contact-info-card h4 {
      font-family: var(--font-heading);
      font-size: 1.05rem;
      color: var(--maroon-900);
      margin-bottom: 0.25rem;
    }

    .contact-info-card p, .contact-info-card a {
      font-size: 0.95rem;
      color: var(--charcoal-600);
      word-break: break-word;
    }

    .form-card,
    .contact-form-container {
      background: var(--white);
      padding: 2.75rem;
      border-radius: var(--radius-lg);
      border: 1.5px solid var(--gold-300);
      box-shadow: var(--shadow-md);
      position: relative;
    }

    .form-group {
      margin-bottom: 1.4rem;
    }

    .form-label {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--charcoal-800);
      margin-bottom: 0.5rem;
    }

    .form-input,
    .form-select,
    .form-textarea,
    .form-control {
      width: 100%;
      padding: 0.85rem 1rem;
      font-family: var(--font-body);
      font-size: 0.95rem;
      color: var(--charcoal-900);
      background-color: var(--sand-50);
      border: 1.5px solid var(--sand-300);
      border-radius: var(--radius-sm);
      transition: var(--transition);
      box-sizing: border-box;
    }

    .form-textarea {
      min-height: 120px;
      resize: vertical;
    }

    .form-input:focus,
    .form-select:focus,
    .form-textarea:focus,
    .form-control:focus {
      outline: none;
      border-color: var(--gold-500);
      background-color: var(--white);
      box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.2);
    }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    /* Google Maps Embed Container */
    .map-wrapper,
    .map-embed-wrapper {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-md);
      border: 2px solid var(--gold-400);
      background: var(--sand-200);
      height: 380px;
      position: relative;
    }

    .map-wrapper iframe,
    .map-embed-wrapper iframe {
      width: 100%;
      height: 100%;
      border: 0;
      display: block;
    }

    /* Nearby Places Landmark Visual in Strategic Location Section */
    .nearby-places-visual {
      margin-bottom: 1.5rem;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 1.5px solid var(--gold-400);
      box-shadow: var(--shadow-md);
      position: relative;
      background: var(--maroon-900);
    }

    .nearby-img-frame {
      position: relative;
      width: 100%;
      height: 220px;
      overflow: hidden;
    }

    .nearby-img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .nearby-places-visual:hover .nearby-img {
      transform: scale(1.05);
    }

    .nearby-img-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(88, 17, 26, 0.2) 0%, rgba(56, 7, 13, 0.88) 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.25rem 1.5rem;
      color: var(--white);
    }

    .nearby-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      align-self: flex-start;
      background: var(--gold-500);
      color: var(--maroon-900);
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.3rem 0.75rem;
      border-radius: 50px;
      margin-bottom: 0.5rem;
      box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    }

    .nearby-img-overlay p {
      font-size: 0.95rem;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.95);
      margin: 0;
      line-height: 1.4;
      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    }

    /* Final CTA Banner */
    .final-cta-banner {
      background: linear-gradient(135deg, var(--maroon-900), var(--maroon-800));
      color: var(--white);
      padding: 5rem 0;
      text-align: center;
      position: relative;
      overflow: hidden;
      border-top: 2px solid var(--gold-500);
    }

    .final-cta-banner::before {
      content: "";
      position: absolute;
      top: -50px;
      right: -50px;
      width: 250px;
      height: 250px;
      background: radial-gradient(circle, rgba(197, 160, 89, 0.2), transparent 70%);
      border-radius: 50%;
    }

    .final-cta-banner .container {
      position: relative;
      z-index: 2;
      max-width: 800px;
    }

    .final-cta-banner h2 {
      font-size: clamp(2rem, 3.5vw, 2.7rem);
      margin-bottom: 1rem;
      color: var(--white);
    }

    .final-cta-banner p {
      font-size: 1.15rem;
      color: rgba(255, 255, 255, 0.88);
      margin-bottom: 2rem;
      font-weight: 300;
    }

    .cta-banner-buttons,
    .final-cta-banner .cta-buttons {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
    }

    /* ==========================================================================
       SHARED FOOTER
       ========================================================================== */
    .site-footer {
  background: linear-gradient(
    180deg,
    #180205 0%,
    #2c050c 30%,
    #3c0812 55%,
    #220308 80%,
    #120103 100%
  );
  color: rgba(255, 255, 255, 0.78);
  padding: 5rem 0 2rem;
  border-top: 3px solid var(--gold-500);
  position: relative;
}

/* 4-Column Main Footer Grid */
.footer-main-grid,
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.35fr 1.3fr;
  gap: 2.75rem;
  margin-bottom: 3.5rem;
  align-items: start;
}

/* Column 1: Brand & Credentials */
.footer-brand-header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.15rem;
}

.site-footer .brand-crest,
.footer-crest {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
  flex-shrink: 0;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.footer-brand-header:hover .footer-crest {
  transform: scale(1.05);
  filter: drop-shadow(0 6px 16px rgba(223, 185, 108, 0.35));
}

.footer-brand-badge {
  width: 48px;
  height: 48px;
  border: 1.5px solid var(--gold-400);
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--gold-300);
  background: linear-gradient(135deg, var(--maroon-800), var(--maroon-900));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.footer-brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #FFFFFF; /* Pure White from reference image */
  text-transform: uppercase;
  display: block;
  text-align: center;
  line-height: 1.15;
}

.footer-brand-tagline {
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: #DFB96C; /* Warm Golden Amber from reference image */
  text-transform: uppercase;
  display: block;
  text-align: center;
  margin-top: 0.28rem;
  opacity: 1;
  white-space: nowrap;
}

.footer-brand-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.35rem;
}

/* Live Visitor Counter Badge in Footer */
.footer-visitor-card {
  display: inline-flex;
  flex-direction: column;
  gap: 0.45rem;
  background: rgba(24, 3, 7, 0.72);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.95rem;
  width: fit-content;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: all 0.3s ease;
  margin-top: 0.25rem;
}

.footer-visitor-card:hover {
  border-color: var(--gold-400);
  background: rgba(36, 5, 10, 0.85);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.visitor-card-header {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.live-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #10B981;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: liveBadgePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

@keyframes liveBadgePulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.visitor-card-title {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-300);
}

.visitor-card-counter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.visitor-card-counter svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

.visitor-count-number {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.04em;
  line-height: 1;
}

.visitor-count-tag {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.footer-badges-list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.footer-pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(36, 4, 8, 0.65);
  border: 1px solid rgba(197, 160, 89, 0.35);
  color: var(--gold-200);
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.4rem 0.85rem;
  border-radius: 50px;
  width: fit-content;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.footer-pill-badge svg {
  color: var(--gold-400);
  flex-shrink: 0;
}

/* Column Headings */
.footer-col-title,
.footer-heading {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}

/* Column 2: Venue Navigation List */
.footer-nav-list,
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.95rem;
}

.footer-nav-list li a,
.footer-links li a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-nav-list li a:hover,
.footer-links li a:hover {
  color: var(--gold-300);
  transform: translateX(4px);
}

.nav-dot {
  color: var(--gold-500);
  font-size: 1rem;
  line-height: 1;
  display: inline-block;
}

.nav-gold-highlight {
  color: var(--gold-300) !important;
  font-weight: 600;
}

.nav-gold-highlight:hover {
  color: #FFF2D6 !important;
}

/* Column 3: Reach Arunai Mahal */
.footer-reach-list {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

.footer-reach-item,
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.5;
}

.reach-icon,
.footer-contact-item svg {
  color: var(--gold-400);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.reach-text p {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}

.reach-subnote {
  display: block;
  font-size: 0.78rem;
  color: var(--gold-300);
  margin-top: 0.2rem;
  font-weight: 500;
}

.reach-phones {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.reach-phones a,
.reach-email {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.25s ease;
}

.reach-phones a:hover,
.reach-email:hover {
  color: var(--gold-300);
}

.reach-visiting strong {
  color: var(--gold-300);
}

/* Column 4: Direct Inquiries Desk Card */
.footer-desk-card {
  background: linear-gradient(145deg, rgba(38, 4, 9, 0.85) 0%, rgba(20, 2, 5, 0.92) 100%);
  border: 1.5px solid rgba(197, 160, 89, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transition: border-color 0.3s ease;
}

.footer-desk-card:hover {
  border-color: var(--gold-400);
}

.footer-desk-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.65rem 0;
}

.footer-desk-desc {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
}

.footer-desk-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.btn-footer-desk,
.btn-desk-call,
.btn-desk-wa {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.86rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.footer-desk-trust {
  text-align: center;
  font-size: 0.74rem;
  color: var(--gold-300);
  letter-spacing: 0.02em;
  font-weight: 500;
  padding-top: 0.25rem;
}

/* Footer Bottom Bar */
.footer-bottom-bar,
.footer-bottom {
  border-top: 1px solid rgba(197, 160, 89, 0.22);
  padding-top: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.72);
  flex-wrap: nowrap;
}

.footer-bottom-left {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.footer-bottom-center,
.footer-bottom-links {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

.footer-bottom-center a,
.footer-bottom-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.25s ease;
}

.footer-bottom-center a:hover,
.footer-bottom-links a:hover {
  color: var(--gold-300);
}

.footer-bottom-dot {
  color: var(--gold-400);
  font-size: 0.85rem;
}

.footer-developer-credit,
.footer-script-tagline {
  font-family: var(--font-body);
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.84rem;
  letter-spacing: 0.015em;
  white-space: nowrap;
}

.footer-developer-credit a,
.footer-script-tagline a {
  color: var(--gold-300);
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.footer-developer-credit a:hover,
.footer-script-tagline a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

/* ==========================================================================
   FLOATING BACK TO TOP BUTTON (Fixed bottom-right circular button with theme maroon & gold)
   ========================================================================== */
.floating-back-to-top {
  position: fixed;
  bottom: 2.25rem;
  right: 2.25rem;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #601325 0%, #460D1A 100%);
  border: 1.5px solid rgba(223, 185, 108, 0.45);
  color: #DFB96C;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 999;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(94, 18, 36, 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  outline: none;
  padding: 0;
}

.floating-back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.floating-back-to-top:hover {
  background: linear-gradient(145deg, #74172D 0%, #540F1E 100%);
  border-color: #FDF3DA;
  color: #FFFFFF;
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 10px 28px rgba(94, 18, 36, 0.45), 0 0 16px rgba(223, 185, 108, 0.35);
}

.floating-back-to-top:active {
  transform: translateY(-1px) scale(0.98);
}

.floating-back-to-top svg {
  transition: transform 0.25s ease;
}

.floating-back-to-top:hover svg {
  transform: translateY(-2px);
}

/* Ensure it clears mobile sticky bottom bar */
@media (max-width: 768px) {
  .floating-back-to-top {
    bottom: 5.25rem;
    right: 1.25rem;
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 1024px) {
  .footer-main-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
  }
  .footer-bottom-bar {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    text-align: center;
  }
  .footer-bottom-center,
  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }
  .footer-bottom-right {
    margin: 0 auto;
  }
}

@media (max-width: 640px) {
  .footer-main-grid {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
  .footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 1.15rem;
  }
  .footer-bottom-center,
  .footer-bottom-links {
    flex-direction: column;
    gap: 0.5rem;
  }
  .footer-bottom-dot {
    display: none;
  }
  .footer-bottom-right {
    margin: 0.5rem auto 0;
  }
}

/* Custom Toast Message Notification */
    .toast-notification {
      position: fixed;
      bottom: 2rem;
      right: 2rem;
      background: var(--maroon-900);
      color: var(--white);
      padding: 1rem 1.5rem;
      border-radius: var(--radius-sm);
      border-left: 4px solid var(--gold-500);
      box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      z-index: 4000;
      display: none;
      animation: toastSlide 0.3s ease forwards;
    }

    @keyframes toastSlide {
      from { transform: translateY(20px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    /* ==========================================================================
       RESPONSIVE BREAKPOINTS
       ========================================================================== */
    @media (max-width: 1024px) {
      .services-grid, .two-col-layout, .contact-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
      }
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .why-us-grid,
      .features-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .highlights-grid {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 768px) {
      body {
        padding-bottom: 70px; /* Space for mobile bottom bar */
      }
      .nav-menu, .header-actions {
        display: none;
      }
      .hamburger-btn {
        display: flex;
      }
      .mobile-bottom-bar {
        display: block;
      }
      .top-bar {
        display: none;
      }
      .highlights-strip {
        display: none !important;
      }
      .rooms-deck {
        grid-template-columns: 1fr;
      }
      .form-row {
        grid-template-columns: 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
      }
      .hero-content {
        padding: 3rem 0;
      }
      .hero-badge-wrap {
        text-align: center;
      }
      .hero-badge {
        display: inline-flex;
        text-align: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 0.76rem;
        padding: 0.42rem 1.05rem;
        line-height: 1.45;
        white-space: normal;
        max-width: 100%;
      }
      .hero-badge-text {
        text-align: center;
        display: inline;
      }
      .visual-img {
        height: 320px;
      }
      .intro-layout {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
      }
      .intro-visual-col {
        order: 1; /* First image in mobile view */
        width: 100%;
      }
      .intro-content-col {
        order: 2; /* Content follows next in mobile view */
        width: 100%;
      }
      .intro-heading {
        white-space: normal;
        font-size: clamp(1.35rem, 5.5vw, 1.95rem);
      }
      .intro-main-photo {
        height: 400px;
        object-position: top center;
      }
      .intro-floating-badge {
        position: static;
        margin-top: -1.25rem;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        max-width: calc(100% - 1rem);
      }
    }

    @media (max-width: 480px) {
      .intro-heading {
        font-size: clamp(1.45rem, 5.5vw, 1.8rem);
        white-space: normal;
      }
      .intro-stats-row {
        grid-template-columns: 1fr;
        gap: 1.15rem;
      }
      .intro-action-group {
        flex-direction: column;
        width: 100%;
      }
      .intro-btn-schedule,
      .intro-btn-muhurtham {
        width: 100%;
        justify-content: center;
      }
      .brand-title {
        font-size: 1.25rem;
      }
      .brand-subtitle {
        font-size: 0.58rem;
        letter-spacing: 0.12em;
      }
      .gallery-grid {
        grid-template-columns: 1fr;
      }
      .why-us-grid,
      .features-grid {
        grid-template-columns: 1fr;
      }
      .highlights-grid {
        grid-template-columns: 1fr;
      }
      .hero-badge {
        font-size: 0.72rem;
        padding: 0.4rem 0.85rem;
      }
      .hero-title {
        font-size: clamp(1.75rem, 6.8vw, 2.3rem);
        line-height: 1.25;
      }
      .hero-cta-group {
        flex-direction: column;
      }
      .hero-direct-assist {
        flex-direction: row;
        align-items: center;
        gap: 0.45rem;
        margin-top: 1.25rem;
        padding-top: 1rem;
        font-size: 0.88rem;
      }
      .btn {
        width: 100%;
      }
    }


/* ==========================================================================
   MOTION & TRACTION ANIMATION SYSTEM
   ========================================================================== */

/* Top Scroll Progress Shimmer Bar */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3.5px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-600) 0%, var(--gold-400) 50%, #fff2d6 100%);
  z-index: 2000;
  box-shadow: 0 0 10px rgba(223, 185, 108, 0.8);
  transition: width 0.1s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

/* Base Reveal Traction Effect (Smooth Inertia & Spring Easing) */
.reveal-traction {
  opacity: 0;
  transform: translateY(38px) scale(0.985);
  filter: blur(2px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.reveal-traction.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Horizontal Traction Variants */
.traction-left {
  opacity: 0;
  transform: translateX(-42px) scale(0.98);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.traction-left.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.traction-right {
  opacity: 0;
  transform: translateX(42px) scale(0.98);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.traction-right.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.traction-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.traction-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger Delay Utility Classes */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

/* Traction Card Hover Elevation */
.service-card,
.room-tier-card,
.why-card,
.spec-item,
.gallery-card,
.contact-detail-card,
.seo-feature-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.4s ease;
}

.service-card:hover,
.room-tier-card:hover,
.why-card:hover,
.spec-item:hover,
.contact-detail-card:hover,
.seo-feature-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 20px 42px -6px rgba(88, 17, 26, 0.16), 0 0 24px rgba(197, 160, 89, 0.25);
  border-color: var(--gold-400);
}

/* Tactile Active Press Effect on Buttons */
.btn:active {
  transform: translateY(1px) scale(0.98) !important;
}

/* Floating Animation for Decorative Emblems & Badges */
@keyframes floatTraction {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-7px);
  }
}

.visual-badge {
  animation: floatTraction 4.5s ease-in-out infinite;
}

/* Shimmer Highlight for Featured Elements */
@keyframes goldPulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.4);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(197, 160, 89, 0);
  }
}

.room-popular-pill,
.badge-gold-pulse {
  animation: goldPulseGlow 2.8s infinite;
}

/* ==========================================================================
   SEO & ROOMS COMPARISON ENHANCEMENTS
   ========================================================================== */

/* SEO Comparison Table */
.seo-table-container {
  width: 100%;
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--gold-300);
  background: var(--white);
  box-shadow: var(--shadow-md);
  margin: 2.5rem 0;
}

.seo-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 0.95rem;
}

.seo-table th {
  background: var(--maroon-800);
  color: var(--white);
  padding: 1.1rem 1.4rem;
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--gold-500);
}

.seo-table td {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--sand-200);
  color: var(--charcoal-700);
}

.seo-table tbody tr:nth-child(even) {
  background-color: var(--sand-50);
}

.seo-table tbody tr:hover {
  background-color: var(--gold-50);
}

.seo-table .highlight-col {
  background: rgba(197, 160, 89, 0.08);
  font-weight: 600;
  color: var(--maroon-900);
}

/* SEO Highlight Pillars Grid */
.seo-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin: 2.5rem 0;
}

@media (max-width: 900px) {
  .seo-features-grid {
    grid-template-columns: 1fr;
  }
}

.seo-feature-card {
  background: var(--white);
  border: 1.5px solid var(--gold-300);
  border-radius: var(--radius-md);
  padding: 1.8rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.seo-feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--maroon-900);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.seo-feature-card p {
  color: var(--charcoal-600);
  font-size: 0.93rem;
  line-height: 1.6;
}

/* Landmark Distance Reference Pills */
.distance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.distance-pill-card {
  background: var(--white);
  border: 1px solid var(--gold-300);
  border-left: 4px solid var(--gold-500);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow: var(--shadow-sm);
}

.distance-pill-card strong {
  color: var(--maroon-900);
  font-size: 0.92rem;
}

.distance-pill-card span {
  color: var(--gold-600);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal-traction,
  .traction-left,
  .traction-right,
  .traction-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Auspicious Muhurtham Calendar Dialog Modal
   ========================================================================== */
body.modal-open {
  overflow: hidden !important;
}

.muhurtham-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 5, 8, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.muhurtham-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.muhurtham-modal-dialog {
  background: #ffffff;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  border-radius: 14px;
  box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(197, 160, 89, 0.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.muhurtham-modal-overlay.active .muhurtham-modal-dialog {
  transform: scale(1) translateY(0);
}

/* Modal Header */
.muhurtham-modal-header {
  background: linear-gradient(135deg, #240408 0%, #38070D 100%);
  border-bottom: 2px solid var(--gold-500);
  padding: 1.15rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.muhurtham-header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.muhurtham-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(223, 185, 108, 0.4);
  background: rgba(223, 185, 108, 0.12);
  color: var(--gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.muhurtham-header-text {
  display: flex;
  flex-direction: column;
}

.muhurtham-title {
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.25;
  margin: 0 0 0.2rem 0;
  letter-spacing: 0.02em;
}

.muhurtham-subtitle {
  font-size: 0.84rem;
  color: var(--gold-400);
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.02em;
}

.muhurtham-close-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: rgba(255, 255, 255, 0.8);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.muhurtham-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  transform: rotate(90deg);
}

/* Modal Body */
.muhurtham-modal-body {
  padding: 1.4rem 1.5rem;
  overflow-y: auto;
  max-height: calc(90vh - 145px);
  background: #FAF8F5;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Notice Banner */
.muhurtham-notice-banner {
  background: #FFFDF7;
  border: 1px solid #EADBBA;
  border-left: 4px solid var(--gold-500);
  border-radius: 8px;
  padding: 0.9rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.muhurtham-notice-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.muhurtham-notice-star {
  color: var(--gold-600);
  font-size: 1.15rem;
  flex-shrink: 0;
}

.muhurtham-notice-content p {
  color: var(--charcoal-700);
  font-size: 0.88rem;
  line-height: 1.45;
  margin: 0;
}

.muhurtham-notice-content strong {
  color: var(--maroon-900);
}

.btn-call-desk {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.48rem 0.9rem;
  background: #ffffff;
  border: 1px solid #D5C096;
  border-radius: 6px;
  color: var(--maroon-900);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.btn-call-desk:hover {
  background: var(--gold-50);
  border-color: var(--gold-500);
  color: var(--maroon-800);
  transform: translateY(-1px);
}

/* Season Section */
.muhurtham-season-section {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.muhurtham-season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid #EAE3D5;
}

.muhurtham-season-title {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--maroon-900);
  margin: 0;
}

.muhurtham-demand-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.badge-high-demand,
.badge-peak-period {
  background: #FEF3C7;
  color: #B45309;
  border: 1px solid #FCD34D;
}

/* Date Card */
.muhurtham-date-card {
  background: #ffffff;
  border: 1px solid #E6DFD3;
  border-radius: 8px;
  padding: 0.95rem 1.15rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
  transition: all 0.2s ease;
}

.muhurtham-date-card:hover {
  border-color: var(--gold-400);
  box-shadow: 0 6px 16px rgba(56, 7, 13, 0.07);
  transform: translateY(-1px);
}

.muhurtham-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.muhurtham-date-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.muhurtham-date-main {
  font-weight: 700;
  font-size: 0.98rem;
  color: #1F2937;
}

.muhurtham-day {
  color: #6B7280;
  font-size: 0.88rem;
  font-weight: 500;
}

.status-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  line-height: 1.2;
}

.status-available {
  background: #DCFCE7;
  color: #15803D;
  border: 1px solid #86EFAC;
}

.status-filling {
  background: #FEF3C7;
  color: #D97706;
  border: 1px solid #FDE68A;
}

.muhurtham-time-meta {
  font-size: 0.82rem;
  color: #6B7280;
  line-height: 1.4;
}

/* Actions in Card */
.muhurtham-card-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.btn-check-date {
  background: #240408;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: 6px;
  border: 1px solid #240408;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-check-date:hover {
  background: #4A0D15;
  border-color: #4A0D15;
}

.btn-whatsapp-compact {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: #25D366;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 0.95rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-whatsapp-compact:hover {
  background: #1EBE5D;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

/* Modal Footer */
.muhurtham-modal-footer {
  background: #F5F1EA;
  border-top: 1px solid #E6DFD3;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.muhurtham-footer-query {
  font-size: 0.85rem;
  color: #554D43;
}

.muhurtham-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.muhurtham-footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--maroon-900);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  transition: color 0.2s ease;
}

.muhurtham-footer-phone:hover {
  color: var(--gold-600);
}

.btn-muhurtham-close {
  background: #E5E0D5;
  color: #240408;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.45rem 1rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-muhurtham-close:hover {
  background: #D8D2C4;
}

/* Modal Responsiveness */
@media (max-width: 640px) {
  .muhurtham-modal-overlay {
    padding: 0.6rem;
  }
  
  .muhurtham-modal-header {
    padding: 1rem;
  }

  .muhurtham-title {
    font-size: 1.1rem;
  }

  .muhurtham-subtitle {
    font-size: 0.76rem;
  }

  .muhurtham-modal-body {
    padding: 1rem;
    gap: 1.25rem;
  }

  .muhurtham-notice-banner {
    flex-direction: column;
    align-items: flex-start;
  }

  .btn-call-desk {
    width: 100%;
    justify-content: center;
  }

  .muhurtham-date-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .muhurtham-card-actions {
    width: 100%;
  }

  .btn-check-date,
  .btn-whatsapp-compact {
    flex: 1;
    justify-content: center;
    text-align: center;
  }

  .muhurtham-modal-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 0.9rem 1rem;
  }

  .muhurtham-footer-actions {
    justify-content: space-between;
  }
}

/* ==========================================================================
   Section 4: The Grand Wedding Hall Architecture & Highlights Showcase
   ========================================================================== */
.grand-hall-section {
  position: relative;
  background-color: var(--sand-50);
  padding: 3.5rem 0 !important;
}

.grand-hall-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
}

.grand-hall-header-left {
  flex: 1 1 auto;
  max-width: 620px;
}

.grand-hall-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 0.6rem;
}

.grand-hall-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  font-weight: 700;
  color: var(--maroon-900);
  line-height: 1.18;
  margin: 0;
  letter-spacing: -0.01em;
}

.grand-hall-header-right {
  flex: 0 1 450px;
}

.grand-hall-header-desc {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--charcoal-600);
  margin: 0;
}

/* 2-Column Showcase Grid: 60/40 Split */
.grand-hall-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.85rem;
  align-items: stretch;
}

/* Left Column: Visual Showcase Card */
.grand-hall-visual-card {
  position: relative;
  min-height: 360px;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-shadow: 0 16px 40px rgba(56, 7, 13, 0.18);
  border: 1.5px solid rgba(223, 185, 108, 0.4);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}

.grand-hall-visual-card:hover {
  transform: translateY(-3px);
  border-color: var(--gold-400);
  box-shadow: 0 24px 56px rgba(88, 17, 26, 0.28);
}

.grand-hall-visual-card .showcase-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.grand-hall-visual-card:hover .showcase-bg-img {
  transform: scale(1.03);
}

.grand-hall-visual-card .showcase-gradient-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(56, 7, 13, 0.18) 0%,
    rgba(88, 17, 26, 0.38) 40%,
    rgba(40, 5, 10, 0.82) 72%,
    rgba(24, 3, 5, 0.96) 100%
  );
  z-index: 2;
  pointer-events: none;
}

.grand-hall-visual-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(197, 160, 89, 0.22) 0%, transparent 65%);
  z-index: 2;
  pointer-events: none;
}

.grand-hall-visual-card .showcase-card-content {
  position: relative;
  z-index: 3;
  padding: 1.85rem 1.85rem;
  color: var(--white);
}

.showcase-kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #F0CC82;
  margin-bottom: 0.45rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.showcase-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.25;
  margin: 0 0 0.55rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.showcase-desc {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
  max-width: 580px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Right Column: Venue Capacity & Highlights Card */
.grand-hall-sidebar-card {
  background: linear-gradient(165deg, #2A060C 0%, #1A0205 100%);
  border: 1px solid rgba(223, 185, 108, 0.3);
  border-radius: 20px;
  padding: 1.65rem 1.65rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 16px 40px rgba(36, 4, 8, 0.2);
  position: relative;
  overflow: hidden;
}

.grand-hall-sidebar-card::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(223, 185, 108, 0.12) 0%, transparent 70%);
  pointer-events: none;
}

.grand-hall-sidebar-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 1rem;
  letter-spacing: 0.01em;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(223, 185, 108, 0.22);
}

.grand-hall-highlights-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.15rem;
}

.grand-hall-highlight-box {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(223, 185, 108, 0.22);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  transition: all 0.3s ease;
}

.grand-hall-highlight-box:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.04) 100%);
  border-color: rgba(223, 185, 108, 0.5);
  transform: translateX(3px);
}

.highlight-box-kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #DFB96C;
  margin-bottom: 0.3rem;
  display: block;
}

.highlight-box-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.32rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.3rem;
  line-height: 1.25;
}

.highlight-box-desc {
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
  margin: 0;
}

/* Bottom Full-Width Gold Button */
.grand-hall-btn-reserve {
  width: 100%;
  background: linear-gradient(135deg, #DFB96C 0%, #C5A059 50%, #B08A42 100%);
  color: #1A0205;
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 700;
  padding: 1rem 1.5rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(197, 160, 89, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  letter-spacing: 0.01em;
  margin-top: auto;
}

.grand-hall-btn-reserve:hover {
  background: linear-gradient(135deg, #F0CC82 0%, #D8B265 50%, #C09A50 100%);
  color: #1A0205;
  box-shadow: 0 8px 24px rgba(197, 160, 89, 0.5);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .grand-hall-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  .grand-hall-visual-card {
    min-height: 360px;
  }
  .grand-hall-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
  }
  .grand-hall-header-left {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }
  .grand-hall-header-right {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
  }
}

@media (max-width: 768px) {
  .grand-hall-section {
    padding: 2.75rem 0 !important;
  }
  .grand-hall-header {
    gap: 0.5rem;
    margin-bottom: 1.25rem;
  }
  .grand-hall-header-left {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .grand-hall-header-right {
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    min-height: 0;
    margin: 0;
    padding: 0;
  }
  .grand-hall-kicker {
    font-size: 0.72rem;
    margin-bottom: 0.25rem;
    letter-spacing: 0.1em;
  }
  .grand-hall-title {
    font-size: clamp(1.15rem, 5vw, 1.45rem);
    white-space: nowrap;
    line-height: 1.2;
    margin: 0;
  }
  .grand-hall-header-desc {
    font-size: 0.88rem;
    line-height: 1.48;
    color: var(--charcoal-600);
    margin: 0;
  }
  .grand-hall-grid {
    gap: 1.15rem;
  }
  .grand-hall-visual-card {
    min-height: 310px;
    border-radius: 16px;
  }
  .grand-hall-visual-card .showcase-card-content {
    padding: 1.5rem 1.25rem;
  }
  .showcase-kicker {
    font-size: 0.68rem;
    margin-bottom: 0.35rem;
  }
  .showcase-title {
    font-size: 1.22rem;
    line-height: 1.25;
    margin-bottom: 0.4rem;
  }
  .showcase-desc {
    font-size: 0.84rem;
    line-height: 1.45;
  }
  .grand-hall-sidebar-card {
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
  }
  .grand-hall-sidebar-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    padding-bottom: 0.65rem;
  }
  .grand-hall-highlights-list {
    gap: 0.75rem;
    margin-bottom: 1.25rem;
  }
  .grand-hall-highlight-box {
    padding: 0.85rem 1rem;
  }
  .highlight-box-kicker {
    font-size: 0.68rem;
    margin-bottom: 0.2rem;
  }
  .highlight-box-title {
    font-size: 1.15rem;
    margin-bottom: 0.2rem;
  }
  .highlight-box-desc {
    font-size: 0.8rem;
    line-height: 1.4;
  }
  .grand-hall-btn-reserve {
    padding: 0.85rem 1.25rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 480px) {
  .grand-hall-section {
    padding: 2.25rem 0 !important;
  }
  .grand-hall-title {
    font-size: clamp(1.08rem, 4.8vw, 1.32rem);
    white-space: nowrap;
  }
  .grand-hall-visual-card {
    min-height: 290px;
  }
  .grand-hall-visual-card .showcase-card-content {
    padding: 1.25rem 1rem;
  }
  .showcase-title {
    font-size: 1.15rem;
  }
  .grand-hall-sidebar-card {
    padding: 1.35rem 1.1rem;
  }
  .grand-hall-highlight-box {
    padding: 0.75rem 0.9rem;
  }
}

/* ==========================================================================
   Section 5: Room Accommodation Preview (Updated Reference Layout)
   ========================================================================== */
.room-tier-media {
  position: relative;
  height: 330px;
  overflow: hidden;
  background: var(--maroon-900);
}

.room-tier-media .room-tier-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  display: block;
}

.room-tier-media .room-tier-img.ac-room-img,
.ac-room-img {
  object-position: center top !important;
}

.room-tier-card:hover .room-tier-media .room-tier-img {
  transform: scale(1.05);
}

/* Theme Color Overlay for Deluxe & Standard Rooms */
.room-tier-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(56, 7, 13, 0.22) 0%,
    rgba(88, 17, 26, 0.35) 42%,
    rgba(40, 5, 10, 0.72) 78%,
    rgba(24, 3, 5, 0.92) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.room-tier-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(197, 160, 89, 0.25) 0%, transparent 65%);
  z-index: 2;
  pointer-events: none;
}

.room-tier-card:hover .room-tier-overlay {
  opacity: 0.85;
}

.room-badge-dark {
  position: absolute;
  top: 1.15rem;
  left: 1.15rem;
  background: rgba(36, 4, 8, 0.94);
  color: #F0CC82;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.38rem 0.8rem;
  border-radius: 6px;
  border: 1px solid rgba(223, 185, 108, 0.45);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.room-badge-light {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--maroon-900);
  font-family: var(--font-body);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.38rem 0.85rem;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  z-index: 3;
  border: 1px solid rgba(223, 185, 108, 0.25);
}

.room-tier-card {
  background: var(--white);
  border-radius: 18px;
  border: 1.5px solid rgba(197, 160, 89, 0.32);
  box-shadow: 0 10px 30px rgba(36, 4, 8, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.room-tier-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-400);
  box-shadow: 0 18px 44px rgba(56, 7, 13, 0.16);
}

.room-tier-content {
  padding: 2.25rem 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.rooms-section-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.room-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--maroon-900);
  margin: 0 0 0.35rem;
  line-height: 1.25;
}

.room-capacity-subtitle {
  font-family: var(--font-body);
  font-size: 0.86rem;
  color: #7A7265;
  margin: 0 0 0.95rem;
  font-weight: 500;
}

.room-description {
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--charcoal-600);
  margin: 0 0 1.5rem;
  flex-grow: 0;
}

.room-amenities-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.85rem;
  margin-bottom: 1.65rem;
  padding-top: 0.35rem;
}

.room-amenity-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.77rem;
  color: var(--charcoal-700);
  line-height: 1.35;
  letter-spacing: 0.005em;
}

.amenity-check {
  color: var(--gold-600);
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin-top: 0.12rem;
}

.room-card-btn-wrap {
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--sand-200);
}

.btn-room-enquire {
  width: 100%;
  border: 1.5px solid var(--sand-300);
  background: var(--white);
  color: var(--maroon-900);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  padding: 0.88rem 1.25rem;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
}

.btn-room-enquire:hover {
  background: var(--sand-100);
  border-color: var(--gold-500);
  color: var(--maroon-900);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(36, 4, 8, 0.08);
}

/* Master Centered Bottom Button */
.rooms-master-action {
  text-align: center;
  margin-top: 3rem;
}

.btn-rooms-view-all {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  background: linear-gradient(135deg, var(--maroon-800) 0%, var(--maroon-900) 100%);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 700;
  padding: 0.95rem 2.25rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(223, 185, 108, 0.4);
  box-shadow: 0 6px 20px rgba(36, 4, 8, 0.22);
  text-decoration: none;
  transition: all 0.3s ease;
  letter-spacing: 0.02em;
}

.btn-rooms-view-all:hover {
  background: linear-gradient(135deg, var(--maroon-700) 0%, var(--maroon-800) 100%);
  border-color: var(--gold-400);
  box-shadow: 0 10px 28px rgba(36, 4, 8, 0.32);
  transform: translateY(-2px);
  color: var(--white);
}

/* Responsiveness for Section 5 */
@media (max-width: 768px) {
  .room-tier-media {
    height: 240px;
  }
  .room-tier-content {
    padding: 1.65rem 1.35rem 1.65rem;
  }
  .rooms-section-title {
    font-size: clamp(1.08rem, 4.8vw, 1.45rem) !important;
    white-space: nowrap !important;
    line-height: 1.25;
  }
  .room-title {
    font-size: 1.35rem;
  }
  .room-amenities-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem 0.65rem;
  }
  .room-amenity-item {
    font-size: 0.74rem;
    gap: 0.4rem;
  }
  .rooms-master-action {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    width: 100%;
  }
  .btn-rooms-view-all {
    width: auto;
    max-width: max-content;
    padding: 0.85rem 1.85rem;
    font-size: 0.94rem;
  }
}

@media (max-width: 440px) {
  .rooms-section-title {
    font-size: clamp(0.95rem, 4.4vw, 1.18rem) !important;
    white-space: nowrap !important;
  }
  .room-amenities-grid {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }
}

/* ==========================================================================
   Section 7: Temple Proximity, Sacred Sites & Our Location
   ========================================================================== */
.proximity-section {
  background-color: var(--white);
  padding: 5.5rem 0 5rem;
  position: relative;
  border-top: 1px solid rgba(197, 160, 89, 0.2);
}

.proximity-header {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 2.5rem;
}

.proximity-kicker-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.25rem;
  border-radius: 50px;
  background: rgba(197, 160, 89, 0.12);
  border: 1px solid rgba(197, 160, 89, 0.35);
  color: var(--gold-600);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 1.15rem;
}

.proximity-kicker-badge svg {
  color: var(--gold-500);
  flex-shrink: 0;
}

.proximity-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.8vw, 2.9rem);
  font-weight: 700;
  color: var(--maroon-900);
  line-height: 1.22;
  margin: 0 auto 1.15rem;
  letter-spacing: -0.01em;
}

.proximity-lead {
  font-size: 1.02rem;
  color: #655E53;
  line-height: 1.68;
  margin: 0 auto;
  max-width: 780px;
}

/* Category Filter Bar */
.proximity-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 3.25rem;
}

.proximity-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1.2rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  background: #FFFFFF;
  border: 1.5px solid rgba(197, 160, 89, 0.4);
  color: var(--charcoal-700);
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.proximity-tab:hover {
  border-color: var(--gold-500);
  color: var(--maroon-900);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(88, 17, 26, 0.08);
}

.proximity-tab.active {
  background: var(--maroon-900);
  border-color: var(--maroon-900);
  color: #FFFFFF;
  box-shadow: 0 4px 14px rgba(36, 4, 8, 0.25);
}

.proximity-tab .tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--gold-400);
  display: inline-block;
}

.proximity-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(197, 160, 89, 0.2);
  font-size: 0.74rem;
  color: var(--gold-600);
  font-weight: 700;
}

.proximity-tab.active .tab-count {
  background: var(--gold-400);
  color: var(--maroon-900);
}

/* 4-Cards Grid */
.proximity-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}

.proximity-card {
  background: #FFFFFF;
  border-radius: 14px;
  border: 1px solid rgba(197, 160, 89, 0.32);
  box-shadow: 0 8px 24px rgba(36, 4, 8, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.proximity-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold-500);
  box-shadow: 0 16px 36px rgba(88, 17, 26, 0.14);
}

.proximity-card-media {
  position: relative;
  height: 195px;
  width: 100%;
  overflow: hidden;
  background: var(--maroon-900);
}

.proximity-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.proximity-card:hover .proximity-card-img {
  transform: scale(1.08);
}

.proximity-top-pill {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(20, 2, 4, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(223, 185, 108, 0.35);
  color: var(--gold-300);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.28rem 0.65rem;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.proximity-dist-pill {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background: rgba(20, 2, 4, 0.9);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(223, 185, 108, 0.45);
  color: #FFFFFF;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.28rem 0.75rem;
  border-radius: 50px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.proximity-dist-pill svg {
  color: var(--gold-400);
}

.proximity-card-body {
  padding: 1.35rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.proximity-card-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--maroon-900);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

.proximity-card-desc {
  font-size: 0.85rem;
  color: #6A6356;
  line-height: 1.55;
  min-height: 3.95rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 1rem;
}

.proximity-card-meta {
  border-top: 1px solid rgba(197, 160, 89, 0.22);
  padding-top: 0.85rem;
  margin-bottom: 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.proximity-meta-item {
  font-size: 0.78rem;
  color: #554D40;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.4;
}

.proximity-meta-item svg {
  color: var(--gold-600);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.proximity-directions-btn {
  width: 100%;
  padding: 0.72rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: #FAF7F2;
  border: 1.5px solid rgba(197, 160, 89, 0.38);
  color: var(--maroon-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: all 0.25s ease;
  margin-top: auto;
}

.proximity-directions-btn:hover {
  background: var(--maroon-900);
  border-color: var(--maroon-900);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(88, 17, 26, 0.22);
}

.proximity-view-all-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 2.25rem;
}

.proximity-view-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.85rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 50px;
  background: #FFFFFF;
  border: 1.5px solid var(--gold-500);
  color: var(--maroon-900);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 16px rgba(36, 4, 8, 0.08);
  font-family: inherit;
}

.proximity-view-toggle-btn:hover {
  background: var(--maroon-900);
  border-color: var(--maroon-900);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(88, 17, 26, 0.2);
}

.proximity-view-toggle-btn svg {
  color: var(--gold-600);
  transition: transform 0.3s ease;
}

.proximity-view-toggle-btn:hover svg {
  color: var(--gold-300);
}

/* ==========================================================================
   Section 8: Easily Accessible in Tiruvannamalai (Full-Width Map Showcase)
   ========================================================================== */
.map-fullwidth-showcase {
  background: var(--white);
  border: 2px solid var(--gold-400);
  border-radius: var(--radius-lg);
  box-shadow: 0 14px 40px rgba(36, 4, 8, 0.09);
  overflow: hidden;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.map-fullwidth-showcase:hover {
  box-shadow: 0 18px 48px rgba(36, 4, 8, 0.14);
}

.map-fullwidth-header {
  padding: 2.2rem 2.2rem 1.8rem;
  background: #FFFFFF;
  border-bottom: 1.5px solid rgba(197, 160, 89, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.15rem;
}

.map-fullwidth-header-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
}

.map-header-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.map-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
  display: inline-block;
  animation: pulseDot 2s infinite ease-in-out;
}

@keyframes pulseDot {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.map-status-text {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--gold-600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.map-fullwidth-title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  font-weight: 700;
  color: var(--maroon-900);
  margin: 0 auto 0.55rem;
  line-height: 1.22;
  text-align: center;
}

.map-title-name {
  display: block;
  font-family: var(--font-heading);
  letter-spacing: -0.01em;
}

.map-title-sub {
  display: block;
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.35vw, 1.12rem);
  font-weight: 600;
  color: var(--gold-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}

.map-fullwidth-address {
  font-size: 0.94rem;
  color: var(--charcoal-600);
  margin: 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  line-height: 1.45;
  text-align: center;
}

.map-fullwidth-address svg {
  color: var(--gold-600);
  flex-shrink: 0;
}

.map-fullwidth-header-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  width: 100%;
}

.map-quick-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 1rem;
  border-radius: 50px;
  background: var(--sand-50);
  border: 1px solid rgba(197, 160, 89, 0.38);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--maroon-900);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.map-quick-pill svg {
  color: var(--gold-600);
  flex-shrink: 0;
}

/* Map Frame */
.map-fullwidth-frame {
  width: 100%;
  height: 480px;
  background: var(--sand-100);
  position: relative;
}

.map-fullwidth-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Footer Action Bar */
.map-fullwidth-footer {
  padding: 1.75rem 2.2rem 1.85rem;
  background: #FFFDF9;
  border-top: 1.5px solid rgba(197, 160, 89, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.25rem;
}

.map-footer-hint {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  font-size: 0.9rem;
  color: var(--charcoal-600);
  max-width: 820px;
  line-height: 1.55;
  text-align: center;
  margin: 0 auto;
}

.map-footer-hint svg {
  color: var(--gold-600);
  flex-shrink: 0;
}

.map-footer-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.95rem;
  flex-wrap: wrap;
  width: 100%;
}

.map-btn-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.85rem 1.45rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--gold-400);
  color: var(--maroon-950);
  border: 1px solid var(--gold-500);
  box-shadow: 0 4px 14px rgba(197, 160, 89, 0.3);
  transition: all 0.25s ease;
}

.map-btn-nav:hover {
  background: var(--gold-500);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(197, 160, 89, 0.45);
}

.map-btn-directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.35rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: var(--maroon-900);
  color: #FFFFFF;
  border: 1px solid var(--maroon-900);
  box-shadow: 0 4px 14px rgba(56, 7, 13, 0.25);
  transition: all 0.25s ease;
}

.map-btn-directions:hover {
  background: var(--maroon-800);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(56, 7, 13, 0.35);
}

.map-btn-call {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: transparent;
  color: var(--maroon-900);
  border: 1.5px solid var(--maroon-900);
  transition: all 0.25s ease;
}

.map-btn-call:hover {
  background: var(--maroon-900);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(88, 17, 26, 0.18);
}

.btn-outline-maroon {
  background: transparent;
  border: 1.5px solid var(--maroon-800);
  color: var(--maroon-800);
  transition: all 0.25s ease;
}

.btn-outline-maroon:hover {
  background: var(--maroon-800);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(88, 17, 26, 0.2);
}

/* Responsiveness for Section 7 & 8 */
@media (max-width: 1024px) {
  .proximity-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
  .map-fullwidth-header {
    padding: 1.6rem 1.5rem;
  }
  .map-fullwidth-footer {
    padding: 1.5rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .map-fullwidth-frame {
    height: 400px;
  }
  .map-footer-buttons {
    flex-direction: column;
    width: 100%;
  }
  .map-footer-buttons a {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 640px) {
  .proximity-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .proximity-filter-bar {
    gap: 0.5rem;
  }
  .proximity-tab {
    padding: 0.45rem 0.95rem;
    font-size: 0.82rem;
  }
  .map-fullwidth-frame {
    height: 340px;
  }
  .map-quick-pill {
    font-size: 0.74rem;
    padding: 0.35rem 0.75rem;
  }
}

/* ==========================================================================
   Section 8: Final CTA Banner (Arunachala Mountain View Full Width)
   ========================================================================== */
.final-cta-fullwidth {
  width: 100%;
  position: relative;
  padding: 6.5rem 0;
  overflow: hidden;
  background: 
    linear-gradient(
      180deg,
      rgba(20, 2, 4, 0.65) 0%,
      rgba(42, 5, 10, 0.76) 45%,
      rgba(20, 2, 4, 0.92) 100%
    ),
    url('../images/arunachala-mountain-view.jpg') center 28% / cover no-repeat;
  border-top: 3px solid var(--gold-500);
  border-bottom: 3px solid var(--gold-500);
  box-shadow: inset 0 12px 35px rgba(0, 0, 0, 0.5), inset 0 -12px 35px rgba(0, 0, 0, 0.5);
}

.final-cta-inner {
  position: relative;
  z-index: 2;
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Fallback / shared container for other pages using .cta-banner */
.cta-banner {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  padding: 5rem 2.5rem;
  text-align: center;
  background: 
    linear-gradient(
      180deg,
      rgba(24, 2, 5, 0.65) 0%,
      rgba(42, 5, 10, 0.78) 45%,
      rgba(24, 2, 5, 0.92) 100%
    ),
    url('../images/arunachala-mountain-view.jpg') center 28% / cover no-repeat;
  border: 2px solid var(--gold-400);
  box-shadow: 0 20px 50px rgba(24, 2, 5, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Subtle luxury gold corner accents */
.cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(223, 185, 108, 0.3);
  margin: 12px;
  border-radius: calc(var(--radius-xl) - 10px);
  pointer-events: none;
}

.cta-banner .sub-tag,
.cta-scenic-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(20, 2, 4, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--gold-400);
  color: #FFD479 !important;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 1.25rem;
  border-radius: 50px;
  margin-bottom: 1.35rem;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), 0 0 12px rgba(197, 160, 89, 0.25);
}

.cta-scenic-pill svg {
  color: #FFD479 !important;
  stroke: #FFD479 !important;
  flex-shrink: 0;
}

.final-cta-fullwidth .cta-title,
.cta-banner h2,
.cta-title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: #FFFFFF !important;
  line-height: 1.25;
  margin: 0 auto 1.25rem;
  max-width: 840px;
  text-align: center;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8);
}

.final-cta-fullwidth .cta-desc,
.cta-banner p,
.cta-desc {
  font-size: clamp(1rem, 2vw, 1.16rem);
  color: #F8F5EE !important;
  max-width: 720px;
  margin: 0 auto 2.25rem;
  line-height: 1.65;
  text-align: center;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.85);
}

/* Centered High-Contrast Quick Highlights */
.cta-highlights-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  flex-wrap: wrap;
  margin: 0 auto 2.5rem;
  max-width: 900px;
}

.cta-highlight-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(20, 2, 4, 0.94);
  border: 1.5px solid var(--gold-400);
  border-radius: 50px;
  padding: 0.6rem 1.25rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 10px rgba(197, 160, 89, 0.25);
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}

.cta-highlight-item span {
  color: #FFFFFF !important;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95);
  white-space: nowrap;
}

.cta-highlight-item svg {
  color: #FFD479 !important;
  stroke: #FFD479 !important;
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
}

.cta-highlight-item:hover {
  transform: translateY(-2px);
  border-color: #FFF2D6;
  background: rgba(42, 5, 10, 0.98);
}

.cta-banner-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.15rem;
  flex-wrap: wrap;
  width: 100%;
}

.btn-cta-action {
  padding: 0.95rem 1.95rem;
  font-size: 0.98rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.btn-cta-action:hover {
  transform: translateY(-2px);
}

/* Responsiveness for Section 8 */
@media (max-width: 768px) {
  .final-cta-fullwidth {
    padding: 4.5rem 0;
  }
  .cta-banner {
    padding: 3.5rem 1.5rem;
    border-radius: var(--radius-lg);
  }
  .cta-highlights-row {
    gap: 0.65rem;
    margin-bottom: 2rem;
  }
  .cta-highlight-item {
    font-size: 0.82rem;
    padding: 0.45rem 0.95rem;
  }
  .cta-highlight-item span {
    font-size: 0.82rem;
    white-space: normal;
  }
  .cta-banner-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.85rem;
  }
  .btn-cta-action {
    width: 100%;
    max-width: 340px;
  }
}

@media (max-width: 440px) {
  .final-cta-fullwidth {
    padding: 3.5rem 0;
  }
  .cta-banner {
    padding: 3rem 1.2rem;
  }
  .cta-scenic-pill {
    font-size: 0.72rem;
    padding: 0.35rem 0.85rem;
  }
  .cta-highlight-item {
    width: 100%;
    justify-content: center;
  }
  .btn-cta-action {
    max-width: 100%;
    padding: 0.85rem 1.25rem;
    font-size: 0.92rem;
  }
}

@media (max-width: 380px) {
  .btn-location-action {
    font-size: 0.82rem;
    padding: 0.75rem 1rem;
    gap: 0.45rem;
  }
  .btn-location-action svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
  }
}

/* ==========================================================================
   Unified Luxury Hero Section (Home, Wedding Hall, A/C Rooms & Contact Us)
   ========================================================================== */
.home-hero,
.wedding-hero,
.rooms-hero,
.contact-hero {
  position: relative;
  padding: 4.6rem 0 3.8rem;
  background-color: #170204;
  background-size: cover;
  background-position: center;
  color: var(--white);
  text-align: center;
  overflow: hidden;
}

.home-hero {
  background-image: url('../images/tiruvannamalai-mountain-avalurpet-road.jpg');
  background-position: center 28%;
}

.contact-hero {
  background-image: url('../images/arunai-mahal-building-front.jpg');
  background-position: center;
}

.wedding-hero {
  background-image: url('../images/arunai-mahal-wedding-hall-interior.jpg');
  background-position: center 30%;
}

.rooms-hero {
  background-image: url('../images/arunai-mahal-deluxe-room-interior.jpg');
  background-position: center 40%;
}

.home-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 32%,
    rgba(88, 17, 26, 0.70) 0%,
    rgba(56, 7, 13, 0.86) 50%,
    rgba(20, 2, 4, 0.95) 100%
  );
  z-index: 1;
}

.wedding-hero::before,
.rooms-hero::before,
.contact-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 38%,
    rgba(88, 17, 26, 0.88) 0%,
    rgba(56, 7, 13, 0.94) 50%,
    rgba(20, 2, 4, 0.98) 100%
  );
  z-index: 1;
}

.home-hero::after,
.wedding-hero::after,
.rooms-hero::after,
.contact-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center top, rgba(197, 160, 89, 0.22) 0%, transparent 68%);
  z-index: 1;
  pointer-events: none;
}

.home-hero .container,
.wedding-hero .container,
.rooms-hero .container,
.contact-hero .container {
  position: relative;
  z-index: 2;
  max-width: 1200px;
}

.wedding-hero-kicker-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.45rem 1.4rem;
  border-radius: 50px;
  border: 1px solid rgba(223, 185, 108, 0.45);
  background: rgba(22, 3, 5, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--gold-300);
  font-size: clamp(0.68rem, 1.1vw, 0.78rem);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  margin-bottom: 1.35rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.hero-pulse-dot,
.wedding-hero-kicker-pill .gold-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85);
  animation: heroPulseDotGreen 1.8s infinite ease-in-out;
  flex-shrink: 0;
  margin-right: 0.25rem;
}

@keyframes heroPulseDotGreen {
  0% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.85);
  }
  65% {
    transform: scale(1.15);
    box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.92);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

.wedding-hero-title {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.8vw, 3.7rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.18;
  margin-bottom: 1.15rem;
  text-align: center;
  text-shadow: 0 3px 16px rgba(0, 0, 0, 0.6);
}

.wedding-hero-lead {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.9);
  max-width: 780px;
  margin: 0 auto 2.25rem;
  font-weight: 400;
}

.wedding-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.85rem;
}

.btn-hero-white {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #FFFFFF !important;
  color: #1a0306 !important;
  border: 1px solid #FFFFFF !important;
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28);
}

.btn-hero-white *,
.btn-hero-white span,
.btn-hero-white svg {
  color: #1a0306 !important;
}

.btn-hero-white:hover {
  background-color: #F4EFEA !important;
  color: #140204 !important;
  border-color: #DFB96C !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.btn-hero-white:hover *,
.btn-hero-white:hover span,
.btn-hero-white:hover svg {
  color: #140204 !important;
}

.btn-hero-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #DFB96C 0%, #C5A059 100%);
  color: #140204;
  border: 1px solid rgba(255, 246, 224, 0.55);
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(197, 160, 89, 0.35);
}

.btn-hero-gold:hover {
  background: linear-gradient(135deg, #F0D597 0%, #DFB96C 100%);
  color: #140204;
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(197, 160, 89, 0.5);
}

.btn-hero-maroon {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(56, 7, 13, 0.7);
  color: #FFFFFF;
  border: 1px solid rgba(223, 185, 108, 0.45);
  padding: 0.85rem 1.75rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.btn-hero-maroon:hover {
  background: rgba(88, 17, 26, 0.92);
  border-color: var(--gold-300);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.wedding-hero-divider {
  width: 100%;
  max-width: 960px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(223, 185, 108, 0.32), transparent);
  margin: 3.25rem auto 2.5rem;
}

.wedding-hero-stats-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
  max-width: 1140px;
  margin: 0 auto;
}

.hero-stat-card {
  background: rgba(22, 3, 5, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(223, 185, 108, 0.28);
  border-radius: 12px;
  padding: 1.35rem 0.85rem 1.15rem;
  text-align: center;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.hero-stat-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-400);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.hero-stat-number {
  display: block;
  font-family: var(--font-heading);
  font-size: clamp(1.28rem, 1.8vw, 1.58rem);
  font-weight: 700;
  color: #FFFFFF;
  line-height: 1.15;
  margin-bottom: 0.35rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.hero-stat-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-300);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Section 1: Non-Repetitive Ceremonial & Cultural Features */
.ceremonial-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.15rem;
  margin-top: 1.75rem;
  margin-bottom: 2rem;
}

.ceremonial-feature-item {
  background: #FFFFFF;
  border: 1.5px solid rgba(197, 160, 89, 0.32);
  border-radius: 12px;
  padding: 1.15rem 1.15rem 1rem;
  box-shadow: 0 4px 14px rgba(36, 4, 8, 0.04);
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ceremonial-feature-item:hover {
  transform: translateY(-3px);
  border-color: var(--gold-500);
  box-shadow: 0 8px 24px rgba(88, 17, 26, 0.1);
}

.ceremonial-feature-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.18), rgba(88, 17, 26, 0.08));
  border: 1px solid rgba(197, 160, 89, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon-900);
  margin-bottom: 0.75rem;
}

.ceremonial-feature-title {
  font-family: var(--font-heading);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--maroon-900);
  margin-bottom: 0.35rem;
  line-height: 1.25;
}

.ceremonial-feature-desc {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--charcoal-600);
  margin: 0;
}

@media (max-width: 992px) {
  .wedding-hero-stats-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }
}

@media (max-width: 640px) {
  .home-hero,
  .wedding-hero,
  .rooms-hero,
  .contact-hero {
    padding: 3.25rem 0 2.5rem;
  }
  .wedding-hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .hero-stat-card:last-child {
    grid-column: span 2;
  }
  .wedding-hero-kicker-pill {
    font-size: 0.65rem;
    padding: 0.35rem 0.85rem;
    gap: 0.45rem;
  }
  .wedding-hero-actions {
    flex-direction: column;
    width: 100%;
  }
  .btn-hero-white,
  .btn-hero-gold,
  .btn-hero-glass,
  .btn-hero-maroon {
    width: 100%;
    justify-content: center;
  }
  .ceremonial-features-grid {
    grid-template-columns: 1fr;
  }
}

/* Gallery Showcase with theme overlay */
.wedding-gallery-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(36, 4, 8, 0.08);
  border: 1.5px solid rgba(197, 160, 89, 0.32);
  background: var(--maroon-900);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.4s ease;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.wedding-gallery-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-400);
  box-shadow: 0 18px 48px rgba(88, 17, 26, 0.22);
}

.wedding-gallery-card .gallery-bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.wedding-gallery-card:hover .gallery-bg-img {
  transform: scale(1.06);
}

.wedding-gallery-card .gallery-theme-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(56, 7, 13, 0.20) 0%,
    rgba(88, 17, 26, 0.38) 42%,
    rgba(40, 5, 10, 0.78) 75%,
    rgba(24, 3, 5, 0.95) 100%
  );
  z-index: 2;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.wedding-gallery-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(197, 160, 89, 0.22) 0%, transparent 65%);
  z-index: 2;
  pointer-events: none;
}

.wedding-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 992px) {
  .wedding-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.35rem;
  }
}

@media (max-width: 640px) {
  .wedding-gallery-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.wedding-gallery-card .gallery-card-content,
.wedding-gallery-card .wedding-gallery-card-content {
  position: relative;
  z-index: 3;
  padding: 1.75rem 1.5rem 1.5rem;
  color: #FFFFFF;
}

.gallery-card-pill {
  display: inline-block;
  background: rgba(20, 2, 4, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(223, 185, 108, 0.4);
  color: var(--gold-300);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  margin-bottom: 0.6rem;
}

.wedding-gallery-card h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.45rem;
  line-height: 1.25;
}

.wedding-gallery-card p {
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
}

/* Luxury Specs Feature Cards Grid */
.luxury-specs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.luxury-spec-card {
  background: #FFFFFF;
  border-radius: 16px;
  border: 1.5px solid rgba(197, 160, 89, 0.32);
  padding: 2rem 1.6rem;
  box-shadow: 0 8px 24px rgba(36, 4, 8, 0.05);
  display: flex;
  flex-direction: column;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.luxury-spec-card:hover {
  transform: translateY(-5px);
  border-color: var(--gold-500);
  box-shadow: 0 16px 38px rgba(88, 17, 26, 0.12);
}

.luxury-spec-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, var(--maroon-800), var(--gold-400));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.luxury-spec-card:hover::before {
  opacity: 1;
}

.luxury-spec-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(197, 160, 89, 0.18), rgba(88, 17, 26, 0.08));
  border: 1px solid rgba(197, 160, 89, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--maroon-900);
  margin-bottom: 1.25rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.luxury-spec-card:hover .luxury-spec-icon-wrap {
  background: var(--maroon-900);
  color: var(--gold-300);
  border-color: var(--gold-400);
}

.luxury-spec-card h4 {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--maroon-900);
  margin: 0 0 0.35rem;
}

.luxury-spec-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--gold-600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.65rem;
}

.luxury-spec-card p {
  font-size: 0.9rem;
  line-height: 1.58;
  color: var(--charcoal-600);
  margin: 0;
}

/* Muhurtham Banner */
.wedding-muhurtham-banner {
  background: linear-gradient(150deg, #2A060C 0%, #170204 100%);
  border: 2px solid rgba(223, 185, 108, 0.45);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: 0 16px 48px rgba(36, 4, 8, 0.22);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: #FFFFFF;
}

.wedding-muhurtham-left {
  max-width: 620px;
}

.wedding-muhurtham-left h3 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0 0 0.65rem;
}

.wedding-muhurtham-left p {
  font-size: 0.96rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0;
}

.wedding-muhurtham-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex-shrink: 0;
}

@media (max-width: 992px) {
  .luxury-specs-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wedding-muhurtham-banner {
    flex-direction: column;
    text-align: center;
  }
  .wedding-muhurtham-actions {
    width: 100%;
    flex-direction: row;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .luxury-specs-grid {
    grid-template-columns: 1fr;
  }
  .wedding-stats-grid {
    grid-template-columns: 1fr;
  }
  .wedding-muhurtham-actions {
    flex-direction: column;
  }
  .wedding-muhurtham-actions a,
  .wedding-muhurtham-actions button {
    width: 100%;
  }
}

/* ==========================================================================
   Campus Highlights Gallery (Contact & Infrastructure Showcase)
   ========================================================================== */
.campus-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.campus-card {
  background: #FFFFFF;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(197, 160, 89, 0.28);
  box-shadow: 0 4px 18px rgba(36, 4, 8, 0.06);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  display: flex;
  flex-direction: column;
}

.campus-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(36, 4, 8, 0.12);
  border-color: var(--gold-400);
}

.campus-card-img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: var(--maroon-950);
}

.campus-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.campus-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: rgba(28, 4, 8, 0.78);
  border: 1px solid rgba(223, 185, 108, 0.6);
  color: #F8D37C;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.campus-card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.campus-card-body h4 {
  font-family: var(--font-heading);
  font-size: 1.18rem;
  color: var(--maroon-900);
  margin-bottom: 0.55rem;
  font-weight: 700;
}

.campus-card-body p {
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--charcoal-600);
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .campus-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .campus-highlights-grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .campus-card-img-wrap {
    height: 210px;
  }
}

/* ==========================================================================
   Contact Quick 4-Channel Grid (Direct Phone, WhatsApp, Business Address, Inspection Hours)
   ========================================================================== */
.contact-quick-deck-section {
  padding: 3.25rem 0 1.5rem;
  background-color: var(--sand-50, #FCF9F5);
  position: relative;
}

.contact-quick-deck-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
}

.contact-channel-card {
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  padding: 1.75rem 1.4rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.contact-channel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(56, 7, 18, 0.08);
  border-color: rgba(197, 160, 89, 0.45);
}

.contact-channel-top {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.25rem;
}

.contact-channel-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
}

.contact-channel-icon-wrap.icon-gold {
  background: #FAF3E6;
  color: #A98030;
}

.contact-channel-icon-wrap.icon-green {
  background: #E8FBEE;
  color: #25D366;
}

.contact-channel-icon-wrap.icon-bronze {
  background: #F8F1E7;
  color: #8C6239;
}

.contact-channel-kicker {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--charcoal-500, #78716C);
}

.contact-channel-kicker.kicker-green {
  color: #16A34A;
}

.contact-channel-title {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--maroon-900, #38070D);
  margin: 0;
  line-height: 1.3;
}

.contact-channel-body {
  font-size: 0.88rem;
  color: var(--charcoal-600, #57534E);
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.contact-channel-body .channel-phone-main {
  display: block;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--maroon-900, #38070D);
  margin-bottom: 0.2rem;
}

.contact-channel-body .channel-sub {
  font-size: 0.82rem;
  color: var(--charcoal-400, #A8A29E);
  margin-top: 0.35rem;
}

.contact-channel-actions {
  margin-top: auto;
}

.btn-channel {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-decoration: none;
  transition: all 0.25s ease;
  border: none;
  cursor: pointer;
}

.btn-channel-maroon {
  background: #380712;
  color: #FFFFFF !important;
}

.btn-channel-maroon:hover {
  background: #500B1B;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(56, 7, 18, 0.35);
}

.btn-channel-green {
  background: #25D366;
  color: #FFFFFF !important;
}

.btn-channel-green:hover {
  background: #20BA5A;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(37, 211, 102, 0.35);
}

.btn-channel-bronze {
  background: #8C6239;
  color: #FFFFFF !important;
}

.btn-channel-bronze:hover {
  background: #734F2C;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(140, 98, 57, 0.35);
}

.contact-channel-btn-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.btn-channel-ghost {
  background: #F9FAFB;
  border: 1px solid #E5E7EB;
  color: #374151 !important;
  padding: 0.75rem 0.65rem;
  font-size: 0.84rem;
}

.btn-channel-ghost:hover {
  background: #F3F4F6;
  border-color: #D1D5DB;
  color: #111827 !important;
}

.btn-channel-directions {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
  color: #1D4ED8 !important;
  padding: 0.75rem 0.65rem;
  font-size: 0.84rem;
}

.btn-channel-directions:hover {
  background: #DBEAFE;
  color: #1E40AF !important;
}

@media (max-width: 1024px) {
  .contact-quick-deck-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .contact-quick-deck-grid {
    grid-template-columns: 1fr;
  }
}

/* Reservation Advisory Feature Cards (Direct Owner, Muhurtham Advisory, Zero Commissions) */
.reservation-advisory-deck {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  margin-top: 1.5rem;
}

.reservation-advisory-card {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
  background: var(--sand-50, #FCF9F5);
  border: 1px solid var(--sand-300, #DED5C5);
  border-left: 4px solid var(--gold-500, #C5A059);
  border-radius: 12px;
  padding: 1.35rem 1.4rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.reservation-advisory-card:hover {
  transform: translateX(4px);
  border-left-color: var(--maroon-800, #58111A);
  box-shadow: 0 6px 20px rgba(56, 7, 18, 0.07);
}

.reservation-advisory-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--sand-100, #F7F3EC);
  color: var(--maroon-900, #38070D);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.reservation-advisory-card h4 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--maroon-900, #38070D);
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.reservation-advisory-card p {
  font-size: 0.9rem;
  color: var(--charcoal-600, #57534E);
  line-height: 1.55;
  margin: 0;
}

/* ==========================================================================
   Room Category Badges & Footer Enhancements
   ========================================================================== */
.room-pill-premium {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, #DFB96C 0%, #C5A059 100%);
  color: #170204;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.42rem 0.95rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22), 0 0 16px rgba(223, 185, 108, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.45);
  z-index: 3;
}

.room-pill-value {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.96);
  color: var(--maroon-900);
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.42rem 0.95rem;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  border: 1.5px solid rgba(197, 160, 89, 0.4);
  z-index: 3;
}

.room-card-footer {
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--sand-200);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* ==========================================================================
   Responsive Refinements for Mobile Screens (Phones <= 640px & <= 480px)
   ========================================================================== */
@media (max-width: 640px) {
  .container {
    padding: 0 1.15rem;
  }
  .service-card-body {
    padding: 1.5rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .room-card-footer {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    gap: 0.85rem;
  }
  .room-card-footer .btn {
    width: 100%;
    justify-content: center;
  }
  .room-pill-premium,
  .room-pill-value {
    top: 0.85rem;
    right: 0.85rem;
    font-size: 0.72rem;
    padding: 0.35rem 0.8rem;
  }
}


.reach-address-link {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  display: inline-block;
  transition: color 0.25s ease;
}

.reach-address-link:hover {
  color: var(--gold-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}