/*----------------------------------------------------------------
  RESPONSIVE FIX LAYER (light-touch)
  Load AFTER main.css on every page.

  Ye file ab sirf 2 kaam karti hai — baaki sab original design
  (fonts, spacing, images) bilkul pehle jaisa hi rahega:

  1. Logo hamesha 80px width par fixed rahega, har screen/zoom par.
  2. Header ka "navless gap" fix — jab desktop menu hide hota hai
     (zoom ya chhoti screen par), hamburger icon turant available
     rahega, taaki menu kabhi na-pahunch-ne-laayak na ho.
------------------------------------------------------------------*/

/* 1. LOGO — fixed height on every screen, header & footer identical --
   Only height is constrained; width is left auto so the image keeps
   its natural aspect ratio (this is how the footer logo already
   rendered correctly — forcing width too was squeezing the header
   logo and making it look smaller/different from the footer). */
.header-1 .logo img,
.header-1 .header-logo img,
.header-1 .header-logo-2 img,
.gt-footer-logo img {
  height: 80px !important;
  width: auto !important;
}

/* 2. HEADER NAV — close the navless gap ------------------------------
   Original theme: desktop menu hides below 1400px (meanScreenWidth
   in main.js) but the hamburger button used to appear only below
   991px — is beech (991px-1400px) koi bhi menu access nahi tha.
   Ye sirf us gap ko band karta hai, baaki header design same hai. */
@media (max-width: 1400px) {
  .header-1 .header-right .sidebar__toggle {
    display: block !important;
  }
}

/* 3. MENU WRAPPING FIX (compact, reference-style spacing) -------------
   Root cause: the theme's default gap between logo & menu (200px) and
   the margin on every menu item (45px) is very wide. Above 1400px the
   desktop menu shows in full, and depending on exact monitor width the
   total required space can exceed the available width, wrapping the
   nav onto a 2nd row. Tightening this spacing (closer to the reference
   layout shared) removes that risk at every screen size where the
   desktop menu is visible, and only affects spacing — no colors, fonts,
   or the submenu dropdown are touched. */
@media (min-width: 1400px) {
  .header-1 .header-left {
    gap: 45px !important;
  }
  .header-1 .header-main .main-menu ul li {
    margin-inline-end: 24px !important;
  }
  .header-1 .header-right {
    gap: 18px !important;
  }
}

/* 4. HEADER "BOOK NOW" BUTTON — smaller size --------------------------
   Only the header's Book Now button is affected; hero/page buttons
   using the same .gt-theme-btn class elsewhere are untouched. */
.header-1 .header-right .gt-theme-btn {
  padding: 12px 22px !important;
  font-size: 14px !important;
}

/* 5. MENU FIT — 992px se 1399px tak ---------------------------------
   meanScreenWidth ab 991px hai, isliye poora desktop menu ab 992px se
   hi dikhne lagta hai (pehle 1400px se). Is tang range me items ko
   compact karke ek hi line me fit kiya gaya hai, taaki koi bhi menu
   item cut ya hide na ho. 1400px aur usse upar wala spacing (point 3)
   bilkul waisa hi rahega — sirf yeh naya, tang wala range handle hota
   hai. Extra safety ke liye overflow-x: auto bhi diya hai, taaki agar
   kisi bahut hi tight width par sab kuch bilkul fit na ho, to menu
   cut/hide hone ki jagah halka sa scroll ho jaye, ek line me hi rahe. */
@media (min-width: 992px) and (max-width: 1399px) {
  .header-1 .header-main .main-menu ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
  }
  .header-1 .header-main .main-menu ul::-webkit-scrollbar {
    display: none !important;
  }
  .header-1 .header-main .main-menu ul li {
    margin-inline-end: 12px !important;
    flex: 0 0 auto !important;
  }
  .header-1 .header-main .main-menu ul li a {
    font-size: 13px !important;
    white-space: nowrap !important;
  }
  .header-1 .header-right .hero-button {
    display: none !important;
  }
}

/* 6. BANQUETS PAGE — image overlapping text fix -----------------------
   Root cause: ".gt-about-image" ke andar image ki max-width fixed px
   me set hai (370px / 600px, screen-size ke hisaab se). Kuch zoom
   levels par (jaise 150%) yeh fixed px value aur column ki actual
   render-hui width thodi mismatch ho jaati hai, jiski wajah se image
   apne column se bahar nikal kar side wale text ko cover kar leti hai
   (jaise "Host unforgettable..." ka "H" chup jaata hai).
   Fix: image ke column (.gt-about-images-item) par overflow hidden
   laga diya hai — ab image kabhi bhi apne column ki width se bahar
   nahi jaa sakti, chahe zoom kuch bhi ho, aur text hamesha saaf
   dikhega. Design/size/position bilkul same rahega. */
.gt-about-wrapper-3 .gt-about-images-item {
  overflow: hidden !important;
}