/* 1) Make the hero content container full width */
.hero-container .zpcontainer {
  max-width: 100% !important;
  width: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0px !important;
}

/* 2) Ensure the code snippet itself stretches fully */
.hero-container .zpelem-codesnippet,
.hero-container .zpelem-codesnippet .zpsnippet-container,
.hero-container .zpelem-codesnippet .zpsnippet-container iframe {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  max-width: 100% !important;
  max-height: 100% !important;
  height: 100% !important;
  display: block;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  border-radius: 0px !important;
}

/* ============================================
   NAVBAR LOGO: MAX 100PX WIDE (RESPONSIVE)
   ============================================ */

/* This targets the exact <img> you pasted: <img data-zs-logo ...> */
img[data-zs-logo] {
  max-width: 100px !important;  /* never wider than 100px */
  width: 100% !important;       /* lets it shrink with its container */
  height: auto !important;      /* keep aspect ratio */
  display: block;
  object-fit: contain;
}

/* Optional: tweak for small screens if you ever want it smaller there */
@media (max-width: 768px) {
  img[data-zs-logo] {
    max-width: 100px !important;  /* still capped at 100px on mobile */
  }
}

/* ===========================================================
   DESKTOP TOP NAVIGATION BUTTONS (HEADER)
   =========================================================== */

/* Base style for ALL top-level header links, including "Book with VELTM" */
[data-zp-menu-top] > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 1rem;
  border-radius: 16px;

  font-family: Poppins-ExtraLight, sans-serif;
  font-weight: 100;
  font-size: 0.3rem;
  text-transform: none;
  text-decoration: none;

  background: transparent !important;
  background-image: none !important;
  color: #4b5563 !important;
  border: transparent !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.1s ease;
}

/* Make sure the label span inherits properly */
[data-zp-menu-top] > li > a .theme-menu-name {
  color: inherit !important;
  font-weight: inherit;
  text-transform: none;
}

/* Explicitly ensure "Book with VELTM" matches all others in NON-HOVER state */
[data-zp-menu-top] > li.menu-highlight-primary > a {
  background: transparent !important;
  background-image: none !important;
  color: #4b5563 !important;
  border: transparent !important;
  box-shadow: none !important;

  /* FIX SHAPE: enforce same shape as other header buttons */
  padding: 0.5rem 1rem !important;
  border-radius: 16px !important;
}

/* REMOVE ACTIVE LINK STYLING (no special look for current page) */
[data-zp-menu-top] > li.theme-menu-selected > a,
[data-zp-menu-top] > li.theme-menu-selected > a .theme-menu-name {
  background: transparent !important;
  background-image: none !important;
  color: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* HOVER + FOCUS: Apply gradient + glow to ALL header items (including Book with VELTM) */
[data-zp-menu-top] > li > a:hover,
[data-zp-menu-top] > li > a:focus {
  color: #FFFFFF !important;
  border-color: transparent !important;
  background-image: linear-gradient(90deg, #4F46E5, #9333EA) !important;
  box-shadow:
    0 0 0 0.5px #FFFFFF,
    0 0 0 3px #6485F5 !important;
  outline: none !important;
}

/* PRESSED/ACTIVE MOUSE-DOWN FEEL */
[data-zp-menu-top] > li > a:active {
  background-image: linear-gradient(90deg, #4338CA, #7E22CE) !important;
  transform: translateY(1px) !important;
}



/* ===========================================================
   MOBILE MENU BUTTONS
   =========================================================== */

.theme-responsive-menu-area .theme-menu-area li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 1.5rem;
  border-radius: 0px;

  font-family: Poppins-ExtraLight, sans-serif;
  font-weight: 100;
  text-transform: none;
  text-decoration: none;

  background: transparent !important;
  background-image: none !important;
  color: none !important;
  border: 0px solid none !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.1s ease;
}

.theme-responsive-menu-area .theme-menu-area li > a .theme-menu-name {
  color: inherit !important;
  font-weight: inherit;
  text-transform: none;
}

.theme-responsive-menu-area .theme-menu-area li > a:hover,
.theme-responsive-menu-area .theme-menu-area li > a:focus {
  color: #FFFFFF !important;
  border-color: transparent !important;
  background-image: linear-gradient(90deg, #4F46E5, #9333EA) !important;
  box-shadow:
    0 0 0 1px #FFFFFF,
    0 0 0 3px #6485F5 !important;
  outline: none;
}

.theme-responsive-menu-area .theme-menu-area li > a:active {
  background-image: linear-gradient(90deg, #4338CA, #7E22CE) !important;
  transform: translateY(1px);
}



/* ===========================================================
   SUBMENU ITEMS (DESTINATIONS DROPDOWN, MORE MENU, ETC.)
   =========================================================== */

.theme-sub-menu a,
.theme-sub-li-menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0.5rem 1.5rem;
  border-radius: 16px;

  font-family: Poppins, sans-serif;
  font-weight: 500;
  text-transform: none;
  text-decoration: none;

  background: transparent !important;
  background-image: none !important;
  color: #4b5563 !important;
  border: transparent !important;

  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.1s ease;
}

/* Submenu hover: SAME effect as header buttons */
.theme-sub-menu a:hover,
.theme-sub-menu a:focus,
.theme-sub-li-menu a:hover,
.theme-sub-li-menu a:focus {
  color: #FFFFFF !important;
  border-color: transparent !important;
  background-image: linear-gradient(90deg, #4F46E5, #9333EA) !important;
  box-shadow:
    0 0 0 1px #FFFFFF,
    0 0 0 0px none !important;
  outline: none;
  border-radius: 16px;
}

.theme-sub-menu a:active,
.theme-sub-li-menu a:active {
  background-image: linear-gradient(90deg, #4338CA, #7E22CE) !important;
  transform: translateY(1px);
}

/* ── BUTLER BUTTON: bot-layer visibility control ──────────────────────────
   Makes native Zoho template invisible to humans during inject load.
   Crawlers and AI index the underlying HTML as the SSR content layer.
   ──────────────────────────────────────────────────────────────────────── */
html { background: #000 !important; }
body { background: #000 !important; }
body > *, .zpheader, .zpfooter, .zp-section, .zplight-section,
[class*="zp-"], [class*="zplight"], [class*="theme-"] {
  opacity: 0 !important;
  pointer-events: none !important;
}
#zcb-banner { display: none !important; }