/* ==========================================================================
   Home page (Home 04) — section-wise styles to match Figma (frame 220:443)

   Sections:
   1. Hero (Figma node 39:10728) — .home-hero-section
   2. Counters — .tx_count_box (Barsi tx_count_box widget, style_1)

   Reference desktop is the 1920px Figma frame; type scales down with
   clamp() so 13"/14" laptops (1280–1536px) keep the same proportions.
   ========================================================================== */

/* Vertical rhythm between sections: 80px desktop / 60px tablet / 40px mobile.
   At a white↔colored boundary the gap is split half-and-half (white side +
   inside the colored block); full-bleed image sections take the whole gap on
   the white side. */
:root {
  --mrb-sec-gap: 80px;
  --mrb-sec-gap-half: 40px;
}
@media (max-width: 1199px) {
  :root {
    --mrb-sec-gap: 60px;
    --mrb-sec-gap-half: 30px;
  }
}
@media (max-width: 767px) {
  :root {
    --mrb-sec-gap: 40px;
    --mrb-sec-gap-half: 20px;
  }
}

/* --------------------------------------------------------------------------
   1. HERO — .home-hero-section
   Figma: 1920x760 · bg #f8f8f9 · text column 716px aligned to the 1420px
   content box · image column bleeds to the right viewport edge · overlaid
   carousel dots (orange active) · orange button with crop-mark corners.
   -------------------------------------------------------------------------- */

/* Full-bleed layout: keep the text aligned to the 1420px content box while
   letting the image column run to the right edge of the viewport. */
.home-hero-section {
  background-color: #f8f8f9 !important;
}
.elementor-section.elementor-section-boxed.home-hero-section > .elementor-container {
  max-width: 100%;
  padding-left: max(20px, calc((100% - 1520px) / 2));
}

@media (min-width: 992px) {
  .home-hero-section .elementor-column:first-child {
    width: 47%;
  }
  .home-hero-section .elementor-column:last-child {
    width: 53%;
  }
}

/* Kill Elementor's default 10px column-gap padding so the image column is
   truly flush with the viewport edge. */
.home-hero-section .elementor-column > .elementor-widget-wrap.elementor-element-populated {
  padding: 0;
}

/* Text column: vertically centered, 90px gap to the image (Figma spacing) */
.home-hero-section .elementor-column:first-child > .elementor-widget-wrap {
  align-content: center;
  padding-right: clamp(30px, 4.7vw, 90px);
}

/* Heading (tx_heading style_3): Albert Sans 700 70/72 #1a1a1a, orange span */
.home-hero-section .tx-heading-section .tx-subTitle {
  display: none; /* subtitle unused in this design */
}
.home-hero-section .tx-heading-section .tx-title {
  max-width: 716px;
  margin: 0 0 26px;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(34px, 3.65vw, 70px);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: 0;
  text-transform: none;
  color: #1a1a1a;
}
/* Figma keeps "of" lowercase — undo the theme's per-word first-letter
   uppercasing applied to the GSAP SplitText character divs. */
.home-hero-section .wa-capitalize .split-line div div:nth-child(1) {
  text-transform: none;
}
.home-hero-section .tx-heading-section .tx-title span {
  color: #f5821f;
}

/* Sub-heading (tx_heading description): Albert Sans 500 22/26.4 #2d2d2d */
.home-hero-section .tx-heading-section .tx-description {
  margin: 0;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(17px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  color: #2d2d2d;
}

/* Paragraph: DM Sans 400 18/23.4 #666672, 695px wide */
.home-hero-section .elementor-widget-text-editor {
  max-width: 695px;
  margin: 32px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 400;
  line-height: 1.3;
  color: #666672;
}
.home-hero-section .elementor-widget-text-editor p {
  margin: 0;
}

/* Button: solid #f5821f, Inter 500 16 white, 191x51, crop-mark corners.
   Elementor's optimized DOM omits .elementor-widget-container, so the
   crop-mark pseudo-elements sit on the widget element itself. */
.home-hero-section .elementor-widget-button {
  position: relative;
  display: inline-block;
  width: auto;
  margin-top: clamp(28px, 2.1vw, 40px);
  /* Collapse the inline-block baseline gap so the crop-mark lines sit
     exactly on the button's edges (the <a> otherwise leaves descender
     space below itself, pushing the bottom line a few px down). */
  line-height: 0;
}
.home-hero-section .elementor-widget-button .elementor-button,
.home-hero-section .elementor-widget-button .elementor-widget-container {
  vertical-align: top;
}
.home-hero-section .elementor-widget-button .elementor-button {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background-color: #f5821f;
  border-radius: 0;
  padding: 16px 38px;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  transition: 0.8s var(--bs-cube-2, cubic-bezier(0.19, 1, 0.22, 1));
}
/* Hover: exact clone of the theme's .bs-pr-btn-2 fill — four 50%x50%
   quadrant boxes, one scaling out of each corner (theme .box-1..box-4).
   The a tag and its content-wrapper span provide the four pseudo slots.
   Hero rests orange, so the incoming fill is dark. */
.home-hero-section .elementor-widget-button .elementor-button::before,
.home-hero-section .elementor-widget-button .elementor-button::after,
.home-hero-section .elementor-widget-button .elementor-button-content-wrapper::before,
.home-hero-section .elementor-widget-button .elementor-button-content-wrapper::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background: #2d2d2d;
  z-index: 0;
  transform: scale(0);
  transition: 0.4s var(--bs-cube-2, cubic-bezier(0.1, 0.75, 0.25, 1));
}
.home-hero-section .elementor-widget-button .elementor-button::before {
  top: 0;
  left: 0;
  transform-origin: left top;    /* .box-1 */
}
.home-hero-section .elementor-widget-button .elementor-button::after {
  top: 0;
  right: 0;
  transform-origin: right top;   /* .box-2 */
}
.home-hero-section .elementor-widget-button .elementor-button-content-wrapper::before {
  bottom: 0;
  right: 0;
  transform-origin: right bottom; /* .box-3 */
}
.home-hero-section .elementor-widget-button .elementor-button-content-wrapper::after {
  bottom: 0;
  left: 0;
  transform-origin: left bottom;  /* .box-4 */
}
.home-hero-section .elementor-widget-button .elementor-button:hover {
  background-color: #f5821f;
  color: #ffffff;
}
.home-hero-section .elementor-widget-button .elementor-button:hover::before,
.home-hero-section .elementor-widget-button .elementor-button:hover::after,
.home-hero-section .elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper::before,
.home-hero-section .elementor-widget-button .elementor-button:hover .elementor-button-content-wrapper::after {
  transform: scale(1);
}
/* Keep the label above the fill boxes */
.home-hero-section .elementor-widget-button .elementor-button-content-wrapper {
  position: static;
}
.home-hero-section .elementor-widget-button .elementor-button-text {
  position: relative;
  z-index: 1;
  display: inline-block;
  transition: 0.4s var(--bs-cube-2, cubic-bezier(0.1, 0.75, 0.25, 1));
}
.home-hero-section .elementor-widget-button .elementor-button:hover .elementor-button-text {
  transform: translateY(-2px);
}
/* Crop-mark decoration: horizontal lines along top/bottom edges extended
   past the corners, vertical lines along left/right edges likewise. */
.home-hero-section .elementor-widget-button::before,
.home-hero-section .elementor-widget-button::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.home-hero-section .elementor-widget-button::before {
  top: 0;
  bottom: 0;
  left: -14px;
  right: -14px;
  border-top: 1px solid #cfcfd4;
  border-bottom: 1px solid #cfcfd4;
}
.home-hero-section .elementor-widget-button::after {
  top: -14px;
  bottom: -14px;
  left: 0;
  right: 0;
  border-left: 1px solid #cfcfd4;
  border-right: 1px solid #cfcfd4;
}

/* Image carousel: full column, 760px tall at 1920 (39.6vw), cover-cropped,
   dots overlaid at the bottom center of the image. */
.home-hero-section .elementor-widget-image-carousel > .elementor-widget-container,
.home-hero-section .elementor-image-carousel-wrapper {
  height: 100%;
}
.home-hero-section .elementor-image-carousel-wrapper {
  position: relative;
}
.home-hero-section .swiper-slide-inner {
  height: 100%;
}
.home-hero-section .swiper-slide-image {
  width: 100%;
  height: clamp(420px, 39.6vw, 760px);
  object-fit: cover;
}
/* Laptops & desktops: header (104px) + hero fill exactly 100vh. The image
   column drives the section height; the text column stretches and centers. */
@media (min-width: 992px) {
  .home-hero-section .swiper-slide-image {
    height: max(480px, calc(100vh - 104px));
  }
}
.home-hero-section .elementor-image-carousel-wrapper .swiper-pagination {
  position: absolute;
  bottom: 22px !important;
  left: 0;
  right: 0;
  z-index: 2;
}
.home-hero-section .swiper-pagination-bullet {
  width: 14px;
  height: 14px;
  margin: 0 4px;
  background: #ededed;
  opacity: 1;
}
.home-hero-section .swiper-pagination-bullet-active {
  background: #f5821f;
}

/* --------------------------------------------------------------------------
   2. COUNTERS — .counter-container (Figma node 35:9312)
   1920x340 · white bg · 95px top/bottom padding · 4 stats spread across the
   1339px content box, separated by orange asterisks (last one hidden).
   Numbers: Albert Sans 700 80/120 #f5821f · labels: Albert Sans 500 22 #081421.
   -------------------------------------------------------------------------- */

.counter-container .bs-counter-2-area {
  padding: var(--mrb-sec-gap) 0;
  background: #ffffff;
}
.counter-container .bs-counter-2-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.counter-container .bs-counter-2-item {
  text-align: center;
}
.counter-container .bs-counter-2-item .item-number {
  margin: 0;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(44px, 4.16vw, 80px);
  font-weight: 700;
  line-height: 1.5;
  color: #f5821f;
}
.counter-container .bs-counter-2-item .item-disc {
  margin: 4px 0 0;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(17px, 1.15vw, 22px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: lowercase;
  color: #081421;
  white-space: nowrap;
}
.counter-container .bs-counter-2-wrap .shape {
  margin: 0;
  font-family: "Space Grotesk", "Albert Sans", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  color: #f5821f;
}
.counter-container .bs-counter-2-wrap .shape:last-child {
  display: none;
}

@media (max-width: 767px) {
  .counter-container .bs-counter-2-wrap {
    justify-content: center;
    gap: 12px 32px;
  }
  .counter-container .bs-counter-2-wrap .shape {
    display: none;
  }
  .counter-container .bs-counter-2-item {
    flex: 0 0 40%;
  }
}

/* --------------------------------------------------------------------------
   3. VIDEO — .video-section (Figma node 35:9127)
   Full-bleed image 1920x718 with centered play button (theme widget).
   -------------------------------------------------------------------------- */

.video-section .bs-video-5-area {
  height: clamp(320px, 37.4vw, 718px);
}
.video-section .bs-video-5-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   4. ABOUT — .aboutus-container (Figma node 34:2340)
   White bg · eyebrow "about us" + hairline · H2 54/64.8 · two paragraphs
   DM Sans 18 #393939 (709px) · white "know about us" button with crop marks ·
   Vision/Mission cards · right: 570x710 steel image bleeding 100px past the
   content box, dark pipes tile with orange offset frame, sketch watermark.
   -------------------------------------------------------------------------- */

.aboutus-container .bs-about-4-area {
  padding: var(--mrb-sec-gap) 0;
  background: #ffffff;
}

/* Eyebrow */
.aboutus-container .bs-subtitle-4 {
  margin: 0 0 0;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3e3e6;
}
.aboutus-container .bs-subtitle-4 .text {
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: #f5821f;
}

/* Figma keeps paragraphs/button flush with the heading (no theme indent) */
.aboutus-container .bs-about-4-content .inner-div {
  padding-left: 0;
}

.aboutus-container .bs-about-4-wrap {
  position: relative;
  margin-top: 30px;
}

/* Heading */
.aboutus-container .bs-about-4-content .title {
  margin: 0 0 24px;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(32px, 2.8vw, 54px);
  font-weight: 700;
  line-height: 1.2;
  text-transform: none;
  color: #060606;
}

/* Paragraphs (two, separated with <br><br> in the widget description) */
.aboutus-container .bs-about-4-content .disc {
  max-width: 709px;
  margin: 0;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(15px, 0.94vw, 18px);
  font-weight: 400;
  line-height: 1.3;
  color: #393939;
}

/* Button — white with crop-mark corners, dark text */
.aboutus-container .btn-wrap {
  margin-top: 32px;
}
.aboutus-container .bs-pr-btn-2 {
  background: #ffffff;
}
.aboutus-container .bs-pr-btn-2 .text,
.aboutus-container .bs-pr-btn-2 .text::before,
.aboutus-container .bs-pr-btn-2 .text::after {
  font-family: "Albert Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-transform: capitalize;
  color: #060606;
}

/* Vision / Mission cards */
.aboutus-container .bs-about-4-feature {
  display: flex;
  gap: 59px;
  margin-top: 73px;
}
.aboutus-container .bs-about-4-feature-single {
  max-width: 296px;
}
.aboutus-container .bs-about-4-feature-single .item-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #f5f5f5;
}
.aboutus-container .bs-about-4-feature-single .item-icon i {
  font-size: 40px;
  line-height: 1;
  color: #f5821f;
}
/* Thin offset lines beside the tile — orange in Figma, not gray */
.aboutus-container .bs-about-4-feature-single .item-icon::after {
  width: 1px;
  height: 65px;
  right: -5px;
  top: 0;
  left: auto;
  border: 0;
  background: #fba45a;
  opacity: 1;
}
.aboutus-container .bs-about-4-feature-single .item-icon::before {
  width: 65px;
  height: 1px;
  left: 0;
  bottom: -5px;
  background: #fba45a;
  opacity: 1;
}
.aboutus-container .bs-about-4-feature-single .item-title {
  margin: 32px 0 0;
  font-family: "Albert Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.075;
}
.aboutus-container .bs-about-4-feature-single .item-title a {
  color: #060606;
  /* Widget outputs an empty-href link — Vision/Mission aren't clickable */
  pointer-events: none;
  cursor: default;
}
.aboutus-container .bs-about-4-feature-single .item-disc {
  margin: 12px 0 0;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #393939;
}

/* Sketch watermark between the two columns */
.aboutus-container .bs-about-4-content .illus {
  position: absolute;
  left: 561px;
  top: 268px;
  width: 604px;
  height: 267px;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}
.aboutus-container .bs-about-4-content .illus::after {
  content: "";
  position: absolute;
  left: -52px;
  top: 0;
  width: 984px;
  height: 328px;
  background: linear-gradient(120deg, rgba(255, 255, 255, 1) 2.8%, rgba(255, 255, 255, 0.5) 100%);
  pointer-events: none;
}
.aboutus-container .bs-about-4-content .illus img {
  position: absolute;
  left: -52px;
  top: 0;
  width: 984px;
  height: 328px;
  max-width: none;
  display: block;
}

/* Right column: photo + dark pipes tile with orange offset frame.
   Grid items need min-width:0 so a fixed-width child can never inflate the
   1fr track (which would push the text column past the viewport on mobile). */
.aboutus-container .bs-about-4-wrap > * {
  min-width: 0;
}
.aboutus-container .bs-about-4-img {
  width: 570px;
  max-width: 570px;
  height: 710px;
}
.aboutus-container .bs-about-4-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Dark tile (Figma 235:509): 285x375, orange #f5821f 24px INNER border on
   top+right only, pipes image stretched to ~76% width and anchored
   right/bottom over the #363636 fill (dark band stays visible on the left). */
.aboutus-container .bs-about-4-project {
  position: absolute;
  left: -74px;
  bottom: -28px;
  width: 285px;
  max-width: 285px;
  height: 375px;
  padding: 0;
  border: 0;
  border-top: 24px solid #f5821f;
  border-right: 24px solid #f5821f;
  background-color: #363636;
  /* Figma imageTransform: 76% crop of the source, offset 68% x / bottom y */
  background-size: 132% 105%;
  background-position: 68% 100%;
  background-repeat: no-repeat;
  background-clip: padding-box;
  z-index: 2;
}
.aboutus-container .bs-about-4-project .icon,
.aboutus-container .bs-about-4-project .title,
.aboutus-container .bs-about-4-project .disc {
  display: none;
}

@media (min-width: 1200px) {
  .aboutus-container .bs-about-4-right {
    position: absolute;
    top: 0;
    right: -100px;
    width: 570px;
  }
  .aboutus-container .bs-about-4-content {
    position: relative;
    z-index: 1;
    max-width: 709px;
  }

  /* The image column above is absolutely positioned, so it contributes no
     height and the grid row is sized by the (shorter) text column alone.
     The photo then hung past the bottom of the section and collided with
     the products section below it.

     Reserving the column's real height here — 710px photo + the 28px the
     dark tile is pulled below it (bottom: -28px) — lets the section grow
     to contain the image, so the standard section padding produces the
     normal 80px gap to the next section again. A min-height rather than a
     bottom padding, so it stays correct at every desktop width instead of
     being tuned for one: the overflow measured 24px at 1913px wide but
     95px at 1433px, and no single padding value fits both. */
  .aboutus-container .bs-about-4-wrap {
    min-height: 738px;
  }
}

@media (max-width: 1199px) {
  .aboutus-container .bs-about-4-content .illus {
    display: none;
  }
  .aboutus-container .bs-about-4-right {
    position: relative;
    margin-top: 0;
  }
  /* Tighten the gap between the Vision/Mission cards and the image. The
     30px top offset is a desktop-only device (it clears the illustration
     that is hidden above); dropping it keeps the heading-to-content gap
     matching the other sections on tablet and mobile. */
  .aboutus-container .bs-about-4-wrap {
    gap: 40px;
    margin-top: 0;
  }
  .aboutus-container .bs-about-4-img {
    width: 100%;
    max-width: 100%;
  }
  .aboutus-container .bs-about-4-project {
    left: 0;
    bottom: 0;
  }
}

@media (max-width: 767px) {
  .aboutus-container .bs-about-4-feature {
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
  }
  .aboutus-container .bs-about-4-img {
    height: auto;
  }
  .aboutus-container .bs-about-4-project {
    width: 220px;
    height: 290px;
  }
}

/* --- Hero: tablet & mobile (<992) — stacked, text first, full-bleed image */
@media (max-width: 991px) {
  .elementor-section.elementor-section-boxed.home-hero-section > .elementor-container {
    padding-left: 0;
  }
  .home-hero-section .elementor-column {
    width: 100%;
  }
  .home-hero-section .elementor-column:first-child > .elementor-widget-wrap {
    padding: 48px 30px 36px;
  }
  .home-hero-section .swiper-slide-image {
    height: clamp(320px, 48vw, 480px);
  }
  .home-hero-section .elementor-image-carousel-wrapper .swiper-pagination {
    bottom: 14px !important;
  }
  .home-hero-section .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
  }
}

/* --- Hero: small phones (<576) ------------------------------------------ */
@media (max-width: 575px) {
  .home-hero-section .elementor-column:first-child > .elementor-widget-wrap {
    padding: 40px 20px 32px;
  }
  .home-hero-section .tx-heading-section .tx-title {
    font-size: clamp(30px, 8.5vw, 34px);
  }
  .home-hero-section .tx-heading-section .tx-description {
    font-size: 17px;
  }
  .home-hero-section .elementor-widget-text-editor {
    margin-top: 20px;
    font-size: 15px;
    line-height: 1.45;
  }
  .home-hero-section .swiper-slide-image {
    height: clamp(280px, 62vw, 360px);
  }
  .home-hero-section .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }
}

/* --------------------------------------------------------------------------
   5. PRODUCTS — .product-listing-container (Figma node 76:2)
   Dark #2d2d2d section · eyebrow "products" white · left column: H2 54 white,
   two DM Sans 18/28 paragraphs · right: accordion — active white panel 481px
   (title 46 #000, image 381x354, desc 18 #363636) + six collapsed 84px tabs
   in light-gray steps with vertical dark titles · elbow image bottom-left.
   -------------------------------------------------------------------------- */

.product-listing-container .bs-services-4-area {
  padding: var(--mrb-sec-gap) 0 0;
  background-color: #2d2d2d;
}
.product-listing-container .bs-services-4-img {
  width: 285px;
  height: 338px;
  border: none;
}
/* White->dark boundary: split the gap equally (30+30 tablet, 20+20 mobile) */
@media (max-width: 1199px) {
  .aboutus-container .bs-about-4-area {
    padding-bottom: var(--mrb-sec-gap-half);
  }
  .product-listing-container .bs-services-4-area {
    padding-top: var(--mrb-sec-gap-half);
  }
  /* Below 1200px every .elementor-container takes the shared --mrb-gutter
     (see spacing.css), which was insetting the DARK BACKGROUND too — the
     band rendered 24px short of each edge with a white sliver either side.
     Pull the painted block back out to the viewport edges and re-apply the
     gutter as its own padding, so the colour is full-bleed while the content
     stays on the same left edge as every other section. */
  .product-listing-container .bs-services-4-area {
    margin-left: calc(-1 * var(--mrb-gutter));
    margin-right: calc(-1 * var(--mrb-gutter));
    padding-left: var(--mrb-gutter);
    padding-right: var(--mrb-gutter);
  }
}
.product-listing-container .bs-subtitle-4 .icon img[src=""] {
  display: none;
}

/* Figma column split: 592px copy + accordion bleeding right, ~43px gap.
   Below 1400px the side-by-side track leaves the active panel too narrow,
   so keep the theme's stacked single-column layout until 1400px. */
@media (min-width: 1200px) and (max-width: 1399px) {
  .product-listing-container .bs-services-4-wrap {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 1400px) {
  .product-listing-container .bs-services-4-wrap {
    grid-template-columns: minmax(0, 592px) minmax(0, 1fr);
    gap: 43px;
  }
}

/* Left column copy */
.product-listing-container .bs-services-4-content .title {
  margin-bottom: 25px;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(34px, 2.8vw, 54px);
  font-weight: 700;
  line-height: 1.2;
}
.product-listing-container .bs-services-4-content .disc {
  max-width: 575px;
  margin-bottom: 0;
  opacity: 1;
  font-family: "DM Sans", sans-serif;
  font-size: clamp(15px, 0.94vw, 18px);
  line-height: 1.55;
  color: #ffffff;
}

/* Accordion — fluid so it fits every width ≥992 instead of the fixed Figma
   widths (active 481 / tabs 84 = 985px total, which only fits at ~1920).
   Tabs get a clamped width, the active panel takes the remaining track and
   its media/copy cap at the Figma sizes. Below 992px the theme stacks every
   panel full-width (open), so no width overrides there. */
@media (min-width: 992px) {
  .product-listing-container .bs-services-4-item-single {
    flex: 0 0 auto;
    width: clamp(52px, 3.6vw, 84px);
    padding: 48px 14px;
  }
  .product-listing-container .bs-services-4-item-single:is(.active) {
    flex: 1 1 auto;
    width: auto;
    padding: 48px clamp(24px, 2.5vw, 50px);
  }
  .product-listing-container .bs-services-4-item-single .main-img {
    width: 100%;
    max-width: 381px;
  }
  .product-listing-container .bs-services-4-item-single .active-content .disc {
    max-width: 381px;
  }
  .product-listing-container .bs-services-4-item-single .title {
    margin-bottom: clamp(32px, 3.4vw, 65px);
  }
}
/* At full desktop the track is wide enough — pin the active panel back to
   the Figma 481px so the composition matches the reference frame. */
@media (min-width: 1800px) {
  .product-listing-container .bs-services-4-item-single:is(.active) {
    max-width: 481px;
  }
}
/* Let the accordion bleed toward the right viewport edge on laptops the way
   the theme already does ≥1800 (margin-right:-296px), reclaiming the space
   outside the 1420px content box for the panel. */
@media (min-width: 1200px) and (max-width: 1799px) {
  .product-listing-container .bs-services-4-wrap {
    margin-right: calc(-1 * max(0px, (100vw - 1460px) / 2));
  }
}

/* Active panel */
.product-listing-container .bs-services-4-item-single .title {
  margin-bottom: 65px;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(30px, 2.4vw, 46px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-transform: none;
}
.product-listing-container .bs-services-4-item-single .title a {
  color: #000000;
}
.product-listing-container .bs-services-4-item-single .main-img {
  max-width: 381px;
  height: 354px;
  margin-bottom: 34px;
}
.product-listing-container .bs-services-4-item-single .active-content .disc {
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #363636;
}

/* Collapsed tabs: light-gray ramp, dark title-case labels, no grayscale */
.product-listing-container .bs-services-4-item-single .default-content {
  padding: 68px 12px 72px;
}
.product-listing-container .bs-services-4-item-single:nth-child(2) .default-content { background-color: #e8e8e8; }
.product-listing-container .bs-services-4-item-single:nth-child(3) .default-content { background-color: #dfdfdf; }
.product-listing-container .bs-services-4-item-single:nth-child(4) .default-content { background-color: #d4d4d4; }
.product-listing-container .bs-services-4-item-single:nth-child(5) .default-content { background-color: #cbcbcb; }
.product-listing-container .bs-services-4-item-single:nth-child(6) .default-content { background-color: #bfbfbf; }
.product-listing-container .bs-services-4-item-single:nth-child(7) .default-content { background-color: #ababab; }
.product-listing-container .bs-services-4-item-single .title-2 {
  font-family: "Albert Sans", sans-serif;
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #2d2d2d;
}
.product-listing-container .bs-services-4-item-single .img-2 {
  width: clamp(36px, 3.1vw, 60px);
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  filter: none;
}

/* --------------------------------------------------------------------------
   6. MANUFACTURING — .manufacture-container (Figma node 34:7237)
   Plain white bg · orange eyebrow with hairline · H2 54 #1a1a1a · four
   staggered outlined cards (1px #e3e3e6) with titles 22/26.4, desc 18/23.4
   and solid #ededed 95px numbers bottom-right.
   -------------------------------------------------------------------------- */

.manufacture-container .bs-work-5-area {
  padding: var(--mrb-sec-gap) 0;
  background-image: none !important;
  background-color: #ffffff;
}
/* Eyebrow: Figma shows an uppercase label with a 790px hairline running
   under it. The theme's inline-flex display shrinks the border to the text
   width and `.wa-capitalize { text-transform: unset !important }` kills the
   uppercasing, so both need explicit overrides here. */
.manufacture-container .bs-subtitle-5 {
  display: block;
  max-width: 790px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e3e3e6;
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase !important;
  color: #f5821f;
}
.manufacture-container .bs-subtitle-5 .split-line div div {
  text-transform: uppercase;
}
.manufacture-container .bs-work-5-sec-title .tx-title {
  /* margin-top: 46Nopx; */
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(34px, 2.8vw, 54px);
  font-weight: 700;
  color: #1a1a1a;
}
/* Gap from the section title block down to the four step cards. The widget
   ships an mb-90 utility class on the wrapper; 40px here replaces it. */
.manufacture-container .bs-work-5-sec-title {
  margin-bottom: 40px;
}
.manufacture-container .bs-work-5-card {
  border: 1px solid #e3e3e6;
  padding: 48px 42px;
}

/* Staggered card row — desktop only.
   Figma draws the four cards on two alternating baselines: 1 and 3 raised,
   2 and 4 dropped, a 56px step (Home 34:7237 and Infrastructure 105:371 both
   use it, and both render from .manufacture-container, so one rule serves
   them).

   The theme already means to do this — it tags the cards .has-ani-up /
   .has-ani-down and writes an inline transform of exactly ±28px — but our
   fade-in (animation.css) ends its keyframe on `transform: none`, and an
   animation's filled value beats both the inline style and any stylesheet
   rule. So the offset is set with the independent `translate` property, which
   the fade never touches; the two compose instead of fighting. !important is
   needed only to beat the theme's inline `translate: none`.

   `translate` does not affect layout, so the grid keeps four equal-height
   columns and the row box stays the height Figma gives it — the ±28px
   overhangs into the section's own 80px padding, as the design does. The
   title gap goes to 62px to match Figma's itemSpacing, which leaves the
   raised cards the same 34px of air under the heading that Figma shows.

   Restricted to >=1200px: below that the grid reflows to 2 or 1 column, where
   a stagger would just read as broken alignment. */
@media (min-width: 1200px) {
  .manufacture-container .bs-work-5-sec-title {
    margin-bottom: 62px;
  }
  /* The dropped cards hang 28px below the row box, which would otherwise be
     taken out of the section's own bottom padding — harmless on Home (80px to
     spare) but not on Infrastructure, where the section ends 40px after the
     row and the cards would finish 12px from the next one. Giving the row the
     28px back leaves every page the exact boundary it had before the stagger,
     so the section rhythm is untouched. */
  .manufacture-container .bs-work-5-wrap {
    margin-bottom: 28px;
  }
  .manufacture-container .bs-work-5-card:nth-child(odd) {
    translate: 0 -28px !important;
  }
  .manufacture-container .bs-work-5-card:nth-child(even) {
    translate: 0 28px !important;
  }
}
.manufacture-container .bs-work-5-card .title {
  font-family: "Albert Sans", sans-serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0;
  color: #1a1a1a;
}
/* Gap between each step's paragraph and its big 01–04 number, which is the
   next and last element in the card (was 165px from the widget). */
.manufacture-container .bs-work-5-card .disc {
  opacity: 1;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #393939;
  margin-bottom: 80px;
}
.manufacture-container .bs-work-5-card .number {
  -webkit-text-stroke: 0;
  -webkit-text-fill-color: #ededed;
  color: #ededed;
  font-family: "Albert Sans", sans-serif;
}
/* Hover photo reveal is not part of the design — keep cards flat */
.manufacture-container .bs-work-5-card:hover {
  background: #ffffff;
}
.manufacture-container .bs-work-5-card:hover .title { color: #1a1a1a; }
.manufacture-container .bs-work-5-card:hover .disc { color: #393939; }
.manufacture-container .bs-work-5-card .bg-img {
  display: none;
}

/* --------------------------------------------------------------------------
   7. WHY CHOOSE US — .why-choose-container (Figma node 50:10858)
   Grayscale bg photo · white content panel top-left (orange eyebrow, H2 54
   #1a1a1a, DM Sans 18 #393939) · four 445px circles: 1px #f5821f border,
   translucent dark fill, 104px #2d2d2d icon circle w/ orange icon, white copy.
   -------------------------------------------------------------------------- */

.why-choose-container .bs-choose-4-content::after {
  background: #ffffff;
}
/* Panel padding. Desktop and laptop (>=1200px) deliberately keep the parent
   theme's 120px top / 95px bottom — that is the reference composition and it
   must stay pixel-identical there. Below 1200px the panel is full-width and
   stacked above the cards, where 120/95 is far too airy, so it follows the
   site-wide section value instead (60 tablet / 40 mobile). */
@media (max-width: 1199px) {
  .why-choose-container .bs-choose-4-content {
    padding-top: var(--mrb-space-edge);
    padding-bottom: var(--mrb-space-edge);
  }
}

/* The parent theme reserves a FIXED 1500px column beside the panel to show off
   the background photo (.bs-choose-4-content-height), then pulls the feature
   row back up over it. That is the intended look from 1200px up and is left
   untouched. It only breaks on 992-1199px tablets, where the same 1500px
   leaves ~600px of empty photo between the copy and the cards; there, size
   the photo band to its content instead. */
@media (min-width: 992px) and (max-width: 1199px) {
  .why-choose-container .bs-choose-4-content-height {
    height: auto;
    padding-bottom: 150px;
  }
  .why-choose-container .bs-choose-4-feature {
    margin-top: -120px;
  }
}
.why-choose-container .bs-choose-4-subtitle {
  border-color: #e3e3e6;
}
.why-choose-container .bs-choose-4-subtitle .text {
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f5821f;
}
.why-choose-container .bs-choose-4-content .title {
  max-width: 645px;
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(34px, 2.8vw, 54px);
  font-weight: 700;
  color: #1a1a1a;
}
.why-choose-container .bs-choose-4-content .disc {
  max-width: 677px;
  margin-bottom: 0;
  opacity: 1;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #393939;
}

/* Feature circles */
.why-choose-container .bs-choose-4-feature-single {
  background: rgba(45, 45, 45, 0.62);
  backdrop-filter: blur(12px);
  text-align: center;
}
.why-choose-container .bs-choose-4-feature-single::before {
  background: #f5821f;
  animation: none;
}
.why-choose-container .bs-choose-4-feature-single .icon {
  background: #2d2d2d;
  font-size: 52px;
  color: #f5821f;
}
.why-choose-container .bs-choose-4-feature-single .title {
  font-family: "Albert Sans", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.075;
  color: #ffffff;
}
/* The heading link is stripped server-side (mrb_wcu_unlink_feature_titles), so
   the theme's hover treatment on .title — orange text plus a 2px lift, meant to
   read as "clickable" — now promises something that no longer happens. Hold the
   resting state and keep the arrow cursor. */
.why-choose-container .bs-choose-4-feature-single .title,
.why-choose-container .bs-choose-4-feature-single .title:hover {
  color: #ffffff;
  transform: none;
  cursor: default;
}
.why-choose-container .bs-choose-4-feature-single .disc {
  max-width: 301px;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #ffffff;
}

/* Feature circles: the theme overlaps 400-445px circles by -150px, which
   hides the card text on 1200-1799px laptops (13"/14"/16" MacBooks). Make
   them fluid, non-overlapping quarters of the row instead. Above 1800px the
   row has space for the theme's own 445px circles, so it keeps them. */
@media (min-width: 1200px) and (max-width: 1799px) {
  .why-choose-container .bs-choose-4-feature {
    flex-wrap: nowrap;
    gap: 16px;
  }
  .why-choose-container .bs-choose-4-feature .item-margin {
    flex: 1 1 0;
    min-width: 0;
  }
  .why-choose-container .bs-choose-4-feature .item-margin:not(:first-child) {
    margin-left: 0;
  }
  .why-choose-container .bs-choose-4-feature-single {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    padding: 24px;
  }
  .why-choose-container .bs-choose-4-feature-single .icon {
    width: clamp(60px, 5.4vw, 96px);
    height: clamp(60px, 5.4vw, 96px);
    font-size: clamp(30px, 2.6vw, 46px);
    margin-bottom: clamp(14px, 1.5vw, 28px);
  }
  .why-choose-container .bs-choose-4-feature-single .title {
    font-size: clamp(17px, 1.4vw, 24px);
    margin-bottom: 10px;
  }
  .why-choose-container .bs-choose-4-feature-single .disc {
    max-width: 88%;
    font-size: clamp(13px, 1vw, 16px);
  }
}
/* Tablets 768-1199: the circle motif doesn't survive two-up at these widths
   (text hugs the curved edges, huge dead space), so switch to the flat card
   style the theme already uses on phones — sharp corners, thin orange rule,
   dark translucent fill, circular icon badge kept for continuity. */
@media (min-width: 768px) and (max-width: 1199px) {
  .why-choose-container .bs-choose-4-feature {
    flex-wrap: wrap;
    gap: 20px;
  }
  .why-choose-container .bs-choose-4-feature .item-margin {
    flex: 0 0 calc(50% - 10px);
    min-width: 0;
    display: flex;
  }
  .why-choose-container .bs-choose-4-feature .item-margin:not(:first-child) {
    margin-left: 0;
  }
  .why-choose-container .bs-choose-4-feature-single {
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    padding: 32px 28px 36px;
    /* Theme centres the card content, so two cards side by side with
       different amounts of copy put their icons at different heights.
       Top-align instead: the icons line up across the row. */
    justify-content: flex-start;
  }
  .why-choose-container .bs-choose-4-feature-single::before {
    border-radius: 0;
  }
  .why-choose-container .bs-choose-4-feature-single .icon {
    width: 76px;
    height: 76px;
    font-size: 36px;
    margin-bottom: 20px;
  }
  .why-choose-container .bs-choose-4-feature-single .title {
    font-size: 21px;
    margin-bottom: 10px;
  }
  .why-choose-container .bs-choose-4-feature-single .disc {
    max-width: 380px;
    font-size: 16px;
  }
}

/* Tablet & mobile: the background photo is painted by .bs-choose-4-area, which
   sits inside the Elementor container and so picked up the shared --mrb-gutter
   — the image band stopped short of both edges with a white sliver either
   side. Full-bleed the band, keep the content on the shared gutter. */
@media (max-width: 1199px) {
  .why-choose-container .bs-choose-4-area {
    margin-left: calc(-1 * var(--mrb-gutter));
    margin-right: calc(-1 * var(--mrb-gutter));
    /* !important: Elementor writes `padding:0` for this section into
       post-19.css with a four-class selector that would otherwise win. */
    padding-left: var(--mrb-gutter) !important;
    padding-right: var(--mrb-gutter) !important;
  }
  /* The white panel is painted by a ::after that runs leftward from the
     panel's own right edge, so with the band full-bleed it stopped one
     gutter short and left a sliver of photo down the right side. */
  .why-choose-container .bs-choose-4-content::after {
    right: calc(-1 * var(--mrb-gutter));
  }
  /* 50px below the copy panel before the photo band starts is too much once
     the layout is stacked. */
  .why-choose-container .bs-choose-4-wrap {
    margin-bottom: 30px;
  }
}

/* Phones: the theme keeps the cards square (445x445), which on a 358px-wide
   phone is 445px of card for ~150px of text — four screens of mostly empty
   card. Let them size to their content. */
@media (max-width: 767px) {
  .why-choose-container .bs-choose-4-feature {
    gap: 16px;
  }
  .why-choose-container .bs-choose-4-feature-single {
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    padding: 28px 24px 32px;
    justify-content: flex-start;
  }
  .why-choose-container .bs-choose-4-feature-single .icon {
    width: 68px;
    height: 68px;
    font-size: 32px;
    margin-bottom: 16px;
  }
  .why-choose-container .bs-choose-4-feature-single .title {
    font-size: 20px;
    margin-bottom: 8px;
  }
  .why-choose-container .bs-choose-4-feature-single .disc {
    font-size: 16px;
  }
  .why-choose-container .bs-choose-4-wrap {
    margin-bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
   8. CERTIFICATIONS — .certification-container (Figma node 34:3909)
   Light bg · orange eyebrow · H2 54 · paragraph 543px · crop-mark button ·
   right steel image · four flat certificate cards 306x400 in a row,
   first one framed 3px #f5821f.
   -------------------------------------------------------------------------- */

.certification-container .bs-team-4-area {
  padding: var(--mrb-sec-gap) 0 0;
  background-color: #f8f8f9 !important;
}
.certification-container .bs-subtitle-4 .text {
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f5821f;
}
.certification-container .bs-team-4-content .title {
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(34px, 2.8vw, 54px);
  font-weight: 700;
  color: #1a1a1a;
}
.certification-container .bs-team-4-content .disc {
  max-width: 543px;
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  line-height: 1.3;
  color: #393939;
}
.certification-container .bs-pr-btn-2 .text,
.certification-container .bs-pr-btn-2 .text::before,
.certification-container .bs-pr-btn-2 .text::after {
  font-family: "Albert Sans", sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #060606;
}

/* Certificate cards: flat 4-up grid, no team-card chrome */
.certification-container .bs-team-4-member {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.certification-container .bs-team-4-member-single {
  width: auto;
  transform: none !important;
  rotate: none !important;
}
/* Every certificate reserves the 3px border up front and only paints it on
   hover. Keeping the border transparent rather than absent means the image
   box never changes size, so nothing shifts or reflows on hover — the
   border-box would otherwise shrink the image by 3px on each side. */
.certification-container .bs-team-4-member-single .member-img {
  height: 400px;
  border: 3px solid transparent;
  transition: border-color 0.3s ease;
}
.certification-container .bs-team-4-member-single:hover .member-img,
.certification-container .bs-team-4-member-single .member-img:hover {
  border-color: #f5821f;
}
/* Repurposed team cards output an empty-href link around each certificate
   image — certificates aren't clickable */
.certification-container .bs-team-4-member-single a {
  pointer-events: none;
  cursor: default;
}
.certification-container .bs-team-4-member-single .member-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.certification-container .bs-team-4-member-single .content {
  display: none;
}

/* --------------------------------------------------------------------------
   9. BLOG — .blog-container (Figma node 34:6796)
   Orange eyebrow · H2 "Our Blogs" + crop-mark "View All Blog" button right ·
   three cards: image 419x500, author "MRB", title 28/32, meta row.
   -------------------------------------------------------------------------- */

.blog-container .bs-blog-4-area {
  padding: var(--mrb-sec-gap) 0 0;
  background-color: #ffffff !important;
}
.blog-container .bs-subtitle-4 .text {
  font-family: "Albert Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #f5821f;
}
.blog-container .bs-blog-4-content .title {
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(34px, 2.8vw, 54px);
  font-weight: 700;
  color: #1a1a1a;
}
.blog-container .bs-blog-4-item .item-img {
  height: 500px;
}
.blog-container .bs-blog-4-item .item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.blog-container .bs-blog-4-item .author {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  color: #363636;
}
.blog-container .bs-blog-4-item .title {
  font-family: "Albert Sans", sans-serif;
  font-size: clamp(22px, 1.46vw, 28px);
  font-weight: 600;
  line-height: 1.15;
}
.blog-container .bs-blog-4-item .title a {
  color: #000000;
}
.blog-container .bs-blog-4-item .item-meta .cat-link {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #060606;
}
.blog-container .bs-blog-4-item .item-meta .date {
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  color: #363636;
}

/* --------------------------------------------------------------------------
   10. LOGO STRIP — .logo-container (Figma node 34:1374)
   240px section: 120px white logo cards carousel, 60px air above/below.
   -------------------------------------------------------------------------- */

.logo-container .elementor-widget-tx_brand .tx-section {
  padding: var(--mrb-sec-gap) 0 !important;
}

/* --- Products/Manufacturing/Cert: tablet & mobile ------------------------- */
@media (max-width: 991px) {
  .certification-container .bs-team-4-member {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .blog-container .bs-blog-4-item .item-img {
    height: 380px;
  }
}
@media (max-width: 575px) {
  .certification-container .bs-team-4-member {
    grid-template-columns: 1fr;
  }
  .certification-container .bs-team-4-member-single .member-img {
    height: 420px;
  }
  .product-listing-container .bs-services-4-item-single .main-img {
    height: 260px;
  }
}

/* --- Tablet & mobile refinements ------------------------------------------ */

/* Products (<992: theme stacks every panel open in a grid): cleaner cards —
   full-width images, untruncated copy, tighter title spacing, breathing gap,
   and dark background visible below the last row. */
@media (max-width: 991px) {
  /* The intro copy sits directly above the cards here (no side-by-side
     accordion), so the theme's 80px column gap reads as a dead dark band. */
  .product-listing-container .bs-services-4-wrap {
    gap: 40px;
  }
  .product-listing-container .bs-services-4-item {
    gap: 20px;
  }
  /* 24px of space around each card's content (theme uses 68px/50px) */
  .product-listing-container .bs-services-4-item-single {
    padding: 24px;
  }
  .product-listing-container .bs-services-4-item-single .title {
    margin-bottom: 20px;
    font-size: 26px;
  }
  /* Cards in a row are stretched to equal height by the grid; pin the
     description to the bottom so the images line up across the row. */
  .product-listing-container .bs-services-4-item-single .active-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .product-listing-container .bs-services-4-item-single .main-img {
    flex: 1 1 auto;
    height: auto;
    min-height: 240px;
    margin-bottom: 20px;
  }
  .product-listing-container .bs-services-4-item-single .main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .product-listing-container .bs-services-4-item-single .active-content .disc {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
  }
  .product-listing-container .bs-services-4-item-single .main-img {
    width: 100%;
    max-width: 100%;
  }
}

/* Seven products in a two-column grid leave the last card alone in its row
   with an empty half beside it. On tablets that orphan spans the full width
   and switches to image-left / copy-right so the row reads as a deliberate
   wide card rather than a gap. */
@media (min-width: 768px) and (max-width: 991px) {
  .product-listing-container .bs-services-4-item-single:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .product-listing-container .bs-services-4-item-single:last-child:nth-child(odd) .active-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "img title"
      "img disc";
    gap: 0 24px;
  }
  .product-listing-container .bs-services-4-item-single:last-child:nth-child(odd) .title {
    grid-area: title;
  }
  .product-listing-container .bs-services-4-item-single:last-child:nth-child(odd) .main-img {
    grid-area: img;
    height: 320px;
    min-height: 0;
    margin-bottom: 0;
  }
  .product-listing-container .bs-services-4-item-single:last-child:nth-child(odd) .disc {
    grid-area: disc;
    align-self: start;
  }
}

/* Manufacturing: two cards per row on tablets (three are too cramped) */
@media (min-width: 768px) and (max-width: 991px) {
  .manufacture-container .bs-work-5-wrap {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* Tablet only: the step cards drop to a flat 20px inset, and the 80px of air
   the paragraph holds above the ghost number comes down to 20px too. Both
   figures are desktop values — at two columns the cards are narrow enough
   that they read as mostly empty. The phone tier below sets its own. */
@media (min-width: 768px) and (max-width: 1199px) {
  .manufacture-container .bs-work-5-card {
    padding: 20px;
  }
  .manufacture-container .bs-work-5-card .disc {
    margin-bottom: 20px;
  }
}

/* Why-choose: keep some background visible below the last card row */
@media (max-width: 1199px) {
  .why-choose-container .bs-choose-4-area {
    padding-bottom: var(--mrb-sec-gap-half) !important;
  }
}

/* --- Mobile polish (<768): tighten oversized title/card spacing ---------- */
@media (max-width: 767px) {
  /* Manufacturing: 90px title margin and 477px cards read as empty screens
     on a phone — compact title gap, card padding and ghost number. */
  .manufacture-container .bs-work-5-sec-title {
    margin-bottom: 36px;
  }
  .manufacture-container .bs-work-5-card {
    padding: 24px 20px;
  }
  .manufacture-container .bs-work-5-card .disc {
    margin-bottom: 0;
  }
  .manufacture-container .bs-work-5-card .number {
    margin-top: 12px;
    font-size: 64px;
    line-height: 1;
  }
  /* Products: 80px between the intro copy and the first card is too airy */
  .product-listing-container .bs-services-4-wrap {
    gap: 32px;
  }
  /* Why-choose: the panel padding now comes from --mrb-space-edge with the
     rest of the section (40px on phones), so nothing to override here. */
}


/* --------------------------------------------------------------------------
   11. GET IN TOUCH CTA — .home-contact-container
        Figma node 500:746 (1920x1081, white section)

   Full-bleed photo band across the top, a light #ededed form card sitting
   over its lower half on the left, and the "500+ trusted partners" heading
   on the white below-band area to the right.

   Figma geometry, measured from the section's top-left at 1920:

     band        1923x730, starting 35px ABOVE the section (it laps the
                 logo strip above it), so 695px of it is inside this section
     content box 1344 wide, centred -> starts at x 284
     card        614 wide, padding 68/60, top at y 265, bottom at 974
     heading     596 wide at x 975, Albert Sans 700 54/65, bottom at 967

   The band is absolutely positioned so it can bleed past the section box;
   the card's own top margin is what pushes the content down over it.
   -------------------------------------------------------------------------- */

/* The section's own top and bottom padding is NOT set here: spacing.css owns
   the vertical rhythm for every [class*="-area"] band on the site (40px
   between sections, 80px at the page edge — this is the last section) and
   sets it with !important on purpose. Figma's 265px above the card is
   internal composition, not a section gap, so it is carried by the card's
   own margin-top below. Net effect: the card lands exactly where Figma has
   it; only the run-out under the section is the site's 80px rather than
   Figma's 107px. */
.home-contact-container {
  /* The band height is the section's one responsive input: the card's top
     offset is derived from it (below) so the card always sits 41% of the way
     down the photo — the proportion Figma draws at 1920 — instead of the two
     being tuned separately and drifting apart. At 600-744px they had, and
     the card had slid off the photo entirely. */
  --mrb-cta-band: 730px;
  /* how far the band is allowed to lap the section above it */
  --mrb-cta-bleed: 35px;
  /* how far down the band the card starts, as a fraction of its height.
     0.41 is Figma. Once the card goes full width it stops being a panel ON
     the photo and starts being a lid over it, so the stacked tier starts
     the card lower and keeps more of the picture visible. */
  --mrb-cta-lap: 0.41;
}

.home-contact-container .bs-contact-4-area {
  position: relative;
  background: #ffffff;
  /* the widget ships with .wa-fix (overflow:hidden), which trims the band
     back to this box — the clipping is done one level up instead */
  overflow: visible;
}

/* The band is clipped by the outer Elementor section, not by .bs-contact-4-area:
   below the desktop tier the area is inset by the page gutter, so clipping
   there would trim the full-bleed photo back to the gutter. This element runs
   the full viewport width at every breakpoint. */
.elementor-section.home-contact-container {
  overflow: hidden;
}

/* Photo band. The theme wraps the img in .wa-img-cover, which is an
   inline-block anchor that only ever grows to the image's natural box —
   height has to be forced on the wrapper AND the img, or the picture renders
   at half the intended height (same chain as the sidebar thumbs). */
/* Full-bleed regardless of what the ancestors are padded by: below the
   desktop tier spacing.css puts the page gutter on the outer
   .elementor-container, so left:0/right:0 on this band would stop a gutter
   short of each edge. 100vw centred on the section is immune to that, and
   .bs-contact-4-area's overflow:hidden keeps it off the scrollbar. */
.home-contact-container .bs-contact-4-bg {
  position: absolute;
  top: calc(-1 * var(--mrb-cta-bleed));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 100vw;
  height: var(--mrb-cta-band);
  display: block;
  z-index: 0;
  pointer-events: none;
}

.home-contact-container .bs-contact-4-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Content box: the theme's .bs-container-2, untouched, so this section's
   left edge is the same one every other home section uses at every width.
   Figma draws the CTA on a 1344px box while the built page runs on the
   theme's 1326/1302/1140 steps — pinning it to Figma's number put the card
   12px out at 1920 and 94px out at 1366, which reads as a broken column.
   Aligning with the neighbours wins; only z-index is this section's own. */
.home-contact-container .bs-contact-4-area > .container {
  position: relative;
  z-index: 1;
}

/* Card left, heading right, both sitting on the band's bottom edge.
   The theme lays this out as a 3-column grid pulled 95px past the container;
   Figma is a plain two-item row inside the box. */
.home-contact-container .bs-contact-4-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  gap: clamp(32px, 4vw, 77px);
  flex-wrap: wrap;
  margin-right: 0;
}

/* ---- Form card ---- */

/* The card starts 41% of the way down the band at every width — Figma's
   proportion at 1920 (card top 265, band -35 to 695). The section's own
   rhythm padding (--mrb-space) and the band's upward bleed are subtracted
   because both already sit above the card. At 1920 this resolves to 225px,
   putting the card top on Figma's y=265 exactly. */
.home-contact-container .bs-contact-4-form {
  flex: 0 1 614px;
  max-width: 614px;
  width: 100%;
  background: #ededed;
  padding: clamp(36px, 3.6vw, 68px) clamp(24px, 3.2vw, 60px);
  margin-top: calc(
    var(--mrb-cta-band) * var(--mrb-cta-lap) - var(--mrb-cta-bleed) -
      var(--mrb-space, 40px)
  );
}

.home-contact-container .bs-contact-4-form .title {
  /* 29px is Figma's gap from the card title to the first field label. */
  margin: 0 0 29px;
  font-family: "Albert Sans", sans-serif;
  font-weight: 600;
  font-size: clamp(24px, 1.8vw, 34px);
  line-height: 1.21;
  letter-spacing: 0;
  color: #2d2d2d;
}

/* Figma's 29px between the card title and the first field label already
   comes from the theme's .bs-contact-4-form .title margin-bottom. */

.home-contact-container .mrb-ff-field {
  margin: 0 0 24px;
}

.home-contact-container .mrb-ff-field label {
  display: block;
  margin: 0;
  font-family: "Albert Sans", sans-serif;
  font-weight: 500;
  font-size: clamp(18px, 1.15vw, 22px);
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: #000000;
}

.home-contact-container .wpcf7-form-control-wrap {
  display: block;
}

/* Inputs: no box, 2px bottom rule only (Figma stroke #d9d9d9). */
.home-contact-container .mrb-ff-field input[type="text"],
.home-contact-container .mrb-ff-field input[type="tel"],
.home-contact-container .mrb-ff-field input[type="email"],
.home-contact-container .mrb-ff-field textarea {
  display: block;
  width: 100%;
  height: 50px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid #d9d9d9;
  border-radius: 0;
  padding: 13px 0 14px;
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
  line-height: 21px;
  color: #2d2d2d;
  outline: none;
  box-shadow: none;
  transition: border-color 0.3s ease;
}

.home-contact-container .mrb-ff-field textarea {
  height: 70px;
  min-height: 70px;
  padding-top: 10px;
  line-height: 28px;
  resize: vertical;
}

.home-contact-container .mrb-ff-field input::placeholder,
.home-contact-container .mrb-ff-field textarea::placeholder {
  color: #888888;
  opacity: 1;
}

.home-contact-container .mrb-ff-field input:focus,
.home-contact-container .mrb-ff-field textarea:focus {
  border-bottom-color: #f5821f;
}

/* Figma leaves 54px between the message rule and the button. */
.home-contact-container .mrb-ff-grid {
  margin-bottom: 54px;
}

/* ---- Send Inquiry button: 191x51 orange, orange crop marks -------------
   The marks are two vertical rules on the button's left and right edges,
   run 15px past the top and bottom. They live on the wrapper span because
   an <input> cannot carry pseudo-elements. */

/* The wrapper IS the button box: it carries the orange, the four corner
   marks and the four hover quadrants, and the <input> rides transparently
   on top holding only the label. Figma draws the marks as four 16x16
   frames stroked on the two edges that meet each corner (nodes 500:777-780)
   — the same construction as the theme's .bs-pr-btn-2 .line-1 / .line-2,
   so the values below are the theme's, in orange. */
.home-contact-container .mrb-ff-submit {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: top;
  min-width: 191px;
  height: 51px;
  background: #f5821f;
  line-height: 0;
  /* Figma insets the button 16px so its left corner marks land on the same
     vertical as the field rules above it. */
  margin-left: 16px;
}

.home-contact-container .mrb-ff-line-1,
.home-contact-container .mrb-ff-line-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}

.home-contact-container .mrb-ff-line-1::before,
.home-contact-container .mrb-ff-line-1::after,
.home-contact-container .mrb-ff-line-2::before,
.home-contact-container .mrb-ff-line-2::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-style: solid;
  border-color: #f5821f;
  z-index: 1;
  transition: all 0.5s ease-in-out;
}

/* top-left */
.home-contact-container .mrb-ff-line-1::after {
  left: -16px;
  top: -16px;
  border-width: 0 1px 1px 0;
  transform-origin: bottom right;
}

/* bottom-right */
.home-contact-container .mrb-ff-line-1::before {
  right: -16px;
  bottom: -16px;
  border-width: 1px 0 0 1px;
  transform-origin: top left;
}

/* top-right */
.home-contact-container .mrb-ff-line-2::after {
  right: -16px;
  top: -16px;
  border-width: 0 0 1px 1px;
  transform-origin: bottom left;
}

/* bottom-left */
.home-contact-container .mrb-ff-line-2::before {
  left: -16px;
  bottom: -16px;
  border-width: 1px 1px 0 0;
  transform-origin: top right;
}

/* Hover: the theme's four 50%x50% quadrants scaling out of each corner
   (.bs-pr-btn-2 .box-1..box-4). Those buttons rest white and fill orange;
   this one and the hero rest orange, so the incoming fill is dark. */
.home-contact-container .mrb-ff-box {
  position: absolute;
  width: 50%;
  height: 50%;
  background: #2d2d2d;
  z-index: -1;
  transform: scale(0);
  transition: 0.4s var(--bs-cube-2, cubic-bezier(0.1, 0.75, 0.25, 1));
}

.home-contact-container .mrb-ff-box-1 {
  top: 0;
  left: 0;
  transform-origin: left top;
}

.home-contact-container .mrb-ff-box-2 {
  top: 0;
  right: 0;
  transform-origin: right top;
}

.home-contact-container .mrb-ff-box-3 {
  bottom: 0;
  right: 0;
  transform-origin: right bottom;
}

.home-contact-container .mrb-ff-box-4 {
  bottom: 0;
  left: 0;
  transform-origin: left bottom;
}

.home-contact-container .mrb-ff-submit:hover .mrb-ff-box {
  transform: scale(1);
}

.home-contact-container .wpcf7-submit {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background: transparent;
  color: #ffffff;
  border: 0;
  border-radius: 0;
  padding: 0 20px;
  font-family: "Albert Sans", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 51px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.4s var(--bs-cube-2, cubic-bezier(0.1, 0.75, 0.25, 1));
}

/* Same 2px label lift the hero CTA uses. */
.home-contact-container .mrb-ff-submit:hover .wpcf7-submit {
  transform: translateY(-2px);
}

/* CF7 status + validation, kept inside the card. */
.home-contact-container .wpcf7-not-valid {
  border-bottom-color: #dc3232 !important;
}

.home-contact-container .wpcf7-not-valid-tip {
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  color: #dc3232;
  margin-top: 6px;
}

.home-contact-container .wpcf7-response-output {
  margin: 16px 0 0;
  padding: 10px 14px;
  border: 1px solid #f5821f;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  color: #2d2d2d;
}

/* The idle spinner is invisible but still holds a 24px inline box next to
   the button; take it out of flow so it cannot add a phantom line. */
.home-contact-container .wpcf7-spinner {
  position: absolute;
  margin-left: 12px;
}

.home-contact-container .wpcf7-form {
  position: relative;
}

/* ---- "500+ trusted partners all over the world." ---- */

/* The heading also carries .bs-sec-title-4, which spacing.css gives a
   24px bottom margin with !important (it is the site-wide title-to-body
   gap). Here the heading has no body copy under it — the margin is only
   the 7px Figma leaves between its baseline box and the card's bottom
   edge — so this one has to answer in kind. */
.home-contact-container h2.bs-contact-4-title {
  flex: 1 1 420px;
  max-width: 596px;
  margin: 0 0 7px !important;
  font-family: "Albert Sans", sans-serif;
  font-weight: 700;
  /* 54px is Figma at 1920 and 2.9vw carries that down fluidly; the floor is
     34px rather than a smaller number because that is what every other
     section title on the page (.bs-sec-title-4) measures from 1199 down —
     this heading is the same rank and was reading a step small next to them. */
  font-size: clamp(34px, 2.9vw, 54px);
  line-height: 1.2;
  letter-spacing: 0;
  color: #2d2d2d;
  text-transform: none;
}

/* --- Laptop / small desktop: the band shortens with the card ------------ */
@media (max-width: 1399px) {
  .home-contact-container {
    --mrb-cta-band: clamp(480px, 52vw, 730px);
  }
}


/* --- Tablet and below: card and heading stack -----------------------------
   The two-column row needs card (614) + gap (77) + heading (min 420) = 1111
   of content box, which the theme's container stops providing just under
   1200. Left to wrap on its own the heading dropped below a card that was
   still only 614 wide, leaving the right half of the section empty, so the
   stack is taken deliberately at the site's existing 1199 tablet tier
   (spacing.css: "large tablets in landscape land here too"). */
@media (max-width: 1199px) {
  .home-contact-container {
    --mrb-cta-band: clamp(360px, 52vw, 590px);
    /* nothing above this section to lap once it stacks */
    --mrb-cta-bleed: 0px;
  }
  .home-contact-container .bs-contact-4-wrap {
    gap: clamp(24px, 3.4vw, 40px);
  }
  /* Only the heading drops below at this tier: the card keeps its 614px
     width, so it still reads as a panel sitting ON the photo with the rest
     of the picture visible beside it, exactly as at 1200+. */
  .home-contact-container h2.bs-contact-4-title {
    flex: 1 1 100%;
    max-width: 100%;
    margin-bottom: 0 !important;
  }
}

/* --- Small tablet and below: the card spans the section ------------------ */
@media (max-width: 991px) {
  .home-contact-container {
    /* a full-width card covers whatever it laps, so it starts lower down */
    --mrb-cta-lap: 0.7;
  }
  .home-contact-container .bs-contact-4-form {
    flex: 1 1 100%;
    max-width: 100%;
  }
  /* The panel spans the section but the form inside it keeps its Figma
     measure — otherwise a Name field ran 900px wide on a tablet, which is
     neither readable nor scannable. */
  .home-contact-container .bs-contact-4-form .title,
  .home-contact-container .wpcf7-form {
    max-width: 614px;
  }
}

/* --- Phone (and the small tablets the 767 tier catches) ------------------
   The band scales with the viewport instead of sitting at a fixed height:
   240px was a thin strip on a 744px iPad mini and a heavy block on a 360px
   phone. The submit's own mobile sizing lives in buttons.css with the rest
   of the site's mobile buttons. */
@media (max-width: 767px) {
  .home-contact-container {
    --mrb-cta-band: clamp(200px, 52vw, 400px);
  }
  .home-contact-container .mrb-ff-field {
    margin-bottom: 18px;
  }
  .home-contact-container .mrb-ff-field label {
    font-size: 16px;
    line-height: 22px;
  }
  .home-contact-container .mrb-ff-grid {
    margin-bottom: 32px;
  }
}