/**
 * Site-wide vertical section rhythm + horizontal page gutters.
 *
 * ONE rule for the whole site, replacing the per-page padding values that
 * had drifted apart (pt-130 / pb-100 / pt-45 / pt-150 / 80px / 72px — very
 * nearly one per widget).
 *
 * Every section carries the same padding on BOTH sides, so the gap between
 * any two neighbours is always 2 x --mrb-space. That holds whether or not
 * the neighbours have different background colours: a tinted band supplies
 * its half of the boundary from inside its own background, and the section
 * after it supplies the other half.
 *
 *                       desktop / laptop   tablet   mobile
 *   between sections           80px         60px     40px
 *   half (each side)           40px         30px     20px
 *   page top / bottom          80px         60px     40px
 *
 * The padding goes on the block that PAINTS the section (the theme's
 * .bs-*-area, or our .mrb-section), not the outer Elementor wrapper, so a
 * band's colour always extends through its own half of the gap. Sections
 * with no such inner block take the padding on the wrapper instead.
 *
 * Scoping: the header and footer are separate Elementor templates, each in
 * its own .elementor wrapper. Everything here is scoped to the wrapper that
 * contains NEITHER, so page chrome is untouched and :first-child /
 * :last-child resolve to the real first and last section of the content.
 *
 * Loaded last so it wins over the per-page stylesheets.
 *
 * @package MRB
 */

:root {
	--mrb-space: 40px;
	--mrb-space-edge: 80px;
	--mrb-gutter: 12px;
}

/* Tablet — all sizes, portrait and landscape. 1199px is the site's existing
   "below small laptop" tier, so large tablets in landscape land here too. */
@media (max-width: 1199px) {
	:root {
		--mrb-space: 30px;
		--mrb-space-edge: 60px;
		--mrb-gutter: 24px;
	}
}

@media (max-width: 767px) {
	:root {
		--mrb-space: 20px;
		--mrb-space-edge: 40px;
		--mrb-gutter: 16px;
	}
}

/* ==========================================================================
   VERTICAL RHYTHM
   ========================================================================== */

/* --- Sections whose band is painted by an inner .bs-*-area / .mrb-section */
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section .elementor-widget-container > .mrb-section,
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent .elementor-widget-container > .mrb-section {
	padding-top: var(--mrb-space) !important;
	padding-bottom: var(--mrb-space) !important;
}

/* --- Sections with no inner painted block: the wrapper carries it */
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)) {
	padding-top: var(--mrb-space) !important;
	padding-bottom: var(--mrb-space) !important;
}

/* --- When the padding lives on an inner block, the outer wrapper must not
   add its own. Elementor saves per-section padding from the editor into
   post-<id>.css (e.g. `padding:40px 0 0 0`), which lands on the outer
   <section>. With the rhythm applied to the inner .bs-*-area / .mrb-section,
   both were rendering — the certificates page showed 80px outside plus 80px
   inside, i.e. 160px. Zero the wrapper so the inner block is the only source.

   .mrb-info-media is excluded: it is a card rather than a section wrapper,
   so for that one the container legitimately carries the section padding
   (see the product detail exceptions at the end of this file). */
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:has(.elementor-widget-container > [class*="-area"]):not(:has(.mrb-info-media)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:has(.elementor-widget-container > .mrb-section):not(:has(.mrb-info-media)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:has(.elementor-widget-container > [class*="-area"]):not(:has(.mrb-info-media)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:has(.elementor-widget-container > .mrb-section):not(:has(.mrb-info-media)) {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* --- Page edges: a full boundary above the first section and below the
   last, so the page opens and closes on the same rhythm it uses inside.
   Same selector chains plus :first-child / :last-child, which raises the
   specificity just enough to win over the two rules above. */
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:first-child .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:first-child .elementor-widget-container > .mrb-section,
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:first-child .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:first-child .elementor-widget-container > .mrb-section,
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:first-child:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:first-child:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)) {
	padding-top: var(--mrb-space-edge) !important;
}

.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:last-child .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:last-child .elementor-widget-container > .mrb-section,
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:last-child .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:last-child .elementor-widget-container > .mrb-section,
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section:last-child:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent:last-child:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)) {
	padding-bottom: var(--mrb-space-edge) !important;
}

/* --- Non-Elementor templates (blog archive, single post, search) follow
   the same rhythm; they are a single content block, so both edges get the
   full page value. */
body.blog .bs-blog-page-2-area,
body.archive .bs-blog-page-2-area,
body.single-post .bs-blog-details-area,
body.search .mrb-search-container {
	padding-top: var(--mrb-space-edge) !important;
	padding-bottom: var(--mrb-space-edge) !important;
}

/* ==========================================================================
   HORIZONTAL GUTTERS (tablet + mobile)

   Bootstrap's .container steps through fixed max-widths (540 / 720 / 960px),
   so at a 767px viewport it rendered 540px wide — a 106px gutter each side —
   while Elementor's own containers ran nearly edge to edge on the same page.
   Below the desktop tier every container becomes fluid with one shared
   gutter so all sections line up on the same left and right edge.
   ========================================================================== */

@media (max-width: 1199px) {
	.container,
	.container-fluid,
	.bs-container-1,
	.bs-container-2,
	.bs-container-3,
	.elementor-container,
	.e-con-inner,
	.elementor-section.elementor-section-boxed > .elementor-container {
		max-width: 100% !important;
		width: 100% !important;
		padding-left: var(--mrb-gutter) !important;
		padding-right: var(--mrb-gutter) !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Elementor columns add their own gutter on top of the container's,
	   which would push a column's content further in than the section
	   heading above it. */
	.elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated,
	.elementor-column-gap-default > .elementor-column > .elementor-element-populated {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Only ONE gutter per section. The theme nests a Bootstrap .container
	   inside Elementor's own container, so with both padded the text in
	   those sections started at 2 x the gutter (32px) while sections built
	   on Elementor containers alone started at 16px. The outer element owns
	   the gutter; the nested one is flush. */
	.elementor-container .container,
	.elementor-container [class*="bs-container-"],
	.e-con-inner .container,
	.e-con-inner [class*="bs-container-"],
	.elementor-widget-container > [class*="-area"] > .container,
	.elementor-widget-container > [class*="-area"] > [class*="bs-container-"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Same again one level down: several widgets put a -wrap/-row element
	   inside the container with its own 12–20px of horizontal padding,
	   which pushed those sections in past the gutter (e.g. the product
	   detail application cards started at 28px, not 16px).

	   Bootstrap .row keeps its negative margins — they exist to cancel the
	   column padding, and zeroing them pushes every column inward instead. */
	[class*="-area"] > [class*="-wrap"],
	[class*="-area"] > .container > [class*="-wrap"],
	[class*="-area"] > [class*="bs-container-"] > [class*="-wrap"],
	.e-con-inner > [class*="-wrap"],
	.elementor-widget-container > [class*="-wrap"] {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

/* ==========================================================================
   EXCEPTIONS
   ========================================================================== */

/* Home hero: no vertical padding at all. It is the first section, so the
   page-edge rule above would otherwise give it 80/60/40 on top; the hero
   carries its own internal spacing and sits flush under the header. The
   selector repeats the page-wrapper chain and adds the hero's own class so
   it outranks the :first-child rule rather than relying on source order. */
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section.home-hero-section:first-child:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)),
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section.home-hero-section:first-child .elementor-widget-container > [class*="-area"],
.elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .elementor-top-section.home-hero-section:first-child .elementor-widget-container > .mrb-section {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* Home "Why Choose Us": the whole 80px boundary is carried by the section
   ABOVE it instead of being split 40/40. The band is a dark full-bleed
   block, so starting its background right at its content (no top padding)
   reads tighter than letting 40px of dark run above the heading.

   Total spacing between the two is unchanged — Manufacturing Process now
   supplies the full boundary from its own white background. The token is
   used rather than a literal 80px so tablet and mobile still step down to
   the 60px / 40px totals. */
body.home .elementor > .elementor-top-section.manufacture-container .elementor-widget-container > [class*="-area"] {
	padding-bottom: var(--mrb-space-edge) !important;
}

/* Home "Our Products Range": the dark band ends flush with the last product
   card (no bottom padding), and the white Manufacturing Process section
   below carries the whole boundary from its own background —
   80px desktop / 60px tablet / 40px mobile, via --mrb-space-edge. Same
   treatment the "Why Choose Us" band already gets above. */
body.home .elementor > .elementor-top-section.product-listing-container .elementor-widget-container > [class*="-area"] {
	padding-bottom: 0 !important;
}

body.home .elementor > .elementor-top-section.manufacture-container .elementor-widget-container > [class*="-area"] {
	padding-top: var(--mrb-space-edge) !important;
}

/* Tablet and mobile: the boundary goes back to the standard even split
   instead of being carried entirely by Manufacturing Process — 30px each
   side on tablet, 20px each on mobile (--mrb-space). On the narrow layouts
   the products band ends on a full-width card rather than the accordion, so
   a little dark below the last card reads better than none. */
@media (max-width: 1199px) {
	body.home .elementor > .elementor-top-section.product-listing-container .elementor-widget-container > [class*="-area"] {
		padding-bottom: var(--mrb-space) !important;
	}

	body.home .elementor > .elementor-top-section.manufacture-container .elementor-widget-container > [class*="-area"] {
		padding-top: var(--mrb-space) !important;
	}
}

body.home .elementor > .elementor-top-section.why-choose-container .elementor-widget-container > [class*="-area"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ...and the same on its lower edge: the band ends at its content, and the
   Certifications section below carries the whole boundary from its own
   white background. */
body.home .elementor > .elementor-top-section.certification-container .elementor-widget-container > [class*="-area"] {
	padding-top: var(--mrb-space-edge) !important;
}

/* About page: same treatment as the home page band — "Why Choose Us" keeps
   no vertical padding of its own, and the sections either side supply the
   full boundary from their white backgrounds. About Us below it is also the
   last section, so it keeps the page-edge value on its bottom. */
body.page-id-25 .elementor > .elementor-top-section.why-choose-container .elementor-widget-container > [class*="-area"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.page-id-25 .elementor > .elementor-top-section.about-hero-container .elementor-widget-container > [class*="-area"] {
	padding-bottom: var(--mrb-space-edge) !important;
}

body.page-id-25 .elementor > .elementor-top-section.aboutus-container .elementor-widget-container > [class*="-area"] {
	padding-top: var(--mrb-space) !important;
}

/* About page, desktop only: the last section (Vision & Mission) drops its
   bottom page-edge space and sits flush against the footer. The footer
   supplies its own top padding, so the two never collide. Tablet and mobile
   keep the 60px / 40px page edge. */
@media (min-width: 1200px) {
	body.page-id-25 .elementor > .elementor-top-section.aboutus-container:last-child .elementor-widget-container > [class*="-area"] {
		padding-bottom: 0 !important;
	}
}

/* Infrastructure page, "Manufacturing Process": the six process cards end
   very close to the dark "Advanced Machinery" band that follows, while the
   heading above them has the full section gap. An extra 30px under the last
   card row evens the block out. Added to the token rather than replacing it,
   so tablet and mobile keep stepping down with the rest of the page. */
body.page-id-61 .elementor > .elementor-top-section.facility-process-container:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)) {
	padding-bottom: calc(var(--mrb-space) + 30px) !important;
}

/* Infrastructure page, last section (Warehouse & Logistics): its decorative
   building image is absolutely positioned at top:-290px and deliberately
   rises out of its own column, so the standard 40px top padding let it
   escape the section and collide with the machinery cards above (measured
   74–169px of overlap depending on width). This restores enough room for
   the pull-up. Paired with a shortened pull-up between 992–1399px — see
   infrastructure.css. Below 992px the image is display:none, so the normal
   rhythm applies untouched. */
@media (min-width: 992px) {
	body.page-id-61 .elementor > .elementor-top-section.about-hero-container:last-child .elementor-widget-container > [class*="-area"] {
		padding-top: 165px !important;
	}
}

/* --------------------------------------------------------------------------
   Product detail page
   -------------------------------------------------------------------------- */

/* .mrb-info-media is a CARD, not a section wrapper — it just happens to
   share the .mrb-section class. The section rule above was overriding its
   own 56px internal padding down to 40px. Restore it (and the responsive
   steps from product-detail.css), and let the container that holds the two
   cards carry the section padding instead. */
body.single-services .elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent .elementor-widget-container > .mrb-section.mrb-info-media {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
}

@media (max-width: 1199px) {
	body.single-services .elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent .elementor-widget-container > .mrb-section.mrb-info-media {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

@media (max-width: 991px) {
	body.single-services .elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent .elementor-widget-container > .mrb-section.mrb-info-media {
		padding-top: 32px !important;
		padding-bottom: 32px !important;
	}
}

@media (max-width: 767px) {
	body.single-services .elementor:not(:has(.bs-header-4-area)):not(:has(.bs-footer-4-area)) > .e-con.e-parent .elementor-widget-container > .mrb-section.mrb-info-media {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}
}

body.single-services .elementor > .e-con.e-parent:has(.mrb-info-media) {
	padding-top: var(--mrb-space) !important;
	padding-bottom: var(--mrb-space) !important;
}

/* "Why Choose Us" band: no padding of its own, with the sections either
   side carrying the full boundary — same as the home and About pages. */
body.single-services .elementor > .elementor-top-section.why-choose-container .elementor-widget-container > [class*="-area"] {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

body.single-services .elementor > .elementor-top-section.application-data-container .elementor-widget-container > [class*="-area"],
body.single-services .elementor > .elementor-top-section.application-data-container:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)) {
	padding-bottom: var(--mrb-space-edge) !important;
}

body.single-services .elementor > .elementor-top-section.faq-continer .elementor-widget-container > [class*="-area"],
body.single-services .elementor > .elementor-top-section.faq-continer:not(:has(.elementor-widget-container > [class*="-area"])):not(:has(.elementor-widget-container > .mrb-section)) {
	padding-top: var(--mrb-space-edge) !important;
}

/* --------------------------------------------------------------------------
   "Why Choose Us" band, tablet and mobile only

   On desktop the band sits flush against its neighbours (the rules above),
   which is right when the cards are circles overlapping the photo. Below
   1200px the cards are flat rectangles that end hard on the band's bottom
   edge, so the band keeps a little of its own background below them:
   30px tablet / 20px mobile (--mrb-space). Placed last so it wins over the
   three per-page `padding-bottom: 0` rules above.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
	body.home .elementor > .elementor-top-section.why-choose-container .elementor-widget-container > [class*="-area"],
	body.page-id-25 .elementor > .elementor-top-section.why-choose-container .elementor-widget-container > [class*="-area"],
	body.single-services .elementor > .elementor-top-section.why-choose-container .elementor-widget-container > [class*="-area"] {
		padding-bottom: var(--mrb-space) !important;
	}
}

/* =============================================================
 * Unified heading/ sub‑heading/ line/ description spacing
 * -------------------------------------------------------------
 * We define four custom properties that represent the vertical gap
 * between the consecutive elements of a typical section title block:
 *   --heading-gap-subtitle   – space after the subtitle (sub‑heading)
 *   --heading-gap-title      – space after the main title
 *   --heading-gap-underline  – space after the decorative line
 *   --heading-gap-desc       – space before the paragraph description
 *
 * The values are derived from the global rhythm tokens so they shrink
 * automatically on tablet (≤1199px) and mobile (≤767px).
 * ------------------------------------------------------------- */
:root {
  /* Desktop (default) */
  --heading-gap-subtitle: 16px;   /* space after sub‑heading */
  --heading-gap-title:    24px;   /* space after title */
  --heading-gap-underline: 12px; /* space after line */
  --heading-gap-desc:     20px;   /* space before description */
}

@media (max-width: 1199px) {
  :root {
    --heading-gap-subtitle: 12px;
    --heading-gap-title:    18px;
    --heading-gap-underline: 8px;
    --heading-gap-desc:     16px;
  }
}

@media (max-width: 767px) {
  :root {
    --heading-gap-subtitle: 8px;
    --heading-gap-title:    12px;
    --heading-gap-underline: 6px;
    --heading-gap-desc:     12px;
  }
}

/* -----------------------------------------------------------------
 * Apply the spacing to the theme’s heading classes.
 * The selectors are deliberately specific so they beat any per‑page
 * `margin-bottom` declarations that may exist in home.css, about.css,
 * product‑detail.css, etc.
 * ----------------------------------------------------------------- */
/* Sub‑heading (usually .bs‑subtitle‑* or .bs‑sub‑title‑*) */
.elementor-widget:not(.bs-header-4-area) .bs-subtitle-1,
.elementor-widget:not(.bs-header-4-area) .bs-subtitle-2,
.elementor-widget:not(.bs-header-4-area) .bs-subtitle-3,
.elementor-widget:not(.bs-header-4-area) .bs-subtitle-4,
.elementor-widget:not(.bs-header-4-area) .bs-subtitle-5 {
  margin-bottom: var(--heading-gap-subtitle) !important;
}

/* Main title – the classes used throughout the child theme */
.bs-sec-title-1,
.bs-sec-title-2,
.bs-sec-title-3,
.bs-sec-title-4,
.bs-sec-title-5 {
  margin-bottom: var(--heading-gap-title) !important;
}

/* Decorative line – many sections use a pseudo‑element “::before”. */
.bs-sec-title-1::before,
.bs-sec-title-2::before,
.bs-sec-title-3::before,
.bs-sec-title-4::before,
.bs-sec-title-5::before {
  margin-bottom: var(--heading-gap-underline) !important;
  display: block; /* ensure the margin takes effect */
}

/* Description paragraphs – only affect those directly following a title block */
.bs-sec-title-1 + p,
.bs-sec-title-2 + p,
.bs-sec-title-3 + p,
.bs-sec-title-4 + p,
.bs-sec-title-5 + p,
.bs-subtitle-1 + p,
.bs-subtitle-2 + p,
.bs-subtitle-3 + p,
.bs-subtitle-4 + p,
.bs-subtitle-5 + p {
  margin-top: var(--heading-gap-desc) !important;
}

/* -----------------------------------------------------------------
 * Special case – Elementor’s built‑in .elementor-heading-title class.
 * This catches any heading that was added via the Elementor widget
 * directly rather than through the theme’s custom classes.
 * ----------------------------------------------------------------- */
.elementor-heading-title {
  margin-bottom: var(--heading-gap-title) !important;
}

/* -----------------------------------------------------------------
 * Ensure the spacing does not accumulate when a section already has
 * its own internal padding (handled by the rhythm system).
 * ----------------------------------------------------------------- */
.elementor-top-section .bs-sec-title-1,
.elementor-top-section .bs-sec-title-2,
.elementor-top-section .bs-sec-title-3,
.elementor-top-section .bs-sec-title-4,
.elementor-top-section .bs-sec-title-5 {
  margin-top: 0 !important;
}
/* ============================================================= */

/* ==========================================================================
   Home "Certifications": full-bleed band on tablet and mobile.

   The section paints its #f8f8f9 band on .bs-team-4-area, which sits INSIDE
   Elementor's .elementor-container — so the shared tablet/mobile gutter above
   inset the background itself, leaving a white strip down each side of the
   band while every other section's background ran edge to edge.

   The gutter moves one level in, onto the band's own .container. The band
   spans the viewport and the copy still starts on exactly the same left edge
   as the sections above and below it.
   ========================================================================== */

@media (max-width: 1199px) {
	body.home .elementor > .elementor-top-section.certification-container > .elementor-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.home .certification-container .bs-team-4-area > .container {
		padding-left: var(--mrb-gutter) !important;
		padding-right: var(--mrb-gutter) !important;
	}
}