/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* F23: release the height so width/height attributes act as an
   aspect-ratio hint only and never force an image's box. */
img { height: auto; }

.top-advert {
	border: 0;
}

.breaking-news {
	background-color: #183862 !important;
}

.breaking-news a {
	color: #fff;
}

.bg-danger {
	background-color: #930a13 !important;
}

.grid-filter li.activeFilter a {
	background-color: #1a3764;
}

.bi-phone::before {
  content:url("/images/home/services-1.webp");
}

.bi-eye::before {
  content:url("/images/home/services-2.webp");
}

.bi-star::before {
  content:url("/images/home/services-3.webp");
}

.bi-camera-video::before {
  content:url("/images/home/services-4.webp");
}

.bi-mouse::before {
  content:url("/images/home/services-5.webp");
}

.bi-fire::before {
  content:url("/images/home/services-6.webp");
}
.top-links-contact {
  padding: 12px;
  line-height: calc(var(--cnvs-topbar-height) - 24px);
  font-weight: var(--cnvs-topbar-font-weight);
  text-transform: var(--cnvs-topbar-font-transform);
  color: var(--cnvs-topbar-color);
}

.slider-caption h2 {
	font-size: 3.6rem;
	text-shadow: 4px 4px 2px rgba(0,0,0,0.6);
	margin-top: 60px;
}

:root {
  --cnvs-slider-caption-width: 950px;
  --cnvs-slider-caption-p-size: 2.5rem;
}

.header-stick .col-lg-3 {
	align-self: center;
}

.product .product-image img {
	width: auto;
}

.bi-heart::before {
  content:url("/images/home/moto-icon-1.webp");
}

.bi-file-earmark-richtext::before {
  content:url("/images/home/moto-icon-2.webp");
}

.bi-moto3::before {
  content:url("/images/home/moto-icon-3.webp");
}

.bi-moto4::before {
  content:url("/images/home/moto-icon-4.webp");
}

.bi-check-lg::before {
  content:url("/images/home/moto-icon-5.webp");
}

.bi-lightbulb::before {
  content:url("/images/home/moto-icon-6.webp");
}

#secondary ul {
	margin-left: 20px;
}


#secondary ol {
	margin-left: 20px;
}

.product {
	padding-top: 0px;
}

.product-image {
	padding-top:0px;
	margin-top:0px;
}


h4.team-corporate-name {
	font-size: 1.25rem;
}

.safe-icons {
  float: left;
  padding-right: 10px;
  padding-top: 10px;
  width: 100px;
  clear: both;
  overflow: hidden;
}

.safe-icons img {
  width: 100px;
}


.safety-reimagined-badge {
  width: 400px;
}

a.services-classic-figure img {
	width: 100%;
	object-fit: cover;
}

#header-wrap #logo .logo-default {
	max-width: 185px;
	height: auto;
}

#header-wrap #logo .logo-dark {
	max-width: 294px;
	height: auto;
}

#secondary .widget_links h5 {
	font-size: 16px;
}

.slider-caption p {
	line-height: normal;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}


.i-plain {
  width: 34px;
  height: 34px;
  border: 1px solid #000;
  border-radius: 50%;
}
.bi-hand-thumbs-up::before{content:url("/images/home/header-icon1.webp")}

.bi-truck::before{content:url("/images/home/header-icon2.webp")}

.bi-arrow-counterclockwise::before{content:url("/images/home/header-icon3.webp")}

.cta {
    background: #000;
    color: #fff;
}
.cta h2{
    color: #fff;
    margin-bottom: 10px;
}
.cta p {
    margin-bottom: 10px;
}

#secondary .fslider .slide > a > img {
  width: 50%;
}

#logo img {
    width: 368px;
    height: 89px;
	margin: 7px 0 7px 0;
}

@media (max-width: 975px) {
	.oiw-home .content-wrap {
		padding-top: 0px;
	}
}

@media (max-width: 765px) {
	.header-misc-cirles {
	display: none;
	}
}

.is-expanded-menu .sub-menu-container:not(.mega-menu-dropdown) .menu-item > .menu-link {
	padding: 5px 15px;
}

.sub-menu-container .menu-item .menu-link div {
	font-weight: bold;
}

.is-expanded-menu .sub-menu-container .menu-item > .menu-link {
  font-weight: normal;
}
	
#secondary p, pre, ul, ol {
	margin-bottom: 15px;
}

#secondary h3, .h3, h4, .h4 {
  margin: 0 0 15px 0;
}

.media-box .fbox-media {
	height: 220px;
	overflow: hidden;
}

.media-box .fbox-media a {
	height: 100%;
}

.content-wrap {
	padding-bottom: 0;
}

.grid{
	margin-bottom: 20px;
}

#secondary {
	padding-bottom: 40px;
}

.cta {
    background: #000;
    color: #fff;
}
.cta h2{
    color: #fff;
    margin-bottom: 10px;
}
.cta p {
    margin-bottom: 10px;
}


/* ------------------------------------------------------------------
   F12 - mobile header height
   At 390px the header ran to 221px before any content: a two-row
   utility bar, a 366x89 logo on its own row, then search and menu
   toggle on a third. Below the desktop breakpoint the logo, search
   and toggle now share one row and the utility bar keeps only the
   phone number.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {

  /* utility bar: one row, phone only - the second column duplicates
     links that are already in the menu and the footer */
  /* the quote link stays on phones; the other two repeat the menu and footer */
  #top-bar .tl-extra { display: none; }
  #top-bar p { padding-top: .25rem !important; padding-bottom: .25rem !important; font-size: .8125rem; }

  /* logo, search and menu toggle on a single row */
  #header { position: relative; }
  #header .header-row { flex-direction: row !important; align-items: center; justify-content: flex-start !important; }
  #logo img { width: auto; height: 42px; margin: 0; }
  #logo { padding: 3px 0; }

  body:not(.is-expanded-menu) #header:not(.sticky-header) #header-wrap {
    position: absolute;
    top: 0;
    right: var(--bs-gutter-x, .75rem);
    left: auto;
    width: auto;
    border: 0 !important;
    background: transparent;
  }
  #header-wrap > .container { width: auto; padding: 0; margin: 0; }
  #header-wrap .header-row { justify-content: flex-end; }
  #header-wrap .header-misc { margin: 0; border: 0; }
  #header-wrap .header-row { border: 0; }
  #top-search { border: 0; }
}

/* ------------------------------------------------------------------
   F13 - mobile hero carousel
   At 390px the headline ran at 57.6px, wrapping the longest slide to
   five lines and leaving little of the photograph visible. Both arrow
   controls also sat on top of the caption text. Below the desktop
   breakpoint the headline is smaller with tighter leading, and the
   arrows are hidden in favour of swipe, which Swiper already supports.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  #slider .slider-caption h2 {
    font-size: 2.125rem;   /* 34px, ~59% of the previous 57.6px */
    line-height: 1.12;
  }
  #slider .slider-caption p { font-size: .9375rem; line-height: 1.45; }

  /* controls overlapped the caption at every slide; swipe replaces them */
  #slider .slider-arrow-left,
  #slider .slider-arrow-right { display: none !important; }
}


.safe-icons {
  float: left;
  padding-right: 10px;
  padding-top: 10px;
  width: 100px;
  clear: both;
  overflow: hidden;
}

.safe-icons img {
  width: 100px;
}


.safety-reimagined-badge {
  width: 400px;
}



/* A01: Locations page card grid */
.location-grid { margin-top: 22px; }

.location-card {
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  padding: 18px 20px 16px;
  margin-bottom: 24px;
}

.location-card h3 {
  font-size: 1.0625rem;
  line-height: 1.3;
  margin: 0 0 10px;
}

.location-card address {
  font-style: normal;
  line-height: 1.55;
  margin: 0 0 10px;
}

.location-card .location-tel { margin: 0 0 10px; }

.location-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  background: #eef1f5;
  color: #4a5563;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  vertical-align: middle;
}

.location-directions { font-weight: 500; }

.location-map-heading { margin-top: 14px; }

/* Partner call-outs (Unication, Magnetic Mic): logo tile, name, tagline. Sits in the sidebar. */
.partner-callout { display: flex; gap: 16px; align-items: flex-start; margin-top: 30px; }
.partner-callout-logo { flex: 0 0 100px; display: block; background: #fff; border: 1px solid #e3e6ea; padding: 6px; }
.partner-callout-logo img { display: block; width: 100%; height: auto; }
.partner-callout-text { flex: 1; min-width: 0; }
.partner-callout-name { display: block; font-weight: 600; margin-bottom: 4px; }
.partner-callout-text p { margin: 0; font-size: 14px; line-height: 1.5; }

/* Landscape logos read better above the text than beside it. */
.partner-callout-stacked { flex-direction: column; gap: 10px; }
.partner-callout-stacked .partner-callout-logo { flex: none; width: 180px; max-width: 100%; }

/* Our History: highlight statistics and closing line. */
.history-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 10px 0 40px; }
.history-stat { background: #183862; color: #fff; border-radius: 4px; padding: 22px 12px; text-align: center; }
.history-stat-num { display: block; font-size: 17px; line-height: 1.2; font-weight: 700; margin-bottom: 8px; }
.history-stat-num b { display: block; font-size: 38px; line-height: 1.1; }
.history-stat-label { display: block; font-size: 14px; line-height: 1.4; }
@media (max-width: 991px) { .history-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575px) { .history-stats { grid-template-columns: 1fr; } }
.history-closing { margin: 40px 0 0; padding: 24px 20px; border-top: 3px solid #1983b2; background: #f2f5f9; color: #183862; font-size: 22px; font-weight: 700; line-height: 1.35; text-align: center; }

/* ------------------------------------------------------------------
   CAC round 2 - mobile menu background
   The mobile header sits in an absolutely positioned, transparent
   wrapper (see F12 above), and the drop-down menu lives inside it, so
   the open menu had the page showing through and the links were hard
   to read. The panel now carries its own background.
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  body:not(.is-expanded-menu) #header-wrap .primary-menu .menu-container {
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 4px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .22);
    min-width: 270px;
    max-width: calc(100vw - 24px);
    padding: 4px 0;
  }
  body:not(.is-expanded-menu) #header-wrap .primary-menu .sub-menu-container {
    background: #f7f8fa;
  }
  body:not(.is-expanded-menu) #header-wrap .primary-menu .menu-link {
    color: #16202e;
  }
}

/* ------------------------------------------------------------------
   CAC round 2 - carousel framing on phones
   The slides are set to "center top", which on a phone crops away the
   sides and loses subjects that sit off to one side. The captions keep
   the left of the frame on every screen, so on phones each slide is
   shifted to show more of its right-hand side.
   ------------------------------------------------------------------ */
/* the captions sit at the left of every slide, so the left of the frame is
   darkened behind them and clears before the right, where the photograph
   should still read. Phones get a stronger version, the text being larger
   relative to the picture. */
#slider .swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(100deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .26) 42%, rgba(0, 0, 0, 0) 78%);
  pointer-events: none;
}
#slider .slider-caption { position: relative; z-index: 2; }

@media (max-width: 991.98px) {
  #slider .swiper-slide:nth-child(1) .swiper-slide-bg { background-position: 68% top !important; }
  #slider .swiper-slide::before {
    background: linear-gradient(100deg, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, 0) 85%);
  }
}

/* ------------------------------------------------------------------
   Privacy policy page and the note under each form
   ------------------------------------------------------------------ */
.policy-copy { max-width: 860px; }
.policy-updated { color: #6f7c90; margin-bottom: 26px; }
#secondary h2 + h3 { margin-top: 18px; }