* { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; padding: 0; }
    .app-root { height: 100%; overflow-x: hidden; }

    html { scroll-behavior: smooth; }

    /* ===== Premium Animations ===== */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(40px); }
      to { opacity: 1; transform: translateY(0); }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
    @keyframes slideInLeft {
      from { opacity: 0; transform: translateX(-60px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes slideInRight {
      from { opacity: 0; transform: translateX(60px); }
      to { opacity: 1; transform: translateX(0); }
    }
    @keyframes scaleIn {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes popIn {
      from { opacity: 0; transform: scale(0.85); }
      to { opacity: 1; transform: scale(1); }
    }
    @keyframes shimmer {
      0% { background-position: -200% center; }
      100% { background-position: 200% center; }
    }
    @keyframes float {
      0%, 100% { transform: translateY(0px); }
      50% { transform: translateY(-20px); }
    }
    @keyframes bounceIn {
      0% { opacity: 0; transform: scale(0.3); }
      50% { opacity: 1; transform: scale(1.05); }
      70% { transform: scale(0.9); }
      100% { transform: scale(1); }
    }
    @keyframes glow {
      0%, 100% { box-shadow: 0 0 10px rgba(232,161,61,0.2); }
      50% { box-shadow: 0 0 30px rgba(232,161,61,0.5); }
    }
    @keyframes slideDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .anim-fade-up { animation: fadeUp 0.8s ease forwards; opacity: 0; }
    .anim-fade-in { animation: fadeIn 1s ease forwards; opacity: 0; }
    .anim-slide-left { animation: slideInLeft 0.8s ease forwards; opacity: 0; }
    .anim-slide-right { animation: slideInRight 0.8s ease forwards; opacity: 0; }
    .anim-scale-in { animation: scaleIn 0.6s ease forwards; opacity: 0; }
    .anim-bounce { animation: bounceIn 0.7s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; opacity: 0; }

    .delay-1 { animation-delay: 0.1s; }
    .delay-2 { animation-delay: 0.2s; }
    .delay-3 { animation-delay: 0.3s; }
    .delay-4 { animation-delay: 0.4s; }
    .delay-5 { animation-delay: 0.5s; }
    .delay-6 { animation-delay: 0.6s; }

    /* Premium shimmer text */
    .gold-shimmer {
      background: linear-gradient(90deg, #e8a13d, #ffc966, #e8a13d);
      background-size: 200% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      animation: shimmer 4s linear infinite;
    }

    /* Hover effects */
    .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
    .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(232,161,61,0.25); }

    .hover-scale { transition: transform 0.3s ease; }
    .hover-scale:hover { transform: scale(1.05); }

    .nav-link {
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-link::after {
      content: '';
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0;
      height: 2px;
      background: linear-gradient(90deg, #e8a13d, #ffc966);
      transition: width 0.4s ease;
    }
    .nav-link:hover::after { width: 100%; }

    /* Scroll animations */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.8s ease, transform 0.8s ease;
    }
    .reveal.active {
      opacity: 1;
      transform: translateY(0);
    }

    /* Card hover */
    .card-hover {
      transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);
      position: relative;
      overflow: hidden;
    }
    .card-hover::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(232,161,61,0.25), transparent);
      transition: left 0.6s ease;
    }
    .card-hover:hover::before { left: 100%; }
    .card-hover:hover {
      transform: translateY(-12px);
      box-shadow: 0 20px 60px rgba(232,161,61,0.3);
    }

    /* Gradient backgrounds */
    .gradient-dark { background: linear-gradient(135deg, #0f0d0a 0%, #1a1410 100%); }
    .gradient-warm { background: linear-gradient(135deg, #1a1410 0%, #2a2217 100%); }
    .gradient-accent { background: linear-gradient(135deg, #2d2419 0%, #3d3428 100%); }

    /* Paisley pattern */
    .paisley {
      background-image:
        radial-gradient(ellipse 20px 30px at 10% 20%, rgba(196,149,107,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 25px 35px at 85% 15%, rgba(212,175,55,0.06) 0%, transparent 70%);
    }

    /* Decorative divider */
    .divider {
      display: flex;
      align-items: center;
      gap: 16px;
      margin: 40px 0;
    }
    .divider::before, .divider::after {
      content: '';
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, #d4af37, transparent);
    }

    /* Premium Badge */
    .badge {
      display: inline-block;
      background: linear-gradient(135deg, rgba(232,161,61,0.15), rgba(245,184,90,0.15));
      border: 1px solid rgba(232,161,61,0.4);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: #e8a13d;
      backdrop-filter: blur(10px);
    }

    .badge-premium {
      background: linear-gradient(135deg, rgba(212,175,55,0.2), rgba(232,161,61,0.2));
      border: 1px solid rgba(212,175,55,0.5);
      color: #ffc966;
      animation: glow 3s ease-in-out infinite;
    }

    /* Button styles */
    .btn-primary {
      background: linear-gradient(135deg, #e8a13d, #f5b85a);
      color: #0f0d0a;
      padding: 14px 32px;
      border-radius: 4px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 13px;
      display: inline-block;
    }
    .btn-primary:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 36px rgba(232,161,61,0.4);
    }
    .btn-primary:active {
      transform: translateY(-1px);
    }

    .btn-secondary {
      background: transparent;
      color: #e8a13d;
      padding: 14px 32px;
      border: 2px solid #e8a13d;
      border-radius: 4px;
      font-weight: 700;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 13px;
      display: inline-block;
    }
    .btn-secondary:hover {
      background: rgba(232,161,61,0.12);
      transform: translateY(-3px);
    }

    .btn-tertiary {
      background: rgba(232,161,61,0.1);
      color: #ffc966;
      padding: 12px 24px;
      border: 1px solid rgba(232,161,61,0.3);
      border-radius: 4px;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      cursor: pointer;
      transition: all 0.3s ease;
      font-size: 12px;
      display: inline-block;
    }
    .btn-tertiary:hover {
      background: rgba(232,161,61,0.2);
      border-color: rgba(232,161,61,0.5);
    }

    /* Responsive utilities */
    @media (max-width: 768px) {
      .hide-mobile { display: none; }
      .show-mobile { display: block; }
    }

    @media (min-width: 769px) {
      .show-mobile { display: none; }
    }

    /* Modal backdrop */
    .modal-backdrop {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(8px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 100;
      animation: fadeIn 0.4s ease;
      overflow-y: auto;
    }
    .modal-backdrop.hidden { display: none; }

    .modal-content {
      background: linear-gradient(135deg, #2d2419 0%, #3d3428 100%);
      border: 1px solid rgba(232,161,61,0.2);
      border-radius: 8px;
      max-width: 600px;
      width: 90%;
      padding: 40px;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
      animation: popIn 0.5s ease;
      margin: 20px;
    }

    /* Sticky header */
    .sticky-header {
      position: sticky;
      top: 0;
      z-index: 40;
      transition: all 0.3s ease;
      animation: slideDown 0.6s ease;
    }

    /* Counter animation */
    .counter {
      font-size: 32px;
      font-weight: 700;
      color: #e8a13d;
      font-family: 'Playfair Display', serif;
    }

    /* Toast notification */
    .toast {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: linear-gradient(135deg, #e8a13d, #f5b85a);
      color: #0f0d0a;
      padding: 16px 24px;
      border-radius: 4px;
      font-weight: 600;
      font-size: 14px;
      z-index: 200;
      animation: slideUp 0.4s ease;
      box-shadow: 0 8px 24px rgba(232,161,61,0.3);
    }

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

    /* Testimonial star */
    .star { color: #ffc966; }

    /* Number list */
    .num-list { counter-reset: item; list-style-type: none; padding: 0; }
    .num-list li { counter-increment: item; margin-bottom: 16px; padding-left: 40px; position: relative; }
    .num-list li::before { content: counter(item); position: absolute; left: 0; top: 0; background: linear-gradient(135deg, #e8a13d, #f5b85a); color: #0f0d0a; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }

    /* Loading spinner */
    .spinner {
      width: 20px;
      height: 20px;
      border: 2px solid rgba(232,161,61,0.2);
      border-top-color: #e8a13d;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }


    .card-hover.reserve-btn{
        letter-spacing: 10px;
    }

   

   /* contact us form css */

    #awadh-contact-form {
      --bg-dark: #1a0f08;
      --bg-dark-2: #24160d;
      --border-gold: rgba(204, 142, 37, 0.35);
      --gold: #e9ae49;
      --gold-hover: #d79a34;
      --cream: #f3e3c8;
      --soft-text: #d7c2a3;
      --input-bg: rgba(255, 255, 255, 0.03);
      --error: #ff8f8f;
      --success-bg: rgba(233, 174, 73, 0.12);
      --success-border: rgba(233, 174, 73, 0.45);

      width: 100%;
      max-width: 760px;
      margin: 0 auto;
      padding: 34px;
      border-radius: 18px;
      border: 1px solid var(--border-gold);
      background: linear-gradient(90deg, var(--bg-dark) 0%, var(--bg-dark-2) 50%, var(--bg-dark) 100%);
      box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
      color: var(--cream);
      font-family: Arial, Helvetica, sans-serif;
    }

    #awadh-contact-form,
    #awadh-contact-form * {
      box-sizing: border-box;
    }

    #awadh-contact-form .acf-header {
      text-align: center;
      margin-bottom: 26px;
    }

    #awadh-contact-form .acf-header h2 {
      margin: 0 0 10px;
      font-size: 40px;
      line-height: 1.1;
      color: var(--cream);
      font-family: Georgia, "Times New Roman", serif;
      font-weight: 700;
    }

    #awadh-contact-form .acf-header p {
      margin: 0;
      color: var(--soft-text);
      font-size: 15px;
    }

    #awadh-contact-form .acf-success-message {
      display: none;
      background: var(--success-bg);
      color: var(--cream);
      border: 1px solid var(--success-border);
      padding: 12px 14px;
      border-radius: 12px;
      margin-bottom: 18px;
      font-size: 14px;
    }

    #awadh-contact-form .acf-group {
      display: block;
      width: 100%;
      margin-bottom: 18px;
      clear: both;
    }

    #awadh-contact-form label {
      display: block;
      width: 100%;
      margin: 0 0 8px;
      color: var(--cream);
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.3px;
      float: none;
      text-align: left;
    }

    #awadh-contact-form input,
    #awadh-contact-form textarea,
    #awadh-contact-form button {
      font-family: Arial, Helvetica, sans-serif;
    }

    #awadh-contact-form input[type="text"],
    #awadh-contact-form input[type="email"],
    #awadh-contact-form textarea {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      margin: 0;
      padding: 14px 15px;
      border: 1px solid rgba(233, 174, 73, 0.22);
      border-radius: 12px;
      font-size: 15px;
      line-height: 1.5;
      color: var(--cream);
      background: var(--input-bg);
      outline: none;
      box-shadow: none;
      appearance: none;
      -webkit-appearance: none;
      float: none;
    }

    #awadh-contact-form input::placeholder,
    #awadh-contact-form textarea::placeholder {
      color: rgba(215, 194, 163, 0.72);
    }

    #awadh-contact-form input:focus,
    #awadh-contact-form textarea:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 4px rgba(233, 174, 73, 0.12);
      background: rgba(255, 255, 255, 0.05);
    }

    #awadh-contact-form textarea {
      min-height: 140px;
      resize: vertical;
    }

    #awadh-contact-form .acf-error {
      color: var(--error);
      font-size: 13px;
      margin-top: 6px;
    }

    #awadh-contact-form .acf-submit {
      display: inline-block;
      width: 100%;
      margin-top: 8px;
      padding: 14px 18px;
      border: none;
      border-radius: 12px;
      background: var(--gold);
      color: #16110c;
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 1px;
      text-transform: uppercase;
      cursor: pointer;
      transition: background 0.3s ease, transform 0.2s ease;
    }

    #awadh-contact-form .acf-submit:hover {
      background: var(--gold-hover);
      transform: translateY(-1px);
    }

    @media (max-width: 640px) {
      #awadh-contact-form {
        padding: 22px;
      }

      #awadh-contact-form .acf-header h2 {
        font-size: 30px;
      }
    }


/* ===== Royal Palace Experience Upgrade ===== */
:root {
  --royal-base: #120d09;
  --royal-base-2: #1d140d;
  --royal-gold: #e8a13d;
  --royal-gold-soft: #ffc966;
  --royal-cream: #f5ebe0;
}

@keyframes royalParticles {
  0% { transform: translate3d(0,0,0) scale(1); opacity: .28; }
  50% { transform: translate3d(-12px,-22px,0) scale(1.06); opacity: .45; }
  100% { transform: translate3d(8px,-44px,0) scale(.96); opacity: .2; }
}
@keyframes royalGlowSweep {
  0% { transform: translateX(-10%) translateY(0); }
  50% { transform: translateX(10%) translateY(-1.5%); }
  100% { transform: translateX(-10%) translateY(0); }
}
@keyframes palaceFloat {
  0%,100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

body {
  background:
    linear-gradient(180deg, rgba(8,7,6,0.82), rgba(8,7,6,0.82)),
    radial-gradient(circle at top, rgba(232,161,61,0.12), transparent 32%),
    linear-gradient(180deg, var(--royal-base) 0%, #1a120d 35%, #100b08 100%);
  color: var(--royal-cream);
  position: relative;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(255,211,125,0.22) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 72%, rgba(232,161,61,0.18) 0 1.4px, transparent 2.4px),
    radial-gradient(circle at 38% 28%, rgba(255,211,125,0.16) 0 1.2px, transparent 2.1px),
    radial-gradient(circle at 52% 58%, rgba(255,211,125,0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 22%, rgba(232,161,61,0.18) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 77% 74%, rgba(255,211,125,0.2) 0 1px, transparent 2px),
    radial-gradient(circle at 89% 24%, rgba(255,211,125,0.16) 0 1.3px, transparent 2.3px),
    radial-gradient(circle at 92% 62%, rgba(232,161,61,0.18) 0 1.2px, transparent 2.2px),
    radial-gradient(circle at 15% 46%, rgba(255,211,125,0.16) 0 1px, transparent 2px),
    radial-gradient(circle at 49% 12%, rgba(232,161,61,0.12) 0 1px, transparent 2px);
  animation: royalParticles 14s ease-in-out infinite alternate;
  opacity: .75;
}


.app-root {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

.app-root::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: .6;
  background:
    radial-gradient(circle at 50% -5%, rgba(255,214,120,0.12), transparent 18%),
    radial-gradient(circle at 15% 0%, rgba(232,161,61,0.08), transparent 24%),
    radial-gradient(circle at 85% 8%, rgba(255,214,120,0.07), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0));
}

.gradient-dark {
  background: linear-gradient(180deg, rgba(16,12,9,0.88) 0%, rgba(24,17,12,0.78) 100%) !important;
}
.gradient-warm {
  background: linear-gradient(180deg, rgba(29,20,13,0.82) 0%, rgba(35,24,16,0.74) 100%) !important;
}
.gradient-accent {
  background: linear-gradient(180deg, rgba(38,27,19,0.8) 0%, rgba(24,18,13,0.72) 100%) !important;
}

.sticky-header {
  background: linear-gradient(180deg, rgba(18,13,9,0.96), rgba(18,13,9,0.84)) !important;
  box-shadow: 0 12px 36px rgba(0,0,0,.26);
}

.card-hover {
  backdrop-filter: blur(18px);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(232,161,61,0.06));
  border: 1px solid rgba(232,161,61,0.16);
  box-shadow: 0 18px 45px rgba(0,0,0,0.22);
}
.card-hover::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255,201,102,0.08);
  border-radius: inherit;
  pointer-events: none;
}

.darbar-hero {
  min-height: 100vh;
  position: relative;
  background:
    linear-gradient(180deg, rgba(8,7,6,0.36), rgba(8,7,6,0.74)),
    radial-gradient(circle at top, rgba(255,214,120,0.14), transparent 32%),
    url('../assects/hero-bg.jpg') center/cover no-repeat,
    linear-gradient(180deg, #1d140d 0%, #120d09 100%);
}
.darbar-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(12,9,6,0.28), rgba(12,9,6,0.55)),
    radial-gradient(circle at 50% 22%, rgba(255,226,160,0.10), transparent 28%);
  z-index: 0;
}
.darbar-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.darbar-sky {
  background:
    radial-gradient(circle at 20% 18%, rgba(255,211,125,0.12), transparent 18%),
    radial-gradient(circle at 80% 12%, rgba(232,161,61,0.1), transparent 16%),
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 25%);
}
.darbar-palace { display: none !important; }
.darbar-columns {
  inset: 0;
  opacity: .12;
  background:
    linear-gradient(90deg, transparent 0 6%, rgba(255,201,102,0.24) 6% 6.5%, transparent 6.5% 14%, rgba(255,201,102,0.12) 14% 14.5%, transparent 14.5% 85.5%, rgba(255,201,102,0.12) 85.5% 86%, transparent 86% 93.5%, rgba(255,201,102,0.24) 93.5% 94%, transparent 94% 100%);
}

.mughal-arch-frame {
  position: relative;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 999px 999px 28px 28px / 180px 180px 28px 28px;
  border: 1px solid rgba(255,201,102,0.22);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.03), rgba(232,161,61,0.06)),
    radial-gradient(circle at top, rgba(255,214,120,0.18), transparent 46%);
  box-shadow: 0 30px 80px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.03);
  overflow: hidden;
  backdrop-filter: blur(16px);
}
.mughal-arch-frame::before,
.mughal-arch-frame::after {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  width: 34px;
  border: 1px solid rgba(255,201,102,0.16);
  border-radius: 30px;
  opacity: .85;
}
.mughal-arch-frame::before { left: 18px; }
.mughal-arch-frame::after { right: 18px; }

.hero-darbar-frame {
  max-width: 860px;
  margin: 0 auto;
}
.hero-overline {
  color: var(--royal-gold-soft);
  letter-spacing: .38em;
  text-transform: uppercase;
  font-size: .72rem;
  margin-bottom: 1rem;
}
.hero-jali {
  width: 120px;
  height: 10px;
  margin: 0 auto 1.5rem;
  border-top: 1px solid rgba(255,201,102,0.5);
  border-bottom: 1px solid rgba(255,201,102,0.2);
  opacity: .75;
}

.section-royal::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: min(280px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,201,102,0.38), transparent);
}

@media (max-width: 768px) {
  .mughal-arch-frame {
    border-radius: 200px 200px 24px 24px / 110px 110px 24px 24px;
    padding: 1.25rem 1rem 2rem;
  }
  .mughal-arch-frame::before,
  .mughal-arch-frame::after {
    display: none;
  }
}


/* ===== Royal Gate Intro ===== */
.royal-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: 1fr 1fr;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(circle at center, rgba(0,0,0,0.18), rgba(0,0,0,0.72));
}
.royal-gate-panel {
  position: relative;
  height: 100%;
  background:
    linear-gradient(180deg, rgba(17,11,8,0.98), rgba(32,21,13,0.96)),
    linear-gradient(90deg, rgba(232,161,61,0.06), rgba(255,201,102,0.02));
  border-color: rgba(232,161,61,0.26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), inset 0 0 70px rgba(232,161,61,0.06);
}
.royal-gate-panel.left { border-right: 1px solid rgba(232,161,61,0.34); }
.royal-gate-panel.right { border-left: 1px solid rgba(232,161,61,0.34); }
.royal-gate-panel::before {
  content: "";
  position: absolute;
  inset: 7% 8%;
  border: 1px solid rgba(255,201,102,0.18);
  border-radius: 220px 220px 24px 24px / 130px 130px 24px 24px;
}
.royal-gate-panel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 11%;
  transform: translateX(-50%);
  width: clamp(72px, 11vw, 128px);
  height: clamp(120px, 18vw, 200px);
  border: 1px solid rgba(255,201,102,0.16);
  border-radius: 120px 120px 18px 18px / 85px 85px 18px 18px;
  background: linear-gradient(180deg, rgba(255,201,102,0.02), rgba(232,161,61,0.08));
  opacity: .72;
}
.royal-gate-emblem {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(34vw, 220px);
  height: min(34vw, 220px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #f7dfaa;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  letter-spacing: .24em;
  text-transform: uppercase;
  background: radial-gradient(circle, rgba(255,201,102,0.14), rgba(0,0,0,0.22) 60%, transparent 72%);
  border: 1px solid rgba(255,201,102,0.24);
  box-shadow: 0 0 40px rgba(232,161,61,0.16), inset 0 0 28px rgba(255,201,102,0.08);
}
.royal-gate-emblem::before,
.royal-gate-emblem::after {
  content: "";
  position: absolute;
  width: 76%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,201,102,0.45), transparent);
}
.royal-gate-emblem::before { top: 28%; }
.royal-gate-emblem::after { bottom: 28%; }
.royal-gate-sub {
  position: absolute;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  color: rgba(245,235,224,0.78);
  letter-spacing: .35em;
  text-transform: uppercase;
  font-size: .68rem;
  white-space: nowrap;
}
body.gate-intro-active { overflow: hidden; }
body.gate-intro-active .app-root,
body.gate-intro-active main,
body.gate-intro-active header,
body.gate-intro-active footer,
body.gate-intro-active section {
  visibility: visible;
  opacity: 0;
}
body.gate-intro-active .royal-gate-overlay { visibility: visible; }
body.gate-intro-complete .app-root,
body.gate-intro-complete main,
body.gate-intro-complete header,
body.gate-intro-complete footer,
body.gate-intro-complete section {
  animation: royalSceneReveal 1s ease forwards;
}
body.gate-intro-complete .royal-gate-overlay {
  animation: royalGateFade .35s ease forwards;
}
body.gate-intro-complete .royal-gate-panel.left {
  animation: royalGateOpenLeft 1.25s cubic-bezier(.22,.84,.24,1) forwards;
}
body.gate-intro-complete .royal-gate-panel.right {
  animation: royalGateOpenRight 1.25s cubic-bezier(.22,.84,.24,1) forwards;
}
body.gate-intro-complete .royal-gate-emblem,
body.gate-intro-complete .royal-gate-sub {
  animation: royalGateEmblemFade .55s ease forwards;
}
@keyframes royalGateOpenLeft { from { transform: translateX(0); } to { transform: translateX(-102%); } }
@keyframes royalGateOpenRight { from { transform: translateX(0); } to { transform: translateX(102%); } }
@keyframes royalGateEmblemFade { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(.92); } }
@keyframes royalGateFade { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }
@keyframes royalSceneReveal { from { opacity: 0; filter: blur(8px) saturate(.82); } to { opacity: 1; filter: blur(0) saturate(1); } }
@media (prefers-reduced-motion: reduce) {
  .royal-gate-overlay { display: none !important; }
  body.gate-intro-active .app-root,
  body.gate-intro-active main,
  body.gate-intro-active header,
  body.gate-intro-active footer,
  body.gate-intro-active section { visibility: visible !important;
  opacity: 1 !important; }
}
@media (max-width: 768px) {
  .royal-gate-panel::before { inset: 8% 6%; }
  .royal-gate-panel::after { top: 13%; }
  .royal-gate-sub { bottom: 11%; letter-spacing: .24em; font-size: .58rem; }
}


/* ===== 2026 Design Refresh ===== */
html { scroll-behavior: smooth; }
::selection { background: rgba(232,161,61,0.35); color: #fff5e8; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #120d09; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(232,161,61,.7), rgba(255,201,102,.35)); border-radius: 999px; border: 2px solid #120d09; }

body.royal-palace-site {
  background-attachment: fixed;
}

.logo_bar img {
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
  transition: transform .35s ease, filter .35s ease;
}
.logo_bar:hover img { transform: scale(1.02); filter: drop-shadow(0 10px 24px rgba(232,161,61,.18)); }

.nav-link {
  position: relative;
  transition: color .25s ease, opacity .25s ease;
  opacity: .92;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 1px;
  transform: scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(255,201,102,.95), transparent);
  transition: transform .25s ease;
}
.nav-link:hover,
.nav-link:focus-visible { color: var(--royal-gold-soft) !important; opacity: 1; }
.nav-link:hover::after,
.nav-link:focus-visible::after { transform: scaleX(1); }

.section-royal,
.offer-shell section,
body.royal-palace-site section.relative.overflow-hidden {
  position: relative;
  isolation: isolate;
}
.section-royal::before,
.offer-shell section::before,
body.royal-palace-site section.relative.overflow-hidden::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,201,102,.06), transparent 16%),
    radial-gradient(circle at 100% 0%, rgba(232,161,61,.05), transparent 18%),
    linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
}
.section-royal > *,
.offer-shell section > *,
body.royal-palace-site section.relative.overflow-hidden > * { position: relative; z-index: 1; }

.card-hover,
.panel-card,
.mini-card,
.offer-hero-card,
.prebox,
#awadh-contact-form,
.modal-content {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  border: 1px solid rgba(232,161,61,0.16);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018)),
    linear-gradient(180deg, rgba(232,161,61,0.08), rgba(18,13,9,0.22));
  box-shadow:
    0 18px 46px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04),
    inset 0 -1px 0 rgba(232,161,61,.06);
}
.card-hover::before,
.panel-card::before,
.mini-card::before,
.offer-hero-card::before,
.prebox::before,
#awadh-contact-form::before,
.modal-content::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 18%, rgba(255,255,255,.05) 35%, transparent 55%);
  opacity: .55;
}
.card-hover:hover,
.panel-card:hover,
.mini-card:hover,
.offer-hero-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 54px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,201,102,.08),
    inset 0 1px 0 rgba(255,255,255,.05);
}

.badge {
  border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(0,0,0,.15);
}

.btn-primary,
.offer-cta-primary {
  background: linear-gradient(135deg, #f0b24c 0%, #f7cf82 55%, #e3a339 100%) !important;
  color: #160f09 !important;
  box-shadow: 0 14px 30px rgba(232,161,61,.24);
}
.btn-primary:hover,
.offer-cta-primary:hover {
  box-shadow: 0 18px 38px rgba(232,161,61,.32);
}
.btn-secondary,
.offer-cta-secondary {
  border-color: rgba(255,201,102,.5) !important;
  color: #ffe0a3 !important;
  background: rgba(255,201,102,.05) !important;
}
.btn-secondary:hover,
.offer-cta-secondary:hover {
  background: rgba(255,201,102,.12) !important;
}

.gold-shimmer {
  background: linear-gradient(90deg, #fff2cb, #f4c86d 35%, #fff0c4 55%, #d9972f 75%, #fff3d2);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 28px rgba(212,175,55,.18);
}

.darbar-hero {
  background:
    linear-gradient(180deg, rgba(7,6,5,.36), rgba(7,6,5,.78)),
    radial-gradient(circle at top center, rgba(255,218,138,.18), transparent 30%),
    url('../assects/hero-bg.jpg') center/cover no-repeat,
    linear-gradient(180deg, #1d140d 0%, #120d09 100%) !important;
}
.darbar-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(18,13,9,.24), transparent 20%, transparent 80%, rgba(18,13,9,.24));
}
.mughal-arch-frame {
  max-width: 920px;
  border: 1px solid rgba(255,214,140,.34);
  box-shadow: 0 34px 90px rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.045), inset 0 40px 90px rgba(255,201,102,.05);
}
.hero-overline { text-shadow: 0 0 22px rgba(255,201,102,.22); }

.royal-experience-ribbon {
  position: relative;
  margin-top: -54px;
  z-index: 3;
}
.royal-experience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}
.royal-experience-item {
  padding: 1.2rem 1.1rem;
  text-align: center;
  border-radius: 20px;
  border: 1px solid rgba(255,201,102,.16);
  background: linear-gradient(180deg, rgba(17,13,10,.88), rgba(31,22,15,.82));
  box-shadow: 0 18px 40px rgba(0,0,0,.22);
}
.royal-experience-item h3 {
  font-family: 'Playfair Display', serif;
  color: #f8e8c1;
  font-size: 1.05rem;
  margin: .55rem 0 .35rem;
}
.royal-experience-item p {
  color: #ccbba2;
  font-size: .9rem;
  line-height: 1.7;
}
.royal-icon-wrap {
  width: 52px;
  height: 52px;
  margin: 0 auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, rgba(255,201,102,.18), rgba(232,161,61,.08));
  border: 1px solid rgba(255,201,102,.2);
  color: #f6d68f;
}

section h1, section h2, section h3 { letter-spacing: .01em; }
section h1, section h2 {
  text-wrap: balance;
}

input, textarea, .field, .select-field {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,201,102,.18) !important;
  color: #f5ebe0 !important;
  border-radius: 14px !important;
}
input:focus, textarea:focus, .field:focus, .select-field:focus {
  outline: none;
  border-color: rgba(255,201,102,.52) !important;
  box-shadow: 0 0 0 4px rgba(255,201,102,.08) !important;
}

.offer-shell {
  background:
    radial-gradient(circle at top, rgba(255,201,102,.09), transparent 22%),
    linear-gradient(180deg, #120d09 0%, #1a120d 40%, #120d09 100%);
}
.offer-hero-card {
  border-radius: 32px;
}

footer {
  position: relative;
  background: linear-gradient(180deg, rgba(15,11,8,.92), rgba(12,9,7,.98)) !important;
  border-top: 1px solid rgba(255,201,102,.14);
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 35%);
}

@media (max-width: 900px) {
  .royal-experience-grid { grid-template-columns: 1fr; }
  .royal-experience-ribbon { margin-top: -24px; }
}


/* ===== 2026 Full-Site Royal Gold Noir Refresh ===== */
:root {
  --rg-bg: #0c0907;
  --rg-bg-2: #15100c;
  --rg-surface: rgba(29, 22, 17, 0.82);
  --rg-surface-2: rgba(37, 27, 20, 0.88);
  --rg-border: rgba(242, 193, 104, 0.18);
  --rg-border-strong: rgba(242, 193, 104, 0.34);
  --rg-gold: #e1ad52;
  --rg-gold-soft: #f3cd84;
  --rg-text: #f4eadb;
  --rg-muted: #cdbba3;
  --rg-shadow: 0 22px 70px rgba(0,0,0,0.42);
  --rg-radius-lg: 26px;
  --rg-radius-md: 18px;
}

html, body {
  background:
    radial-gradient(circle at top center, rgba(244, 201, 120, 0.08), transparent 28%),
    radial-gradient(circle at bottom left, rgba(225, 173, 82, 0.06), transparent 22%),
    linear-gradient(180deg, #0c0907 0%, #15100c 54%, #0c0907 100%) !important;
  color: var(--rg-text) !important;
}
body.royal-palace-site {
  font-family: 'DM Sans', sans-serif;
}
body.royal-palace-site::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.015) 1px, transparent 1px);
  background-size: 120px 120px;
  opacity: .22;
  mask-image: radial-gradient(circle at center, black, transparent 88%);
  z-index: 0;
}
.app-root, .offer-shell {
  position: relative;
  z-index: 1;
  min-height: 100%;
  background: transparent !important;
}

/* typography */
h1, h2, h3, h4, .counter, .royal-title, .section-title {
  font-family: 'Playfair Display', serif !important;
  letter-spacing: .01em;
}
p, li, label, input, textarea, select, button, a {
  font-family: 'DM Sans', sans-serif;
}

/* header / nav */
#main-nav,
.sticky-header {
  background: linear-gradient(180deg, rgba(11, 8, 6, 0.92), rgba(16, 12, 9, 0.88)) !important;
  border-bottom: 1px solid var(--rg-border) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.24);
}
#main-nav nav {
  min-height: 78px;
}
#nav-logo img {
  max-height: 66px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.28));
}
.nav-link,
#mobile-menu a {
  color: var(--rg-text) !important;
  opacity: .92;
  transition: color .25s ease, opacity .25s ease, transform .25s ease;
}
.nav-link:hover,
#mobile-menu a:hover {
  color: var(--rg-gold-soft) !important;
  opacity: 1;
  transform: translateY(-1px);
}
#mobile-menu {
  margin: 0 14px 14px;
  border: 1px solid var(--rg-border) !important;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,15,11,.96), rgba(13,10,8,.96));
  box-shadow: var(--rg-shadow);
}

/* sections */
section,
.page-shell,
.section-royal,
.gradient-dark,
.gradient-warm,
.gradient-accent {
  position: relative;
}
section::before,
.page-shell::before,
.section-royal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent 18%, transparent 82%, rgba(255,255,255,0.01));
}
.gradient-dark,
.gradient-warm,
.gradient-accent {
  background:
    radial-gradient(circle at top right, rgba(255, 205, 132, 0.05), transparent 22%),
    linear-gradient(180deg, rgba(16, 12, 9, 0.96), rgba(22, 17, 13, 0.94)) !important;
}

/* hero */
.darbar-hero {
  min-height: min(100vh, 980px);
  background:
    linear-gradient(180deg, rgba(9,7,6,.34), rgba(10,7,5,.82)),
    radial-gradient(circle at top center, rgba(255,219,150,.18), transparent 32%),
    url('../assects/hero-bg.jpg') center/cover no-repeat,
    linear-gradient(180deg, #0d0907, #17110d) !important;
}
.mughal-arch-frame,
.hero-darbar-frame {
  max-width: 940px;
  padding: clamp(28px, 4vw, 44px);
  border-radius: 220px 220px 28px 28px;
  background:
    linear-gradient(180deg, rgba(23,17,13,.62), rgba(14,11,8,.82)),
    radial-gradient(circle at top, rgba(244, 207, 132, 0.1), transparent 32%);
  border: 1px solid rgba(243, 205, 132, 0.28) !important;
  box-shadow: 0 30px 90px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(243,205,132,.06);
  backdrop-filter: blur(10px);
}
.hero-overline {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(243,205,132,.22);
  background: rgba(255,255,255,.03);
  color: #f3cd84;
  padding: .6rem 1rem;
  border-radius: 999px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-size: .68rem;
  margin-bottom: 1rem;
}
.hero-overline::before,
.hero-overline::after {
  content: "✦";
  opacity: .85;
}

/* cards / boxes */
.card-hover,
.modal-content,
#awadh-contact-form,
.offer-card,
.offer-hero-card,
.admin-card,
.auth-card,
.review-card,
.gallery-card,
.table-card,
.menu-card {
  background:
    linear-gradient(180deg, rgba(31, 23, 17, 0.86), rgba(20, 15, 11, 0.9)) !important;
  border: 1px solid var(--rg-border) !important;
  border-radius: var(--rg-radius-lg) !important;
  box-shadow: var(--rg-shadow);
  backdrop-filter: blur(12px);
}
.card-hover:hover,
.offer-card:hover,
.review-card:hover,
.gallery-card:hover,
.menu-card:hover {
  transform: translateY(-8px);
  border-color: var(--rg-border-strong) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.42), 0 0 0 1px rgba(243,205,132,.08) inset;
}
.card-hover::before {
  background: linear-gradient(90deg, transparent, rgba(243,205,132,0.12), transparent) !important;
}

.badge,
.badge-premium {
  border-radius: 999px !important;
  padding: .72rem 1.1rem !important;
  background: linear-gradient(180deg, rgba(243,205,132,.12), rgba(225,173,82,.08)) !important;
  border: 1px solid rgba(243,205,132,.24) !important;
  color: var(--rg-gold-soft) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* buttons */
.btn-primary,
button.btn-primary,
a.btn-primary,
button[type="submit"] {
  background: linear-gradient(135deg, #d89e43 0%, #f2ca7c 50%, #d79637 100%) !important;
  color: #18110b !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 14px 30px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  box-shadow: 0 12px 28px rgba(217, 156, 54, .22);
}
.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(217, 156, 54, .34);
}
.btn-secondary,
.btn-tertiary,
button.btn-secondary,
a.btn-secondary,
a.btn-tertiary {
  border-radius: 999px !important;
  border: 1px solid rgba(243,205,132,.32) !important;
  background: rgba(255,255,255,.025) !important;
  color: var(--rg-gold-soft) !important;
}
.btn-secondary:hover,
.btn-tertiary:hover {
  background: rgba(243,205,132,.08) !important;
}

/* forms */
input,
textarea,
select,
.field,
.select-field,
.input,
#awadh-contact-form input,
#awadh-contact-form textarea,
#awadh-contact-form select {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(243,205,132,.17) !important;
  color: var(--rg-text) !important;
  border-radius: 16px !important;
  min-height: 50px;
}
textarea { min-height: 130px; }
input::placeholder, textarea::placeholder {
  color: rgba(205,187,163,.72) !important;
}
input:focus,
textarea:focus,
select:focus,
.field:focus,
.select-field:focus {
  border-color: rgba(243,205,132,.42) !important;
  box-shadow: 0 0 0 4px rgba(243,205,132,.08) !important;
  outline: none !important;
}

/* tables & admin */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--rg-border);
  background: rgba(18, 13, 9, 0.72);
}
tr:nth-child(even) { background: rgba(255,255,255,.015); }
th, td {
  border-bottom: 1px solid rgba(243,205,132,.08);
  color: var(--rg-text);
  padding: 14px 16px;
}
th {
  color: var(--rg-gold-soft);
  background: rgba(243,205,132,.06);
  text-transform: uppercase;
  font-size: .78rem;
  letter-spacing: .12em;
}
pre, code {
  background: rgba(255,255,255,.03);
  border-radius: 12px;
}

/* offers / reviews / gallery */
.offer-shell,
.gallery-shell,
.reviews-shell {
  background:
    radial-gradient(circle at top, rgba(243,205,132,.09), transparent 18%),
    linear-gradient(180deg, rgba(14,10,8,.96), rgba(18,13,9,.96)) !important;
}
.offer-hero-card,
.review-summary,
.gallery-frame {
  border-radius: 30px !important;
}
.offer-hero-card h1,
.review-summary h1,
.page-shell h1 {
  font-size: clamp(2.2rem, 4.5vw, 4rem);
}

/* footer */
footer {
  background:
    linear-gradient(180deg, rgba(14,10,8,.94), rgba(9,7,5,.98)) !important;
  border-top: 1px solid rgba(243,205,132,.15) !important;
}
footer a { color: var(--rg-muted) !important; }
footer a:hover { color: var(--rg-gold-soft) !important; }

/* mobile polish */
@media (max-width: 768px) {
  #main-nav nav { min-height: 70px; }
  .mughal-arch-frame,
  .hero-darbar-frame {
    border-radius: 90px 90px 22px 22px;
    padding: 24px 18px;
  }
  .btn-primary,
  .btn-secondary,
  .btn-tertiary,
  button[type="submit"] {
    width: 100%;
    text-align: center;
  }
  .card-hover,
  .modal-content,
  #awadh-contact-form,
  .offer-card,
  .review-card,
  .gallery-card {
    border-radius: 22px !important;
  }
  section { scroll-margin-top: 92px; }
}

/* graceful fallback for sections sometimes hidden by reveal script */
.no-js .reveal,
body .reveal[data-force-show="true"] {
  opacity: 1;
  transform: none;
}