:root {
--font: Karla, sans-serif;


--base-color: #003366;


--base-text-color: #FFFFFF;


--footer-color: #003366;


--footer-text-color: #FFFFFF;


--button-color: #be202f;


--button-hover-color: #be202f;


--button-text-color: #FFFFFF;


--header-color: #003366;


--header-text-color: #FFFFFF;


--clear-filters-display-text: inline-block;


--clear-filters-display-icon: inline-block;

}

	.es-clear-all-filters-button .button-text {
	display: var(--clear-filters-display-text);
	}

	.es-clear-all-filters-button .button-icon {
	display: var(--clear-filters-display-icon);
	}

/* ==========================================================
   GLOBAL FULL WIDTH RESET TEST
   ========================================================== */

html, body {
  margin: 0;
  padding: 0;
}


/* ==========================================================
   BRAND COLOR
   ========================================================== */

:root {
  --sysgbs-header-bg: #003366;
}


/* ==========================================================
   HEADER
   ========================================================== */

.header-wrapper,
.header-wrapper .header,
.header-wrapper .header-bar,
.menu-wrapper,
.menu-wrapper .menu-bar {
  background-color: var(--sysgbs-header-bg) !important;
}

/* Keep top-level nav items white only */
.menu-wrapper .menu-bar-items > .menu-bar-item > a.menu-bar-item-label,
.menu-wrapper .menu-bar-items > .menu-bar-item > a.menu-bar-item-label i,
.header-wrapper .header-bar-section-links a,
.header-wrapper .header-bar-section-links a i {
  color: #ffffff !important;
}


/* ==========================================================
   HEADER CLEANUP
   ========================================================== */

/* Hide cart total */
.minibasket-sum {
  display: none !important;
}

/* Hide Ex Tax */
.vat-switcher {
  display: none !important;
}

/* Mobile header contact info */
@media (max-width: 768px) {
  .header-bar-section {
    float: none !important;
    width: 100% !important;
  }

  .header-bar-section-links {
    float: none !important;
    display: flex !important;
    justify-content: space-between !important;
    width: 100% !important;
    font-size: 12px !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
  }

  .header-bar-section-links a {
    white-space: nowrap !important;
    float: none !important;
  }

  /* Hide the divider on mobile */
  .header-bar-section-links .divider,
  .header-bar-section-links > span:not(:first-child):not(:last-child) {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .header-bar-section-links {
    font-size: 11px !important;
    padding: 0 10px !important;
  }
}


/* ==========================================================
   PRODUCTS + DROPDOWN FIXES
   ========================================================== */

/* Reset overly broad white text */
.menu-wrapper a,
.menu-wrapper a i {
  color: inherit !important;
}

/* Desktop dropdown background */
.menu-bar-desktop-products,
.menu-bar-desktop-products .menu-bar-desktop-categories-menu,
.menu-bar-desktop-products .menu-bar-desktop-categories-menu-items,
.menu-bar-desktop-products .menu-bar-desktop-categories-menu-item,
.resource-menu-desktop {
  background: #ffffff !important;
}

/* Desktop dropdown text */
.menu-bar-desktop-products a,
.menu-bar-desktop-products a i,
.menu-bar-desktop-categories-menu-item-label,
.resource-menu-desktop a,
.resource-menu-desktop a i {
  color: #111111 !important;
}

/* Hover state inside dropdowns */
.menu-bar-desktop-products a:hover,
.resource-menu-desktop a:hover {
  background-color: #f2f4f7 !important;
  color: var(--sysgbs-header-bg) !important;
}

/* Mobile drilldown */
.menu-bar-products-content,
.menu-bar-products-content ul,
.menu-bar-products-content li {
  background: #ffffff !important;
}

.menu-bar-products-content a,
.menu-bar-products-content a i {
  color: #111111 !important;
}


/* ==========================================================
   HERO BANNER FULL WIDTH
   ========================================================== */

/* Remove gap between header and banner */
.header-wrapper,
.header-wrapper .header,
.menu-wrapper,
.menu-wrapper .menu-bar {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Remove gap above banner */
.first-page-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Make banner section full width */
.banners {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: -30px !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.banners .bx-wrapper,
.banners .bx-viewport,
.banners ul,
.banners li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.banners img {
  width: 100% !important;
  height: 420px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Responsive heights */
@media (max-width: 640px) {
  .banners img { height: 260px !important; }
}
@media (min-width: 641px) and (max-width: 1024px) {
  .banners img { height: 340px !important; }
}


/* ==========================================================
   HERO TEXT (NO DARK OVERLAY)
   ========================================================== */

/* HEADLINE */
.banners::before {
  content: "END-TO-END MANAGED IT SERVICES";
  position: absolute;
  left: 0;
  right: 0;
  top: 35%;
  z-index: 3;

  text-align: center;
  color: #ffffff;

  font-family: "Montserrat", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;

  font-size: 52px;
  line-height: 1.15;

  text-shadow: 0 2px 18px rgba(0,0,0,0.55);

  pointer-events: none;
}

/* Ensure LI positioning context */
.banners .bxslider li {
  position: relative !important;
}

/* SUBHEADLINE */
.banners .bxslider li::after {
  content: "Powered by Leading Industry Experts";
  position: absolute;
  left: 0;
  right: 0;
  top: 65%;
  z-index: 3;

  text-align: center;
  color: #ffffff;

  font-family: "Montserrat", "Roboto", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;

  font-size: 34px;
  line-height: 1.15;

  text-shadow: 0 2px 18px rgba(0,0,0,0.55);

  pointer-events: none;
}


/* Responsive typography */
@media (max-width: 1400px) {
  .banners::before { font-size: 38px; }
  .banners .bxslider li::after { font-size: 24px; }
}

@media (max-width: 1100px) {
  .banners::before { font-size: 30px; }
  .banners .bxslider li::after { font-size: 20px; }
}

@media (max-width: 800px) {
  .banners::before {
    font-size: 22px;
    letter-spacing: 0.08em;
  }
  .banners .bxslider li::after {
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .banners::before {
    font-size: 18px;
    letter-spacing: 0.05em;
  }

  .banners .bxslider li::after {
    font-size: 14px;
  }
}