/* responsive.css - media-query overrides extracted from page-specific inline styles */

@media only screen and (max-width: 767px) {
  div#dt-1e91cac img {
    width: 172px;
  }
}

/* Mobile header: pin to top of viewport on scroll instead of scrolling away
   with the page. Matches the theme's own hamburger-nav breakpoint (1280px).
   #header-wrapper and #header both render at 0 height on every page (their
   content, .elementor-top-section.header-on-slider, is always absolutely
   positioned via the theme's own header.css - it's a permanent transparent
   overlay-over-hero design, not something conditional we're breaking), so
   the fixed positioning goes on the wrapper but the actual painted bar
   (background + stacking) has to go on that inner section, the only
   descendant with real box height. It needs an explicit dark background
   since the nav text/logo are white (designed to sit on the hero photo) -
   without one they'd be unreadable once the header floats over plain page
   content. #header itself is forced back to `relative` because
   header-top-absolute (home/slider pages) would otherwise fight the
   wrapper's fixed positioning. main.js sets --mobile-header-height and the
   body padding so content doesn't jump. */
@media only screen and (max-width: 1280px) {
  #header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    margin: 0;
    z-index: 20;
  }
  #header-wrapper #header {
    position: relative !important;
  }
  #header-wrapper .elementor-top-section.header-on-slider {
    background-color: var(--DTSecondaryColor);
  }
  body {
    padding-top: var(--mobile-header-height, 0px);
  }
}

/* Desktop-only: pre-existing gap above the breadcrumb banner on every inner
   page (About, Packages, etc.). #header-wrapper carries a permanent
   `margin-bottom: 30px` (vendor header.css) but renders at 0 height (its
   content is always absolutely positioned - see above), so the visible
   header row still paints flush at the very top while that 30px margin
   just pushes the next sibling - the breadcrumb section - down, exposing
   30px of bare white body background between the viewport top and the
   breadcrumb's dark backdrop. The home page never shows this because its
   hero section has its own -100px margin-top (baked into the page's
   Elementor CSS) that happens to swallow it; the breadcrumb template has no
   such compensation. Only needed above the mobile breakpoint: below it
   #header-wrapper is fixed, which takes it out of flow entirely, so its
   margin no longer pushes the breadcrumb down in the first place. */
@media only screen and (min-width: 1281px) {
  .main-title-section-wrapper {
    margin-top: -30px;
  }
}

/* Elementor container lazy-load: skip background-image loading below the fold on short viewports */
@media screen and (max-height: 1024px) {
  .e-con.e-parent:nth-of-type(n + 3):not(.e-lazyloaded):not(.e-no-lazyload),
  .e-con.e-parent:nth-of-type(n + 3):not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: none !important;
  }
}
@media screen and (max-height: 640px) {
  .e-con.e-parent:nth-of-type(n + 2):not(.e-lazyloaded):not(.e-no-lazyload),
  .e-con.e-parent:nth-of-type(n + 2):not(.e-lazyloaded):not(.e-no-lazyload) * {
    background-image: none !important;
  }
}