/* Surgical overrides: the app's Tailwind globals define .container and set a
   global font; Bootstrap 3 (legacy theme) needs its own behaviour back.
   Loaded last so it wins on equal specificity. */
.legacy-home .container {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}
.legacy-home,
.legacy-home p,
.legacy-home li,
.legacy-home span,
.legacy-home div {
  font-family: Poppins, sans-serif;
}
.legacy-home img { max-width: 100%; height: auto; }

/* The legacy theme drove these with slick.js. That JS belonged to the old panel
   and is gone, so the slides stacked into one very long column. Render them as a
   responsive grid instead — same content, no jQuery/slick payload. */
.legacy-home .promo-carousel,
.legacy-home .promo-carousel2,
.legacy-home .pannel-services__slider {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: stretch;
}
.legacy-home .promo-carousel > .item,
.legacy-home .promo-carousel2 > .item,
.legacy-home .pannel-services__slider > * {
  width: auto;
  max-width: none;
  margin: 0;
  float: none;
}

/* The app's off-canvas notification panel is a fixed element parked at
   translateX(384px). On this page it stretches the root scroll area (1540px vs
   1440px viewport), clipping content on the right. Clip at the root, homepage only. */
html:has(.legacy-home) { overflow-x: hidden; }

/* Exactly four feature cards: 4-up on desktop instead of 3+1, 2-up on tablet. */
@media (min-width: 1200px) {
  .legacy-home .pannel-services__slider { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .legacy-home .pannel-services__slider { grid-template-columns: repeat(2, 1fr); }
}

/* Tailwind ships a .collapse utility (visibility: collapse). Bootstrap uses the
   same class name for the navbar menu and the FAQ accordion, so both rendered
   invisible. Scope the repair to this page. */
.legacy-home .collapse { visibility: visible; }

/* No bootstrap JS on this page, so the accordion cannot be toggled.
   Show every answer instead of leaving 11 of 12 permanently shut. */
.legacy-home .panel-collapse { display: block; height: auto; }
.legacy-home .panel-title > a { cursor: default; text-decoration: none; }
.legacy-home .panel-body { padding-top: 6px; }

/* The theme's floating WhatsApp button lost its position:fixed rule, so it flowed
   inline as a blank 120px strip below the footer. Pin it bottom-LEFT — the app's
   own notification bell already owns bottom-right. */
.legacy-home .integration-fixed__bottom-right {
  position: fixed; left: 24px; bottom: 24px; z-index: 40; width: auto;
}

/* The hamburger needs bootstrap JS to open the menu, and there is none here.
   Below 768px, drop the toggle and let the nav links wrap instead. */
@media (max-width: 767px) {
  .legacy-home .navbar-toggle { display: none; }
  .legacy-home .navbar-collapse {
    display: block; height: auto; max-height: none;
    border-top: 0; box-shadow: none; padding: 0;
  }
  .legacy-home .navbar-nav { margin: 6px 0; display: flex; flex-wrap: wrap; justify-content: center; }
  .legacy-home .navbar-nav > li { float: none; }
  .legacy-home .navbar-nav > li > a { padding: 6px 10px; }
}

/* On mobile the theme parks .navbar-nav as a fixed off-canvas drawer at top:-812px
   (which also leaked a 6px orange strip above the header). No JS to slide it in,
   so flatten it into a normal wrapped row. */
@media (max-width: 767px) {
  .legacy-home .navbar-nav {
    position: static; top: auto; left: auto; right: auto;
    height: auto; background: transparent; flex-direction: row;
  }
}
@media (max-width: 767px) {
  /* drawer links were white for an orange background; header is white here */
  .legacy-home .navbar-nav > li > a { color: #072a23; }
}

@media (max-width: 767px) {
  /* theme sets these white !important for the orange drawer */
  .legacy-home .navbar-nav > li > a,
  .legacy-home .navbar-nav > li > a:hover,
  .legacy-home .navbar-nav > li > a:focus { color: #072a23 !important; background: transparent !important; }
  /* header is position:fixed and now taller than the theme assumed, so it covered
     the top of the hero. Let it sit in normal flow on small screens. */
  .legacy-home nav.header { position: static; }
}

@media (max-width: 767px) {
  /* keep the links on their own rows instead of wrapping around the floated logo */
  .legacy-home .navbar-collapse { clear: both; }
  .legacy-home .navbar-header { float: none; }
}

@media (max-width: 767px) {
  /* header row is a flex: logo | nav | auth. Stack it instead of squeezing. */
  .legacy-home nav.header .container > .d-flex { flex-wrap: wrap; justify-content: center; }
  .legacy-home nav.header .navbar-header { width: 100%; text-align: center; }
  .legacy-home nav.header .navbar-collapse { width: 100%; }
  /* theme hid the Sign In / Sign Up pair because the off-canvas drawer carried
     its own copy. The drawer is gone, so these are the only ones left. */
  .legacy-home nav.header .inline-buttons { display: flex !important; }
}
@media (max-width: 767px) {
  .legacy-home nav.header .inline-buttons > a { display: flex !important; }
  .legacy-home nav.header .inline-buttons { gap: 10px; }
}