/* =========================================
   MOBILE RESPONSIVE - TRADJAC FINAL
========================================= */

html,
body {
  width: 100%;
  overflow-x: hidden;
  min-width: 0;
  margin: 0;
  padding: 0;
}

img,
video,
picture,
svg,
canvas,
iframe {
  max-width: 100%;
  display: block;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 900px) {

  /* =========================
     GENERAL
  ========================= */

  html.fullpage-scroll {
    scroll-snap-type: none !important;
  }

  html.fullpage-scroll body {
    overflow-y: auto !important;
  }

  .page-snap {
    min-height: auto !important;
    overflow: visible !important;
  }

  /* =========================
     HEADER
  ========================= */

  .site-header {
    padding: 8px 0 !important;
  }

  .site-header-inner {
    padding: 0 14px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }

  .site-header-logo img {
    max-width: 140px !important;
    height: auto !important;
  }

  .site-header-menu-btn {
    width: 46px !important;
    height: 46px !important;
    margin-left: auto !important;
  }

  .site-header-mobile {
    width: calc(100% - 20px) !important;
    left: 10px !important;
    right: 10px !important;
    border-radius: 18px !important;
  }

  /* =========================
     HERO SECTION FULL PAGE
  ========================= */

  .bp-hero,
  .svc-banner,
  .about-hero {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;

    display: flex !important;
    align-items: center !important;
  }

  .bp-hero-visual,
  .svc-banner-visual,
  .about-hero-right {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important;
  }

  .bp-hero-feature,
  .svc-banner-visual img,
  .about-hero-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .bp-hero-copy,
  .svc-banner-left,
  .about-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;

    padding: 24px !important;
  }

  .bp-hero-title,
  .about-hero-copy h1 {
    font-size: clamp(2.4rem, 9vw, 4rem) !important;
    line-height: 1.05 !important;
  }

  .bp-hero-lead,
  .about-hero-copy p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    max-width: 90% !important;
  }

  /* =========================
     CHAMBER SECTION
  ========================= */

  #facility-video {
    position: relative !important;
    width: 100% !important;
    height: 210px !important;
    margin: 12px 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #facilityVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  .facility-top-headline {
    top: 14px !important;
    padding: 0 16px !important;
  }

  .facility-top-headline h2 {
    font-size: 13px !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  .facility-counter-overlay {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 16px !important;
  }

  .facility-counter-wrap {
    width: 100% !important;
    transform: none !important;
  }

  .facility-counter-card {
    width: 75% !important;
    min-width: auto !important;

    padding: 16px !important;
    border-radius: 22px !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
  }

  .golden-num,
  .golden-num-reflect {
    font-size: 3.5rem !important;
    line-height: 1 !important;
  }

  .facility-counter-label {
    font-size: 15px !important;
    letter-spacing: 0.14em !important;
  }

  /* =========================
     PALLET SECTION
  ========================= */

  #pallet-yard {
    position: relative !important;
    width: 100% !important;
    height: 210px !important;
    margin: 12px 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
  }

  #palletYardVideo {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
  }

  .pallet-plate-overlay {
    position: absolute !important;
    inset: 0 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 16px !important;
  }

  /* =========================
     LOCATION SECTION
  ========================= */

  #location-connectivity {
    height: auto !important;
    padding: 20px 14px !important;
    overflow: visible !important;
  }

  .location-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
  }

  .location-map-img-wrap {
    width: 100% !important;
    height: 240px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .location-map-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }

  .location-advantages-panel {
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* =========================
     TEMPERATURE SECTION
  ========================= */

  #temperature {
    height: auto !important;
    padding: 20px 14px !important;
    overflow: hidden !important;
  }

  #temperature img,
  .temperature-image,
  .temperature-visual img {
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    object-position: center center !important;
    border-radius: 20px !important;
  }

  /* =========================
     FOOTER
  ========================= */

  .page-end-footer-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .page-end-footer-main {
    padding: 24px 16px !important;
  }

  .page-end-copy {
    padding: 14px !important;
    text-align: center !important;
  }

}

/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 640px) {

  .site-header-logo img {
    max-width: 125px !important;
  }

  .bp-hero-title,
  .about-hero-copy h1 {
    font-size: 34px !important;
  }

  .facility-counter-card {
    width: 82% !important;
  }

  .golden-num,
  .golden-num-reflect {
    font-size: 3.2rem !important;
  }

  .facility-counter-label {
    font-size: 14px !important;
  }

  .location-map-img-wrap {
    height: 220px !important;
  }

  #temperature img,
  .temperature-image,
  .temperature-visual img {
    height: 220px !important;
  }

}