/* Inner-page header gap: style.css declares .margin-top-70 (used by every
   application page, review.php, request-for-quote.php, and 404.php) as
   margin-top:70px !important. responsive.css tries to shrink it to 55px at
   <=1189px, but that rule has no !important, so it can never beat the
   desktop !important - the 70px gap stays pinned at every screen size,
   including phones, which is why inner pages look like they have a much
   bigger header gap than contact.php (whose .page-margin-top has no such
   !important and shrinks normally). Only an !important rule can override
   an existing !important one, and since custom.css loads last, matching
   selector + !important + source order wins this tie and restores the
   theme's own intended tablet/mobile value. */
@media screen and (max-width: 1189px) {
	.margin-top-70 {
		margin-top: 55px !important;
	}
}

/* Grid: 8-item / 4-per-row industry grid.
   The theme's native .services-list only ships 3-column nth-child styling,
   so this adds a 4-column variant with responsive breakpoints. */
.services-list-4-col li {
	width: 25%;
}

@media screen and (max-width: 1189px) {
	.services-list-4-col li h4 {
		min-height: 50px;
	}
}

@media screen and (max-width: 767px) {
	.services-list-4-col li {
		width: 33.3333%;
	}
}

@media screen and (max-width: 479px) {
	.services-list-4-col li {
		width: 100%;
	}

	.services-list-4-col li h4 {
		min-height: auto;
	}
}

.services-list-4-col li:nth-child(3n+1) h4 {
	border-left: 1px solid #E2E6E7;
}

.services-list-4-col li:nth-child(4n+1) h4 {
	border-left: none;
}

/* Font Awesome icons inside the theme's hexagon shape.
   The theme's native .hexagon div:before rule only styles a child <div>
   (used for its own icon font); this styles a plain <i> icon the same way:
   centered, 48px, in the brand accent color. */
.hexagon i {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	font-size: 48px;
	color: #db8a31;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
}

/* Responsive 16:9 video embed wrapper (the theme ships no video component).
   Used for the FIBCA safe-handling YouTube embeds. */
.embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
}

.embed-responsive::before {
	display: block;
	content: "";
	padding-top: 56.25%;
}

.embed-responsive iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Fallback for social platforms with no icon-font glyph (YellowPages). */
.social-text {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Spacing between paired Request Quote / Order Now buttons. */
.buttons-row a.more {
	margin: 0 10px;
}

@media screen and (max-width: 479px) {
	.buttons-row a.more {
		display: block;
		margin: 10px auto;
		max-width: 220px;
	}
}

/* Block-level "more" button variant, used on the review page's platform links. */
.d-block {
	display: block !important;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.img-center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* The theme's .parallax-1 background image (style.css) points to a theme
   demo file that was never copied into this project, so the testimonials
   section (which hardcodes white text in .testimonials-list p/h6, meant to
   sit on a dark photo) rendered as invisible white-on-white. Point it at
   the project's own review-bg.jpg (1920x1200, sized for exactly this use). */
.parallax-1 {
	background-image: url('../images/review-bg.jpg');
	background-size: cover;
	background-position: center;
}
/* Difference section: the theme's own .features-list li defaults to
   width:100% (single column) with no breakpoint-aware multi-column variant.
   This makes it 4 columns on desktop, dropping straight to a single column
   on tablet and mobile (no intermediate 2-column step). */
.difference-list li {
	width: 25%;
	margin-top: 0;
}

/* Revised per updated design direction: tablet now gets its own 2-column
   tier instead of collapsing straight to 1 column like mobile. Real mobile
   (<=767px) keeps the single-column layout on its own, narrower breakpoint. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.difference-list li {
		width: 50%;
		margin-top: 30px;
	}

	.difference-list li:nth-child(-n+2) {
		margin-top: 0;
	}
}

@media screen and (max-width: 767px) {
	.difference-list li {
		width: 100%;
		margin-top: 30px;
	}

	.difference-list li:first-child {
		margin-top: 0;
	}
}

/* FIBCA video grid: revised per updated design direction to stay 2-up at
   tablet, matching desktop's alignment. The theme's own unprefixed
   .column-1-2 rules already give this 360px 2-up layout at <=1189px and
   collapse it to width:100% at <=767px (responsive.css), so this override is
   now only needed at real mobile (<=767px) - .video-grid's .row isn't itself
   full-width, so the theme's own <=767px rule (scoped to
   .row.full-width>.column-1-2) doesn't reach it, and margin-left must still
   be zeroed here for even-numbered items (see the :nth-child(odd) rule
   below, which only covers the row-starting odd items). */
@media screen and (max-width: 767px) {
	.video-grid > .column-1-2 {
		width: 100%;
		margin-left: 0;
	}
}

/* Video grid row 2 alignment: the theme's base .column class only zeroes
   margin-left on the literal first element in the whole document
   (:first-child), not the first item of each subsequent row. In this
   2-column grid that left the 3rd item (row 2, column 1) with the theme's
   default 30px margin-left, shifting row 2 out of alignment with row 1.
   Odd positions start a new row and must be flush left; even positions are
   the right-hand column and keep the 30px gap. No media guard needed: this
   is load-bearing whenever the grid is genuinely 2 columns (desktop and now
   tablet too), and harmless at <=767px since the rule above already forces
   width:100% (and its own margin-left:0) on every item there regardless of
   position. */
.video-grid > .column-1-2:nth-child(odd) {
	margin-left: 0;
}

/* Tablet (768px-1189px): .video-grid's two 360px columns + 30px gap add up
   to exactly 750px - a zero-slack fit against its row's own 750px width, so
   the videos sit flush against the row's edge with only the row's own thin
   auto-centering margin (see the .theme-page article/h2/p fix above)
   separating them from the device edge. Unlike that fix, this row can't be
   left alone or excluded - it needs its own padding. Padding the row
   (border-box, so its own outer 750px/centering is unchanged) and shrinking
   its columns to fit the resulting 710px interior (340*2+30=710) adds real
   breathing room without overflowing. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.video-grid {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.video-grid > .column-1-2 {
		width: 340px;
	}
}

/* FIBCA safe-handling guide: caps the poster image at its native size so
   it doesn't stretch edge-to-edge inside the full-width gray band. Uses
   width (not max-width) so .img-fluid's max-width:100% still wins on
   narrow viewports instead of being overridden by a later same-property
   rule. display:inline-block (rather than the default inline) keeps the
   wrapping <a>'s clickable box exactly matched to the image itself. */
.fibc-guide-image {
	display: inline-block;
	width: 600px;
}

/* Header top-bar social icons: swapped from the theme's icon font
   (fonts/social/styles.css) to Font Awesome brand icons. Sized/colored to
   match the icon glyphs they replace (style.css .social-icons a:before was
   font-size:14px; color/hover already inherit from .social-icons a rules).
   Footer social icons are intentionally left on the theme's icon font. */
.header-top-bar .social-icons i {
	font-size: 14px;
	line-height: 1;
	vertical-align: middle;
}

.header-top-bar .social-icons .social-text {
	vertical-align: middle;
}

/* Logo/hamburger: the theme has no CSS anywhere that constrains the logo
   image itself (only the wrapping .logo table-cell gets a width per
   breakpoint), so the raw 600x96 image's unshrinkable intrinsic width forces
   the cell wider than its specified width at every breakpoint - this is why
   the logo renders oversized (and, at mobile, crowds the hamburger with no
   gap) regardless of what .logo's own width says. Capping the image lets
   the container widths below actually take effect. */
#site-logo {
	max-width: 100%;
	height: auto;
}

/* Tablet (768px-1189px): with the image now capped above, give .logo a real,
   deliberately roomier width than mobile's and center it. Scoped with an
   explicit min-width (not a plain max-width:1189px) so this never bleeds
   into the mobile rule below - the two used to overlap unguarded, and since
   mobile's rule came later in the file it silently won at every width,
   making "tablet" render with the mobile logo size. .menu-container is
   force-switched out of table-cell display (see below) so .logo ends up the
   only thing in the header's row; inline-block lets .header's text-align
   center it instead of it sitting flush left. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.header {
		text-align: center;
	}

	.header .logo {
		display: inline-block;
		width: 260px;
	}
}

/* Mobile (<=767px): the hamburger switch is visible alongside the logo in
   this row now, and table-cell layout has no gap mechanism to space them
   apart. Flex gives real control: a smaller, fixed logo width plus
   justify-content:space-between pushes the hamburger to the far right with
   a clear gap between them. align-items:center replaces the
   vertical-align:middle the table-cell layout provided. .menu-container
   (the collapsible mobile menu) is forced onto its own full-width line
   below via flex-basis, matching its previous float:left;clear:both
   behavior instead of sharing the logo/hamburger row.
   .header:after{display:none} matters here: .header also carries the
   theme's .clearfix class, whose ::after{content:"."} pseudo-element
   becomes an invisible THIRD flex item once .header is display:flex.
   justify-content:space-between then distributes the gap between all three
   items, leaving the hamburger stranded mid-row while the invisible dot
   claims the true right edge. Flex containers never need the clearfix hack
   (they contain floats/children on their own), so disabling the pseudo is
   safe. width:100%;margin:0 overrides responsive.css's own .header rule
   (width:462px with style.css's margin-left/right:auto still active), which
   centered a narrow fixed-width header inside the full-width row - that
   centering margin was the empty space appearing around the whole
   logo/hamburger group instead of between them. Full width lets
   space-between reach the true screen edges. padding (with border-box)
   restores breathing room from the device edge without reintroducing the
   auto-margin centering bug, matching the 20px side padding already used
   for the tablet CTA band below. .mobile-menu-switch's margin-left/right:
   auto (style.css) is zeroed here too - as a flex item, those auto margins
   claim the free space for themselves before justify-content runs, so
   space-between had nothing left to distribute and the hamburger sat with
   self-centered gaps on both sides instead of flush against the row's
   right edge. */
@media screen and (max-width: 767px) {
	.header {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.header:after {
		display: none;
	}

	.header .logo {
		width: 175px;
	}

	.header .mobile-menu-switch {
		margin-left: 0;
		margin-right: 0;
	}

	.menu-container {
		flex: 0 0 100%;
	}
}

/* Tablet (768px-1189px): the theme keeps its desktop horizontal .sf-menu nav
   visible at this width (the hamburger only takes over at <=767px -
   responsive.css ~lines 597-604). Scoped with an explicit min-width, not a
   plain max-width:1189px: responsive.css forces .sf-menu to display:none at
   <=767px, and since custom.css loads after responsive.css a plain
   max-width rule here would win that tie at mobile too and incorrectly
   re-show the desktop nav there.
   .menu-container is forced out of table-cell display (its
   .vertical-align-cell class) and given display:block;width:100% - as a
   table-cell, the earlier float:none;text-align:center had no real effect:
   table-cells ignore float entirely, so .menu-container was never actually
   dropping onto its own line under the logo - it was sitting beside it as a
   second, cramped table-cell, which is why centering never visibly worked.
   Once it's a real block box it naturally starts a new line (no other
   table-cell siblings remain: .mobile-menu-switch is still display:none
   here, and .logo is now inline-block, not table-cell), and text-align on
   it centers the inline-block nav within the full row width. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.menu-container {
		display: block;
		float: none;
		width: 100%;
		text-align: center;
	}

	.menu-container nav {
		float: none;
		display: inline-block;
	}

	.sf-menu {
		display: inline-block;
	}
}

/* Tablet (768px-1189px): .row is a fixed 750px, centered via margin:auto -
   at a 768px viewport that's only ~9px of breathing room per side, reading
   as content touching the device edge. .row itself can't safely shrink
   here: several grids (video-grid, footer's 4-column, contact's 3-column)
   are hand-tuned in fixed px to exactly fill 750px, so a narrower .row
   would overflow them. Padding the plain text/image content elements
   directly (never a grid container itself) adds guaranteed margin with no
   such risk - .theme-page article covers every application page's
   heading+image+paragraph (and contact.php's), h2.box-header/p.description
   cover home.php's own section headings/copy (plus the shared difference
   section heading), and .buttons-row covers the request-quote/order-now
   pair. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.theme-page article,
	.theme-page h2.box-header,
	.theme-page p.description,
	.theme-page .buttons-row {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/* Tablet (768px-1189px): the "LET US KNOW HOW WE CAN HELP" CTA band is the
   only full-width section on the page whose content (this h3) is a direct
   child of .row.full-width with no inner .row wrapping it - every other
   full-width band gets its side margin for free from an inner 750px-wide
   .row. Give it the same breathing room directly so its content doesn't sit
   flush against the device edge. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.row.full-width > h3 {
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
}

/* Tablet (768px-1189px): the footer's 2x2 grid (responsive.css switches
   .row-4-4 to display:flex;flex-wrap:wrap at <=1189px) has the same
   zero-slack fit as the video grid above - two 360px columns + a 30px gap
   add up to exactly the row's own 750px width, so the footer content sits
   flush against the row's edge. Same fix: pad the row (border-box, outer
   750px/centering unchanged) and shrink its columns to fit the resulting
   710px interior (340*2+30=710). Scoped to .row-4-4 .column-1-4
   specifically (not the bare .column-1-4 rule) so nothing else that might
   reuse that class elsewhere is affected. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	.row-4-4 {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.row-4-4 .column-1-4 {
		width: 340px;
	}
}

/* Tablet (768px-1189px): contact.php's 3-column info grid has the same
   zero-slack fit as the video grid/footer above - three 230px columns +
   two 30px gaps add up to exactly the row's own 750px width. Same fix:
   pad the row and shrink its columns to fit the resulting 710px interior
   (216*3+60=708). contact.php reuses the identical "row page-margin-top"
   class for both its outer wrapper (around <article>) and this inner grid
   row, so a class selector alone can't tell them apart - the grid row is
   the one immediately following <article>, which is unique to this page's
   structure. */
@media screen and (min-width: 768px) and (max-width: 1189px) {
	article + .row.page-margin-top {
		padding: 0 20px;
		box-sizing: border-box;
	}

	article + .row.page-margin-top .column-1-3 {
		width: 216px;
	}
}

/* Desktop/tablet nav dropdown indicator: .sf-menu (Superfish) has no visual
   cue anywhere in the theme that "Products"/"Applications" open a submenu -
   it relies purely on hover, unlike the mobile menu's dedicated
   .template-arrow-menu toggle. menu.php's renderMenuItem() now emits this
   chevron inside the link itself (only for items with a submenu), so it's
   sized/colored here to sit quietly next to the label rather than looking
   like a separate control. */
.sf-menu .dropdown-arrow {
	font-size: 10px;
	margin-left: 5px;
	vertical-align: middle;
}