/* Page-specific styles for solution-life-insurance-customer-ai-store */
/* Add overrides here — never edit compat.css for page-specific changes */

/* HERO: the artwork column and the copy column stacked, and the family photo
   rendered at full column width, so the first screen was nothing but image. */
.container.mt50.mh > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.container.mt50.mh > .row > .imgalig {
  width: 45%;
  min-width: 0;
}

.container.mt50.mh > .row > .disflx {
  width: 55%;
  min-width: 0;
}

.container.mt50.mh .imgalig img {
  width: auto !important;
  max-width: 100%;
  max-height: 420px;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .container.mt50.mh > .row > .imgalig,
  .container.mt50.mh > .row > .disflx {
    width: 100%;
  }

  .container.mt50.mh .imgalig img {
    max-height: 300px;
  }
}

/* REVIEW BAND: the copy in this band is white, so the teal ground has to
   stay. Just tighten the spacing and let the artwork run bigger. */
.container-fluid[style*="115C7A"]:has(img) {
  margin-top: 2rem !important;
  padding-block: 1.5rem;
}

.container-fluid[style*="115C7A"] .spacer {
  display: none;
}

.container-fluid[style*="115C7A"] img {
  max-height: 640px;
  width: auto;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  margin-inline: auto;
}

/* .algcont is in compat.css's shared card list, so the review copy column was
   painted as a solid WHITE card on top of the teal band - which is why the
   band showed as a blank white block and its white text vanished. */
.container-fluid[style*="115C7A"] .algcont {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.container-fluid[style*="115C7A"] > .row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem 0;
}

.container-fluid[style*="115C7A"] > .row > [class*="col-lg-6"] {
  width: 50%;
  min-width: 0;
  padding-inline: 1rem;
}

@media (max-width: 900px) {
  .container-fluid[style*="115C7A"] > .row > [class*="col-lg-6"] {
    width: 100%;
  }
}

.container-fluid[style*="115C7A"] .mt-5 {
  margin-top: 0 !important;
}

/* an empty teal container sat between the support cards and the footer as a
   stray coloured strip */
.container-fluid[style*="115C7A"]:not(:has(img, h1, h2, h3, h4, h5, p, span, a, button)) {
  display: none;
}

/* WHY CHOOSE US: the hand-tuned inline margin-tops staggered the six tiles
   into an uneven grid; level them and cap the oversized icons. */
.container.mt-5.mmt-62.mmh .card {
  margin-top: 0 !important;
}

.container.mt-5.mmt-62.mmh .card > img {
  width: 56px !important;
  height: auto;
  padding-left: 0 !important;
}

/* NEED HELP: match the two support cards to the same height, and close the
   dead space this section carried above it */
.container[style*="margin-top: 70px"] {
  margin-top: 2rem !important;
}

.container[style*="margin-top: 70px"] .col-md-4 > .card {
  height: 100%;
}

.container[style*="margin-top: 70px"] .col-md-4 {
  margin-top: 1.5rem !important;
}

/* the Contact Now / Call Now buttons rendered as dark navy text on the dark
   teal fill, so the labels were barely readable */
.card .btn.btn-primary {
  background-color: #115C7A !important;
  border-color: #115C7A;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: .06em;
  border-radius: 6px;
}

.card .btn.btn-primary:hover {
  background-color: #0d4a62 !important;
  color: #fff !important;
}