/* Luxe Car Rent — header alignment fix (all pages)
   1) logo never wraps under the menu on desktop (was: 1200–1365px, i.e. 1920px screens at 150% scaling)
   2) logo size scales smoothly (was: jumped to ~45px tall between 1550–1799px)
   3) dark header background always covers the full header height (bg.jpg is only 100px tall) */
.header-main { background-size: 100% 100%; }
@media (min-width: 1200px) {
  .header-main > .container-fluid > .row { flex-wrap: nowrap; }
  .header-main > .container-fluid > .row > .col-xl { min-width: 0; }
  .header-main > .container-fluid > .row > .col-auto.pl-0 { flex: 0 0 auto; }
  .header-main .logo-slogan { flex: 0 0 auto; white-space: nowrap; }
  html .header-main .navbar-brand {
    max-width: clamp(150px, 12.5vw, 250px);
    padding-right: 0; margin-right: 0; margin-left: clamp(10px, 1.4vw, 28px);
  }
  .header-main .navbar-brand img { display: block; width: 100%; height: auto; }
    .header-main .logo-slogan.lx-hide { display: none; }
  .header-main .yamm.lx-fitting > li > a { transition: none !important; }
  /* menu auto-fit (set by luxe-i18n.js when a language's labels are too long for the screen) */
  .header-main .yamm.lx-fit > li > a { font-size: var(--lx-fs) !important; padding-left: var(--lx-pad) !important; padding-right: var(--lx-pad) !important; }
  .header-main .yamm.lx-fit > li { padding-left: 0; padding-right: 0; }
}

/* small phones: phone number (+66 format) + logo + menu button stay on one row */
@media (max-width: 400px) {
  .header-main .logo-slogan { font-size: 15px; letter-spacing: -.01em; margin-top: 4px; white-space: nowrap; }
  .header-main .logo-slogan .ic { margin-right: 2px; }
  html .header-main .navbar-brand { max-width: 128px; }
  .header-main > .container-fluid > .row { flex-wrap: nowrap; }
  .header-main > .container-fluid > .row > .col-auto.pl-0 { flex: 0 1 auto; min-width: 0; }
}
@media (max-width: 340px) {
  .header-main .logo-slogan { font-size: 13.5px; }
  html .header-main .navbar-brand { max-width: 112px; }
}