/* ==========================================================================
   SkyLuxe Travels - Premium UI/UX Stylesheet
   ========================================================================== */

/* --- CSS Variables (Theme & Tokens) --- */
:root {
  /* Premium Color Palette */
  --brand: #0A1931;      /* Deep Navy Blue - Trust & Luxury*/
  --accent: #F59E0B;      /*Luminous Gold - High Attention CTA*/
  --accent-hover: #D97706; /*Deep Gold for hover states */
  
  /* Neutral & Background Colors*/
  --bg: #F8FAFC;         /*  Soft off-white for depth */
  --card: #FFFFFF;        /*Crisp white for cards/modals*/
 --text-main: #1E293B;   /*Slate 800 - High legibility*/
  --text-muted: #64748B;  /*Slate 500 - Secondary text*/
  --border-line: #E2E8F0;  /*Subtle borders */
  --input-bg: #F1F5F9;     /*Soft input backgrounds*/ 




  /* Structural & Effect Tokens */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;       /*Modern tile radius */
  --radius-pill: 999px;    /*Pill-shaped buttons/chips */
  
  --shadow-sm: 0 2px 4px rgba(10, 25, 49, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(10, 25, 49, 0.1), 0 2px 4px -1px rgba(10, 25, 49, 0.06);
  --shadow-lg: 0 20px 25px -5px rgba(10, 25, 49, 0.1), 0 10px 10px -5px rgba(10, 25, 49, 0.04);
  --shadow-hover: 0 25px 30px -5px rgba(10, 25, 49, 0.15);
  
  /* Smooth, modern animation curve */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Global Reset & Typography --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* body {
--bg: #F8FAFC;  
--text-main: #1E293B;   
    background-color: #FAF6F0; 

    color: #2D2D2D;

} */

/* Fix for mobile menu breaking the page width */
html, body {
  overflow-x: hidden; 
}



body {
  font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--text-main);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  
  /* --- The New Invisible Cushion --- */
  padding-top: 140px; /* Pushes content down so the fixed header doesn't hide it */

  /* Keep your existing background image styles below this... */
  background-image: linear-gradient(rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.8)), url('../images/bg1.png');
  background-size: cover; 
  background-position: center center; 
  background-repeat: no-repeat;
  background-attachment: fixed; 
  background-color: var(--bg); 
}

a {
  background: linear-gradient(to bottom, #FCEE9E 0%, #D4AF37 40%, #8E5E1D 75%, #FCEE9E 100%);
  -webkit-background-clip: text;
 
  background-clip: text;
  color: transparent; /* Fallback for older browsers */
  text-decoration: none;
  transition: var(--transition);
  font-weight: 600;
}
.nav a{
   -webkit-text-fill-color: transparent;
}
h1, h2, h3, h4 {
  color: var(--text-main);
  font-weight: 700;
  line-height: 1.2;
}
h1{
  color: white !important;
}
.container {
  width: min(1200px, 92%);
  margin: 0 auto;
}

.section {
  padding: 80px 0;
}

/* --- Header & Navigation (Glassmorphism) --- */
/* Update your existing .header class */
.header {
  position: fixed; 
  top: 0;
  left: 0;         
  width: 100%;     
  z-index: 100;
  background: rgba(0, 0, 0, 0); /* Starts transparent */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(226, 232, 240, 0.2); /* Very subtle border initially */
  
  /* Add this transition for a smooth effect */
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-bottom 0.4s ease;
}

/* Add this NEW class right below your .header block */
.header.scrolled {
  background: rgba(10, 25, 49, 0.95); /* Deep Navy Blue from your brand colors */
  box-shadow: var(--shadow-md); /* Adds a nice shadow */
  border-bottom: 1px solid rgba(226, 232, 240, 0.1);
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
}

/* Updated Logo Section */
.logo {
  display: flex;
  align-items: center;
  gap: 15px; /* Space between the image and the text */
  text-decoration: none;
}

/* Choose ONE of the fonts below and delete the others */
.logo span {
  font-family: 'Cinzel', serif; 
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 1.5px; 
  text-transform: uppercase;
  
  /* Metallic Gold Gradient Effect */
  background: linear-gradient(to bottom, #FCEE9E 0%, #D4AF37 40%, #8E5E1D 75%, #FCEE9E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent; 
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.2));

  /* ADD THIS LINE to bring the two text lines closer together */
  line-height: 1.1; 
}

.logo-img {
  height: 120px; /* Adjust this number to make your logo bigger or smaller! */
  width: auto;
  object-fit: contain;
}

.nav {
  display: flex;
  gap: 20px;
  font-weight: 500;
  font-size: 0.95rem;
}

.nav a:hover {
  background: var(--accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}

/* --- Hero Section (Immersive & Conversion Focused) --- */
/* --- Hero Section (Animated Background) --- */
.hero {
  border-radius: 24px;
  overflow: hidden;
  color: #FFFFFF;
  padding: 100px 56px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 60vh;
  
  /* This triggers the animation below. 15s total = 7.5 seconds per image */
  animation: heroSlideshow 15s infinite ease-in-out;
}

/* Keyframes for the infinite looping background */
/* Keyframes for the infinite looping background */
@keyframes heroSlideshow {
  /* Image 1 */
  0%, 18% {
    background: linear-gradient(135deg, rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.1)),
                url("../images/f4.png") center/cover no-repeat;
  }
  
  /* Image 2 */
  20%, 38% {
    background: linear-gradient(135deg, rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.1)),
                url("../images/f3.png") center/cover no-repeat;
  }
  
  /* Image 3 */
  40%, 58% {
    background: linear-gradient(135deg, rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.1)),
                url("../images/f2.jpeg") center/cover no-repeat;
  }

  /* Image 4 */
  60%, 78% {
    background: linear-gradient(135deg, rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.1)),
                url("../images/f1.jpeg") center/cover no-repeat;
  }

  /* Image 5 */
  80%, 98% {
    background: linear-gradient(135deg, rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.1)),
                url("../images/f5.png") center/cover no-repeat;
  }
  
  /* Loop back to Image 1 */
  100% {
    background: linear-gradient(135deg, rgba(10, 25, 49, 0.5), rgba(10, 25, 49, 0.1)),
                url("../images/f4.png") center/cover no-repeat;
  }
}

.hero p:first-of-type {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
}

.hero h1 {
  /* Fluid typography: scales perfectly between mobile and desktop */
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  color: #FFFFFF;
  margin: 0 0 20px;
  max-width: 800px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); /* Adds a shadow to make text pop */
}

.hero .muted-light {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1.1rem, 2vw, 1.25rem);
  max-width: 600px;
  margin-bottom: 40px;
}

.search-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --- Buttons (CTAs) & Micro-Interactions --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-line);
  background: var(--card);
  color: var(--text-main);
  border-radius: var(--radius-pill);
  padding: 14px 28px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--text-muted);
}

/* High-Attention CTA */
.btn.dark, .btn[type="submit"] {
  background: var(--accent);
  color: #FFFFFF;
  border: none;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.btn.dark:hover, .btn[type="submit"]:hover {
  background: var(--accent-hover);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.btn.small {
  padding: 8px 18px;
  font-size: 0.85rem;
}

/* --- Destination Grid & Cards (Premium Polaroids) --- */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 16px;
}

.section-head h2 { 
  font-size: 2rem; 
  color: #FFFFFF; /* Makes the text stark white */
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* Adds a shadow to separate it from the background */
}

.grid {
  display: grid;
  gap: 32px;
}

.grid.cards {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.card {
  background: var(--card);
  border: 1px solid rgba(0,0,0,0.04);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-hover);
}

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

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

.card-body {
  padding: 24px;
  flex-grow: 1;
  background: var(--card);
  position: relative;
  z-index: 2; /* Keeps text above scaled image */
}

.card h3 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.card p.subtle {
  color: var(--text-muted);
  font-size: 0.95rem;
  margin: 0;
}

/* --- Interactive Chips / Filters --- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.chip {
  border: 1px solid var(--border-line);
  background: var(--card);
  color: var(--text-muted);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.chip:hover {
  background: var(--input-bg);
  color: var(--text-main);
}

.chip.active {
  background: var(--brand);
  color: #FFFFFF;
  border-color: var(--brand);
  box-shadow: var(--shadow-sm);
}

/* --- Forms & Inputs (Effortless UX) --- */
.input, .textarea {
  width: 100%;
  border: 2px solid transparent;
  background-color: var(--input-bg);
  color: var(--text-main);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-family: inherit;
  font-size: 1rem;
  transition: var(--transition);
}

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

.input:focus, .textarea:focus {
  outline: none;
  background-color: var(--card);
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.1);
}

.input::placeholder, .textarea::placeholder {
  color: #94A3B8;
}

/* Wrap inputs nicely */
form p { margin-bottom: 16px; }

/* --- Modals (High Focus, Blurred Backdrop) --- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 49, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  place-items: center;
  z-index: 1000;
  padding: 16px;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

/* Class to trigger display in JS */
.modal-backdrop[style*="display: grid"] {
  display: grid !important;
  opacity: 1;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Update your existing .modal class */
.modal {
  background: var(--card);
  border-radius: 24px;
  width: min(560px, 100%);
  padding: 40px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  
  /* --- NEW: Enables scrolling if the form is too long --- */
  max-height: 85vh; /* Prevents modal from touching the top/bottom of the screen */
  overflow-y: auto; /* Adds the scrollbar only when needed */
}

/* --- NEW: Premium custom scrollbar for the modal --- */
.modal::-webkit-scrollbar {
  width: 6px;
}
.modal::-webkit-scrollbar-track {
  background: transparent; 
  margin: 16px 0; /* Gives the scrollbar some breathing room at the top and bottom */
}
.modal::-webkit-scrollbar-thumb {
  background-color: #CBD5E1;
  border-radius: var(--radius-pill);
}

@keyframes slideUp {
  to { transform: translateY(0); }
}

.modal-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border-line);
  padding-bottom: 16px;
}

.modal-top h3 { font-size: 1.5rem; margin: 0; }

/* --- Miscellaneous Elements --- */
.itinerary {
  border: 1px solid var(--border-line);
  border-radius: var(--radius-lg);
  padding: 24px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.itinerary h3 { color: var(--accent); }

.itinerary-day {
  border-top: 1px solid var(--border-line);
  margin-top: 16px;
  padding-top: 16px;
}

.transport-box {
  background: var(--brand);
  color: #FFFFFF;
  border-radius: 24px;
  padding: 56px 40px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}

.transport-box h2 { color: #FFFFFF; margin-bottom: 16px; }
.transport-box p { color: #CBD5E1; max-width: 600px; margin: 0 auto 32px; font-size: 1.1rem; }
.transport-box .btn { color: var(--brand); }



/* --- Mobile Responsiveness --- */
@media (max-width: 850px) {
  .hero {
    padding: 60px 24px;
    text-align: center;
    align-items: center;
  }
  
  .search-row {
    justify-content: center;
    width: 100%;
  }
  
  .search-row .btn {
    width: 100%;
  }

  /* Transform the Nav into a side panel */
  .nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100%; /* Better than 100vh for mobile Safari/Chrome */
    background-color: var(--card);
    flex-direction: column;
    
    /* 100px bottom padding ensures the last links aren't blocked by the footer */
    padding: 80px 24px 100px; 
    
    box-shadow: -10px 0 30px rgba(10, 25, 49, 0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Z-index 1000 ensures it slides OUT OVER the footer (which is z-index 100) */
    z-index: 1000; 
    overflow-y: auto;
  }

  .header-row {
    justify-content: center;
  }

  .modal {
    padding: 24px;
    border-radius: 20px;
  }
  
  .section {
    padding: 56px 0;
  }
}

/* ==========================================================================
   Responsive Design & Media Queries
   ========================================================================== */

/* --- Laptops & Tablets (Below 1024px) --- */
@media (max-width: 1024px) {
  .hero {
    padding: 80px 40px;
    min-height: 50vh;
  }
  
  .hero h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
  }
}

/* --- Mobile Devices & Small Tablets (Below 850px) --- */
@media (max-width: 850px) {
  /* Add this body rule to shrink the cushion for smaller mobile headers */
  body {
    padding-top: 90px; 
  }

  .section {
    padding: 56px 0;
  }

  .hero {
    padding: 60px 24px;
    text-align: center;
    align-items: center;
  }
  
  .search-row {
    justify-content: center;
    width: 100%;
    flex-direction: column; /* Stacks buttons on mobile */
  }
  
  .search-row .btn {
    width: 100%;
  }

  /* Header Layout Adjustment */
  .header-row {
    flex-direction: column;
    gap: 16px;
    padding: 16px 0 12px;
  }

  /* 
   * Sleek Mobile Navigation: Horizontally Scrollable 
   * This keeps it looking like a premium app without taking up too much vertical height.
   */
  .nav {
    display: flex;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 24px;
    padding-bottom: 8px; /* Room for scroll interaction */
    
    /* Hides the ugly scrollbar but keeps functionality */
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  .nav::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
  }

  .nav a {
    white-space: nowrap; /* Prevents text from wrapping */
    font-size: 0.9rem;
    padding: 4px 0;
  }

  /* Adjust Modal for smaller screens */
  .modal {
    padding: 24px;
    border-radius: 20px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* --- Small Phones (Below 480px) --- */
@media (max-width: 480px) {
  .grid.cards {
    grid-template-columns: 1fr; /* 1 column grid for cards */
  }

  .hero h1 {
    font-size: 2rem; /* Ensure main heading fits */
  }

  .section-head h2 {
    font-size: 1.5rem;
  }
  
  .chip-row {
    gap: 8px;
  }
  
  .chip {
    padding: 8px 16px;
    font-size: 0.85rem;
    flex-grow: 1;
    text-align: center;
  }
  
  .transport-box {
    padding: 40px 20px;
  }
}

/* --- Global Text Spacing --- */
h1, h2, h3, h4 {
  margin-bottom: 16px; /* Space below headings */
}

p {
  margin-bottom: 16px; /* Space between stacked paragraphs */
}

/* Removes the bottom margin from the last text element inside any card or container 
   so your layout stays perfectly balanced at the bottom */
p:last-child, 
h1:last-child, 
h2:last-child, 
h3:last-child, 
h4:last-child {
  margin-bottom: 0;
}
/* --- Button Spacing --- */

/* Adds space above the row of buttons in your Hero section */
.search-row {
  margin-top: 32px; 
}

/* Adds space above the single buttons inside your forms */
form .btn {
  margin-top: 16px;
}

/* Adds space above the standalone Connect button in the About page */
.container.card .btn {
  margin-top: 16px;
}

/* --- Destination Details Hero Button --- */
#destinationRoot .card-body .btn {
  display: flex;            /* Allows the margin auto to work correctly */
  width: fit-content;       /* Keeps the button hugging the text instead of stretching */
  margin: 32px auto 0;      /* 32px top margin, auto left/right (centers it), 0 bottom */
}

/* ==========================================================================
   Global Button Centering
   ========================================================================== */

/* 1. Center all standalone buttons inside Cards & Containers (About, Destination pages) */
.card-body .btn,
.container.card .btn {
  display: flex;
  width: fit-content;       /* Prevents the button from stretching */
  margin: 24px auto 0;      /* Adds top spacing and centers horizontally */
  justify-content: center;
}

/* 2. Center all buttons inside Forms (Modals, Collaboration Form) */
form .btn {
  display: flex;
  width: fit-content;
  margin: 24px auto 0; 
  justify-content: center;
}

/* 3. Center the row of buttons in the Hero Section */
.search-row {
  display: flex;
  justify-content: center;  /* Centers the flex items horizontally */
  align-items: center;
  width: 100%;
}

/* 4. Center the buttons in the Transport section */
.transport-box .chip-row {
  display: flex;
  justify-content: center;  /* Centers the buttons inside the chip-row */
  width: 100%;
}

/* --- Mobile Specific Tweak --- */
@media (max-width: 850px) {
  /* On mobile, buttons inside the hero and forms usually look better full-width */
  .search-row .btn,
  form .btn {
    width: 100%;            /* Makes buttons stretch to fill the screen on small phones */
    margin-top: 16px;
  }
}

/* ==========================================================================
   Luxury Hotel Partnerships Cards
   ========================================================================== */
.hotel-brand-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
}

.hotel-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hotel-brand-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s ease;
}

.hotel-brand-card:hover img {
  transform: scale(1.1);
}

/* Dark gradient to make the white text pop */
.hotel-brand-card .hotel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 25, 49, 0.95), rgba(10, 25, 49, 0.1));
  z-index: 1;
}

.hotel-brand-card .hotel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.hotel-brand-card .stars {
  color: var(--accent); /* Uses your premium luminous gold */
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.hotel-brand-card h3 {
  color: #FFFFFF;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* --- Centered Section Headers --- */
.section-head.center-head {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-bottom: 48px;
}

.section-head.center-head h2 {
  margin-bottom: 8px;
}

/* ==========================================================================
   Special Feature Banner (Ayodhya Deal)
   ========================================================================== */
.feature-banner {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 64px 56px;
  box-shadow: var(--shadow-lg);
  background: var(--brand); 
}

/* Beautiful dark gradient blending into an Ayodhya/Spiritual background image */
/* Beautiful dark gradient blending into an Ayodhya/Spiritual background image */
.feature-banner.ayodhya-banner {
  background: linear-gradient(135deg, rgba(10, 25, 49, 0.65) 0%, rgba(10, 25, 49, 0.2) 100%),
              url("../images/ay_banner.png") center/cover no-repeat;
}

.feature-banner .banner-content {
  position: relative;
  z-index: 2;
  max-width: 550px;
  color: #FFFFFF;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6); /* Adds a shadow so the white text pops */
}

/* Eye-catching badge */
.deal-badge {
  display: inline-block;
  background: var(--accent);
  color: #FFFFFF;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  margin-bottom: 20px;
  box-shadow: 0 4px 10px rgba(245, 158, 11, 0.3);
}

.feature-banner h2 {
  color: #FFFFFF;
  font-size: clamp(2.2rem, 4vw, 3rem);
  margin-bottom: 16px;
  line-height: 1.1;
}

.feature-banner .subtle-light {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.1rem;
  margin-bottom: 24px;
}

/* Elegant list styling */
.deal-highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
}

.deal-highlights li {
  position: relative;
  padding-left: 32px;
  margin-bottom: 12px;
  font-weight: 500;
  color: #E2E8F0;
  font-size: 1.05rem;
}

/* Custom Gold Star Bullet Points */
.deal-highlights li::before {
  content: "✦";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-size: 1.2rem;
}

/* Ensure the button inside the banner aligns to the left on desktop */
.feature-banner .btn {
  margin: 0; 
}

/* --- Mobile Responsiveness for the Banner --- */
@media (max-width: 850px) {
  .feature-banner {
    padding: 48px 24px;
    text-align: center;
    justify-content: center;
  }
  
  .deal-highlights li {
    padding-left: 0;
  }
  
  /* Hides the star bullets on mobile so text centers perfectly */
  .deal-highlights li::before {
    display: none; 
  }
  
  /* Creates little pill-shaped tags for the list on mobile */
  .deal-highlights li {
    display: inline-block;
    margin: 4px 6px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
  }
}

/* Updated Logo Section */
.logo {
  display: flex;
  align-items: center;
  gap: 15px; /* Space between the image and the text */
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--brand);
}

.logo-img {
  height: 120px; /* Adjust this number to make your logo bigger or smaller! */
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   Luxury Hotel Partnerships Cards (Infinite Marquee)
   ========================================================================== */

/* Outer container hides everything outside the bounds */
.hotel-marquee-wrapper {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 10px 0;
}

/* Optional: Fades out the left and right edges for a premium look */
.hotel-marquee-wrapper::before,
.hotel-marquee-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.hotel-marquee-wrapper::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 0%, transparent 100%);
}
.hotel-marquee-wrapper::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 0%, transparent 100%);
}

/* Inner track handles the flexbox and animation */
.hotel-marquee-track {
  display: flex;
  gap: 16px;
  width: max-content;
  /* 35s is the speed. Lower = faster, Higher = slower */
  animation: scrollMarquee 35s linear infinite;
}

/* Pauses the scrolling when the user hovers over it */
.hotel-marquee-track:hover {
  animation-play-state: paused;
}

/* Translates exactly 50% (plus half the gap) to perfectly loop the two identical lists */
@keyframes scrollMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 8px)); } 
}

/* The individual hotel cards */
.hotel-brand-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  height: 140px;
  width: 200px; /* IMPORTANT: Fixed width replaces the old grid layout */
  flex-shrink: 0; /* Prevents cards from squishing together */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
  cursor: pointer;
}

.hotel-brand-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.hotel-brand-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transition: transform 0.6s ease;
}

.hotel-brand-card:hover img {
  transform: scale(1.1);
}

/* Dark gradient to make the white text pop */
.hotel-brand-card .hotel-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 25, 49, 0.95), rgba(10, 25, 49, 0.1));
  z-index: 1;
}

.hotel-brand-card .hotel-content {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 100%;
}

.hotel-brand-card .stars {
  color: var(--accent);
  font-size: 0.85rem;
  letter-spacing: 2px;
  margin-bottom: 2px;
}

.hotel-brand-card h3 {
  color: #FFFFFF;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0; /* Reduced padding to compensate for the larger logo */
}

@media (max-width: 480px) {
  .logo-img {
    height: 40px; /* Slightly smaller for mobile screens */
  }
}

/* Add this to style.css */
body {
    background-color: #FAF6F0 !important; /* Replace #FF0000 with your desired color */
}

/* ==========================================================================
   Fixed & Minimal Footer
   ========================================================================== */

/* 1. Add padding to the body so your page content doesn't get hidden behind the fixed footer when you scroll to the bottom */
body {
  padding-bottom: 60px; 
}

/* Update your existing .footer class to include the transition */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background: rgba(0, 0, 0, 0); /* Starts transparent */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(226, 232, 240, 0.2); 
  color: white;
  padding: 8px 0;
  box-shadow: 0 -4px 15px rgba(10, 25, 49, 0.05); 
  
  /* Add this line for the smooth fade */
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-top 0.4s ease;
}

/* Add this NEW class right below your .footer block */
.footer.scrolled {
  background: rgba(10, 25, 49, 0.95); /* Matches the dark header */
  box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.3); /* Stronger upward shadow */
  border-top: 1px solid rgba(226, 232, 240, 0.1);
}

/* 2. Put icons on the left and text on the right to save vertical space */
.footer .container {
  display: flex;
  flex-direction: column; /* This forces the two-line stacked layout */
  justify-content: center;
  align-items: center;
  gap: 6px; /* Adds a tiny bit of clean space between the logos and the text */
}

.footer-links {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 0; /* Remove old margins */
}

.footer-icon {
  width: 22px; /* Scaled down slightly for the minimal look */
  height: 22px;
  opacity: 0.7;
  transition: var(--transition);
}

.footer-links a:hover .footer-icon {
  opacity: 1;
  transform: translateY(-2px) scale(1.1);
}

.footer p {
  margin-bottom: 0;
  font-size: 0.8rem; /* Scaled down for the sleek profile */
  font-weight: 500;
}

/* 3. Mobile adjustments: Stack them neatly if the screen is too narrow */
@media (max-width: 650px) {
  .footer .container {
    flex-direction: column;
    justify-content: center;
    gap: 8px;
  }
  
  body {
    padding-bottom: 75px; /* Slightly larger buffer for mobile stacked layout */
  }
}

/* ==========================================================================
   Navigation Dropdown Menu
   ========================================================================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* The actual dropdown box */
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(15px);
  background-color: var(--card);
  min-width: 220px;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  padding: 8px 0;
  border: 1px solid var(--border-line);
  
  /* Hidden by default, animated in on hover */
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 200;
  
  /* Adds the scrollbar if the list gets too long */
  max-height: 250px;
  overflow-y: auto;
}

/* Show the menu when hovering over the parent .dropdown */
/* Show the menu when hovering OR when clicked (the .expanded class) */
/* Show the menu on hover OR click, but ONLY on Desktop screens */
@media (min-width: 851px) {
  .dropdown:hover .dropdown-menu,
  .dropdown.expanded .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(8px);
  }
}

/* Individual links inside the dropdown */
.dropdown-menu a {
  display: block;
  padding: 12px 20px;
  color: var(--text-main);
  font-weight: 500;
  font-size: 0.95rem;
  border-bottom: 1px solid var(--input-bg);
  transition: var(--transition);
}

.dropdown-menu a:last-child {
  border-bottom: none;
}

.dropdown-menu a:hover {
  background-color: var(--input-bg) !important;
  
  /* Forces the text to be your dark navy brand color for perfect visibility */
  color: var(--brand) !important; 
  
  /* Kills any transparent text gradients from your global anchor tags */
  -webkit-text-fill-color: var(--brand) !important; 
  background-clip: border-box !important;
  
  padding-left: 24px; 
}

/* Custom Scrollbar for the dropdown to keep it elegant */
.dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.dropdown-menu::-webkit-scrollbar-thumb {
  background-color: #CBD5E1;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   Mobile Navigation & Slide-Out Menu
   ========================================================================== */

/* Hide the mobile button on desktop */
.mobile-toggle {
  display: none;
  font-size: 1.8rem;
  background: none;
  border: none;
  color: var(--brand);
  cursor: pointer;
  z-index: 1001; /* Keeps button above the menu */
}

@media (max-width: 850px) {
  /* Show the mobile button */
  .mobile-toggle {
    display: block;
  }

  /* Transform the Nav into a side panel */
  .nav {
    position: fixed;
    top: 0;
    right: -100%; /* Hides it off the right side of the screen */
    width: 280px;
    height: 100vh;
    background-color: var(--card);
    flex-direction: column;
    padding: 80px 24px 24px;
    box-shadow: -10px 0 30px rgba(10, 25, 49, 0.15);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    overflow-y: auto;
  }

  /* When the 'active' class is added via JS, it slides in */
  .nav.active {
    right: 0;
  }

  .nav a {
    font-size: 1.1rem;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-line);
    width: 100%;
  }

  /* Reset Dropdown styles for mobile (so it pushes content down instead of hovering over it) */
  .dropdown {
    width: 100%;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--accent);
    border-radius: 0;
    opacity: 1;
    visibility: visible;
    width: 100%;
    
    /* Hidden by default on mobile, expands on tap */
    max-height: 0;
    overflow: hidden;
    padding: 0;
    transition: max-height 0.3s ease;
  }

  /* When tapped on mobile, expand the menu */
  /* When tapped, expand the menu on mobile */
  .dropdown.expanded .dropdown-menu {
    max-height: 300px;
    padding: 8px 0 8px 16px;
    margin-top: 8px;
  }

  .dropdown-menu a {
    border-bottom: none;
    padding: 8px 0;
    font-size: 1rem;
  }
}

@media (max-width: 850px) {
  /* Forces the logo to the left and the button to the far right */
  .header-row {
    flex-direction: row !important; 
    justify-content: space-between !important;
    align-items: center;
    padding: 12px 24px; /* Adds breathing room on the sides of the screen */
  }

  /* Ensures the logo doesn't take up too much space next to the button */
  .logo-img {
    height: 60px; 
  }
  
  /* Hides the text on mobile so only the G-logo and hamburger fit cleanly */
  /* .logo span {
    display: none; 
  } */

  /* Make sure the hamburger button looks clean and clickable */
  /* Make sure the hamburger button looks clean, premium, and clickable */
.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;                /* Perfect touch target size */
  height: 46px;
  font-size: 1.4rem;          /* Scaled slightly for perfect visual centering */
  color: #FFFFFF;             /* Crisp white icon */
  background: var(--brand);   /* Deep navy blue background */
  border: 1px solid rgba(255, 255, 255, 0.15); /* Subtle glassy border */
  border-radius: 50%;         /* Perfect circle for a modern app feel */
  margin: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(10, 25, 49, 0.2); /* Soft shadow for depth */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Buttery smooth transitions */
  z-index: 1001;              /* Keeps it above the slide-out menu */
}


}

/* ==========================================================================
   Mobile Footer Adjustments
   ========================================================================== */
@media (max-width: 650px) {
  /* 1. Add a bit more buffer at the bottom of the page so the stacked footer doesn't hide text */
  body {
    padding-bottom: 85px; 
  }
  
  /* 2. Tighten the padding on the footer itself */
  .footer {
    padding: 8px 0 6px; 
  }

  /* 3. Bring the icons and text slightly closer together */
  .footer .container {
    gap: 4px; 
  }

  /* 4. Scale down the icons just a touch for small screens */
  .footer-icon {
    width: 20px; 
    height: 20px;
  }

  /* 5. Reduce the font size and ensure it doesn't touch the edges of the screen */
  .footer p {
    font-size: 0.75rem; 
    text-align: center;
    padding: 0 16px;
    line-height: 1.4;
  }
}

/* Add this to style.css */
/* body {
    background-color: #F8FAFC !important;
} */

/* ==========================================================================
   WhatsApp Floating Button (Matching Theme)
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  bottom: 80px; 
  right: 24px;
  width: 55px;
  height: 55px;
  
  background-color: var(--brand); 
  color: #FFFFFF;
  
  /* Reset button defaults */
  border: none;
  cursor: pointer;
  
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

/* Matches the Query icon's Gold hover effect */
.whatsapp-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 25px rgba(10, 25, 49, 0.4);
  background-color: var(--accent); 
}

.whatsapp-float svg {
  transition: transform 0.3s ease;
}

.whatsapp-float:hover svg {
  transform: scale(1.1);
}

/* --- Mobile Adjustments --- */
@media (max-width: 650px) {
  .whatsapp-float {
    bottom: 95px; 
    right: 16px;
    width: 50px;
    height: 50px;
  }
  
  .whatsapp-float svg {
    width: 28px;
    height: 28px;
  }
}
/* ==========================================================================
   Floating Query Form Button
   ========================================================================== */
.query-float {
  position: fixed;
  /* Placed exactly 15px above the WhatsApp button (80px + 55px height + 15px gap) */
  bottom: 150px; 
  right: 24px;
  width: 55px;
  height: 55px;
  background-color: var(--brand); /* Deep Navy Blue */
  color: #FFFFFF;
  border: none;
  border-radius: 50%; /* Perfect circle */
  box-shadow: var(--shadow-lg);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
}

/* Turns Luminous Gold and pops up on hover */
.query-float:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 15px 25px rgba(10, 25, 49, 0.4);
  background-color: var(--accent); 
}

.query-float svg {
  transition: transform 0.3s ease;
}

.query-float:hover svg {
  transform: scale(1.1);
}

/* --- Mobile Adjustments --- */
@media (max-width: 650px) {
  .query-float {
    /* Adjusted for mobile stacked footer height (95px + 50px + 15px gap) */
    bottom: 160px; 
    right: 16px;
    width: 50px;
    height: 50px;
  }
  
  .query-float svg {
    width: 22px;
    height: 22px;
  }
}