/* ------------------------------------------------------------------
   Fixes applied while porting this landing page into the Next.js app.
   Kept in a separate file so the original style.css stays untouched.
   ------------------------------------------------------------------ */

/* --- Bottom floating strip: stop the CTA wrapping and overlapping --- */
.floating-menu {
  gap: 1.25rem;
  flex-wrap: nowrap;
  justify-content: space-between;
  max-width: 1200px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.85rem 1.5rem;
}

.floating-menu > a.thm-btn,
.floating-menu > a.button {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 12px 28px;
  line-height: 1.2;
}

.floating-menu > span {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}

.floating-menu-price {
  flex: 0 0 auto;
  white-space: nowrap;
}

.floating-menu-price span {
  font-size: 1.5rem !important;
}

.floating-menu-price p {
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .floating-menu {
    width: 94%;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .floating-menu > span {
    font-size: 0.85rem;
  }
}

/* --- Before / After cards: equal height ---
   Scoped to .afterclass only. The id #beforeAfterMasterclass is reused on the
   "Why Choose Us" cards too, and those sit in a nested .row - styling by id
   (or forcing display:flex on the columns) collapses that grid. Bootstrap rows
   are already flex with align-items:stretch, so the cards just need to fill. */
.services-one__single.afterclass,
.services-one__single.afterclass > .services-one__single-inner {
  height: 100%;
}

/* --- "Why Choose Us" cards: even height inside their own nested grid --- */
.services-one .col-xl-8 .row > [class*="col-"] > .services-one__single,
.services-one .col-xl-8 .row > [class*="col-"] > .services-one__single > .services-one__single-inner {
  height: 100%;
}

/* style.css caps these at max-height:300px, which fights the equal-height
   stretch and leaves the content stranded at the top of the taller cards.
   Lift the cap and centre the content instead. */
.services-one .col-xl-8 .row > [class*="col-"] > .services-one__single > .services-one__single-inner {
  overflow: visible;
  max-height: none;
  padding-bottom: 30px !important;
}

/* --- Footer: keep the contact row on a single line ---
   Deliberately minimal: the only real bug was the bare `&nbsp` in the markup
   (fixed in the component). Do NOT add flex-wrap here - the col-xl-3 column is
   too narrow and the Instagram icon drops to a second row. */
.site-footer__social {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 8px;
}

.site-footer__social .footer-widget__title {
  margin-bottom: 0;
  white-space: nowrap;
}

.footer-widget__timing .footer-widget__title-box p {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .site-footer__social {
    justify-content: center;
  }
}

/* --- Testimonial carousel: all slides the same height ---
   owl-carousel sizes each .owl-item to its own content, so cards end up ragged.
   Making the stage a flex row lets the items stretch to the tallest one. */
.testimonial-one__carousel .owl-stage {
  display: flex;
}

.testimonial-one__carousel .owl-item {
  display: flex;
  height: auto;
}

.testimonial-one__carousel .owl-item > *,
.testimonial-one__carousel .testimonial-one__single,
.testimonial-one__carousel .testimonial-one__single-inner {
  width: 100%;
  height: 100%;
}

/* Pin the author block to the bottom so the divider lines up across cards */
.testimonial-one__carousel .testimonial-one__single-inner {
  display: flex;
  flex-direction: column;
}

.testimonial-one__carousel .testimonial-one__bottom {
  margin-top: auto;
}

/* --- Top urgency strip on mobile ---
   style.css sets `header { gap: 10rem }`, which blows past the viewport on
   phones and strands the timer chip on its own line. */
@media (max-width: 767px) {
  header {
    gap: 0.5rem;
    flex-wrap: wrap;
    padding: 0.5rem 0.75rem;
    text-align: center;
  }

  header .header-line {
    font-size: 12px;
    line-height: 1.6;
    margin-bottom: 0;
  }

  .phone-timer {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    vertical-align: middle;
  }
}

/* --- Testimonials on mobile: tighter section, peeking next card, visible nav --- */
@media (max-width: 767px) {
  .testimonial-one {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .testimonial-one .section-title {
    margin-bottom: 24px;
  }

  /* One full card per view on phones - no peek, so give it the room. */
  .testimonial-one > .container {
    padding-left: 16px;
    padding-right: 16px;
    max-width: 100%;
  }

  .testimonial-one__carousel .testimonial-one__single-inner {
    padding: 24px 18px;
  }

  .testimonial-one__carousel .testimonial-one__text p {
    font-size: 15px;
    line-height: 1.65;
  }

  .testimonial-one__carousel .owl-nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
  }

  .testimonial-one__carousel .owl-nav button.owl-prev,
  .testimonial-one__carousel .owl-nav button.owl-next {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #342005 !important;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
  }
}

/* --- "Why Choose Us" grid: no vertical gutter between the rows ---
   The nested .row only carries horizontal gutters, so the 2x2 grid's two rows
   sit flush on desktop and the stacked cards touch on mobile. row-gap fixes
   both at once (Bootstrap rows are flex-wrap containers). */
.services-one .col-xl-8 > .row {
  --bs-gutter-x: 30px;
}

/* Same gutter between the award card and the 2x2 grid beside it */
.services-one > .container > .row {
  --bs-gutter-x: 30px;
}

/* The cards are height:100%, so any margin on the card itself spills outside
   the column instead of pushing the next row down. The vertical gap has to come
   from the COLUMN's padding - height:100% then resolves against the column's
   content box, leaving a real gap. */
.services-one .col-xl-8 > .row > [class*="col-"] {
  padding-bottom: 30px;
}

.services-one .col-xl-8 > .row > [class*="col-"] > .services-one__single {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .services-one .col-xl-8 > .row > [class*="col-"] {
    padding-bottom: 24px;
  }
}