/* ── Hide mobile / unneeded elements ─────────────────── */
.header-tip,
.language-content,
.to-dlDetail,
.qr-code-wrapper,
.mobile {
  display: none !important;
}

/* ── Logo ────────────────────────────────────────────── */
.header-logo {
  display: block;
  height: 36px;
  width: auto;
  max-width: 140px;
}

.header .logo {
  background: none !important;
  width: auto !important;
  height: auto !important;
}

/* ── Fix hero content going behind fixed header ─────── */
/* header is height:0.8rem; push the bg content below it */
.bg.maxWidth {
  padding-top: 0.8rem !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Make wallet fill remaining height so it centres properly */
.bg.maxWidth > .wallet,
.bg .wallet {
  flex: 1;
}

/* ── Hero: fix mobile-banner to show desktop mockup ───── */
.mobile-banner {
  width: 42% !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: visible !important;
  margin-left: 0 !important;
  flex-shrink: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.mobile-banner .desktop-hero-visual {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  /* force visible despite .opacity{opacity:0} animation class */
  opacity: 1 !important;
}

/* Ensure hero items are vertically centred */
.bg .wallet,
.wallet {
  align-items: center !important;
  height: 100%;
  box-sizing: border-box;
}

.tronWallet {
  width: 55% !important;
  flex-shrink: 0;
}

/* ── Nav download button ─────────────────────────────── */
.home_nav_download_btn_wrapper {
  display: inline-flex !important;
  align-items: center;
}

/* ── Download buttons in hero ────────────────────────── */
.goto-download .tronlink-dl {
  display: inline-flex;
  align-items: center;
  margin: 0 10px 10px 0;
}