@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

html {
  font-size: 14px;
}

/* Global default font */
html, body {
  font-family: 'Roboto', sans-serif;
}

/* Mobile safety defaults */
*, *::before, *::after {
  box-sizing: border-box;
}

img, svg, video, canvas {
  max-width: 100%;
  height: auto;
}

.mylec-container {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* Mylec base theme */
:root {
  --mylec-red: #c1121f;
  --mylec-red-dark: #8f0d15;
  --mylec-white: #F2F2F2;
  --mylec-gray-50: #f7f7f7;
  --mylec-gray-100: #f1f1f1;
  --mylec-gray-200: #e6e6e6;
  --mylec-gray-700: #3b3b3b;
  --mylec-gray-900: #1a1a1a;

  --mylec-radius: 14px;
  --mylec-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body {
  margin: 0;
  color: var(--mylec-gray-900);
  background: var(--mylec-white);
}

.mylec-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

.mylec-content-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

.mylec-content-container--wide {
  max-width: 1600px;
}

/* Layout main wrapper: keep mobile-friendly padding/width but avoid narrowing desktop */
.mylec-main-container {
  width: 100%;
}

@media (max-width: 992px) {
  .mylec-main-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    overflow-wrap: anywhere;
  }
}

.mylec-main {
  min-height: 60vh;
}

/* Header */
.mylec-topbar {
  background: #e31c28; /* updated topbar red */
  color: var(--mylec-white);
  font-size: 1.05rem; /* slightly larger */
}

.mylec-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
}

.mylec-topbar-link,
.mylec-badge-link {
  color: var(--mylec-white);
  text-decoration: none;
}

.mylec-topbar-link:hover,
.mylec-badge-link:hover {
  text-decoration: underline;
}

/* Prevent default browser blue for links on hover/focus/active; keep component-specific hover colors */
a:hover, a:focus, a:active {
  color: inherit;
}

.mylec-topbar-sep {
  margin: 0 8px;
  opacity: 0.85;
}

/* Social icons in topbar */
.mylec-social-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  vertical-align: middle;
  display: inline-block;
}

.mylec-topbar-icon {
  width: 22px;
  height: 22px;
  fill: currentColor;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block;
}

.mylec-topbar-contact {
  font-weight: 700;
}

.mylec-badge-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; /* scaled down */
  height: 32px; /* scaled down */
  padding: 0;
  background: var(--mylec-white);
  border-radius: 50%;
  color: #e31c28; /* logo color inside the white circle */
  text-decoration: none;
}

.mylec-topbar-right .mylec-badge-link + .mylec-badge-link {
  margin-left: 8px;
}

.mylec-social-icon--fb {
  width: 20px;
  height: 20px;
}

.mylec-social-icon--ig {
  width: 23px;
  height: 23px;
}

/* ensure social svg paths use currentColor for the logo */
.mylec-social-icon,
.mylec-social-icon--fb,
.mylec-social-icon--ig {
  fill: currentColor;
  display: block;
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.mylec-navbar {
  /* Force a full-bleed pure white background across the entire navbar row */
  background-color: #ffffff !important;
  left: 0;
  right: 0;
  width: 100%;
  /* keep container visible; inner will clip the oversized logo */
  position: relative;
  z-index: 1000; /* keep navbar above page content so dropdowns are visible */
}


/* Ensure the navbar uses a white background */
.mylec-navbar,
.mylec-navbar-inner {
  /* use pure white for the visual surface (override theme variable) */
  background-color: #ffffff !important;
}

/* Push the nav items to the right side of the header on desktop */
.mylec-navbar .mylec-nav {
  /* default: keep nav items inline; alignment handled by the nav element */
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

/* On desktop, the desktop-only nav sits outside the navbar-inner container
   and displays its items right-aligned */
@media (min-width: 992px) {
  .mylec-navbar > nav.d-none.d-lg-block {
    width: 100%;
    background-color: #ffffff !important;
  }

  .mylec-navbar > nav.d-none.d-lg-block .mylec-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .mylec-navbar > nav.d-none.d-lg-block .mylec-nav {
    margin: 0 !important;
    display: flex !important;
    gap: 18px !important;
    align-items: center !important;
  }
}

/* Force the specific container holding the logo + menu to a pure white background
   so it appears distinct from the slightly off-white theme variable. */
.mylec-navbar .mylec-container.mylec-navbar-inner {
  background-color: #ffffff !important;
}

/* Ensure the centered container is transparent so the navbar's full-bleed white shows
   across the full viewport (prevents a subtle different background color from showing
   on the left/right gutters). */
.mylec-navbar .mylec-container {
  background: transparent !important;
  /* keep the usual horizontal inset for centered content */
  padding-left: 16px;
  padding-right: 16px;
}

/* Use absolute positioning for the toggler on small screens so it always sits
   at the right edge of the navbar area and does not shift left when other
   flex items wrap. Only applies on mobile where the toggler is visible. */
@media (max-width: 991.98px) {
  .mylec-navbar .mylec-container.mylec-navbar-inner {
    position: relative; /* establishes containing block for absolutely positioned toggler */
  }

  .mylec-navbar .mylec-container.mylec-navbar-inner > .navbar-toggler {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-left: 0 !important;
    z-index: 1100 !important;
  }
}

/* Ensure a true viewport-wide white bar behind the navbar even when the
   navbar is inside a centered container. This covers any left/right gutters. */
.mylec-navbar::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  width: 100vw;
  height: 100%;
  background: #ffffff;
  z-index: -1;
}

@media (max-width: 992px) {
  .mylec-navbar .mylec-container.mylec-navbar-inner {
    padding-left: 12px;
    padding-right: 12px;
  }
}

.mylec-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 80px; /* fixed navbar height */
  overflow-x: visible; /* allow horizontal overflow so logo can be shifted left */
  overflow-y: visible; /* allow dropdowns to extend beyond the navbar vertically */
}

/* Bootstrap toggler (header) */
.mylec-navbar-inner .navbar-toggler {
  border: none;
  background-color: transparent;
  padding: 4px;
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mylec-navbar-inner .navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

/* Custom hamburger icon - 3 horizontal lines */
.mylec-navbar-inner .navbar-toggler-icon {
  background-image: none;
  width: 28px;
  height: 2px;
  background-color: var(--mylec-gray-900);
  position: relative;
  display: block;
  transition: all 0.3s ease;
}

.mylec-navbar-inner .navbar-toggler-icon::before,
.mylec-navbar-inner .navbar-toggler-icon::after {
  content: '';
  position: absolute;
  width: 28px;
  height: 2px;
  background-color: var(--mylec-gray-900);
  left: 0;
  transition: all 0.3s ease;
}

.mylec-navbar-inner .navbar-toggler-icon::before {
  top: -8px;
}

.mylec-navbar-inner .navbar-toggler-icon::after {
  top: 8px;
}

.mylec-logo {
  height: 100%;
  display: flex;
  align-items: center; /* center content vertically */
  overflow: hidden; /* ensure any overflow from the img is clipped inside the logo area */
}

.mylec-logo img {
  display: block;
  height: 159px;
  width: auto;
  transform: translateX(-10px); /* offset logo left by 10px */
}

.mylec-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Offcanvas specific styles for the mobile left-side menu */
.mylec-offcanvas {
  max-width: 280px;
  background-color: #ffffff;
}

.mylec-offcanvas .offcanvas-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--mylec-gray-200);
}

.mylec-offcanvas .offcanvas-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--mylec-gray-900);
}

.mylec-offcanvas .offcanvas-body {
  padding: 1rem 0;
}

.mylec-nav--offcanvas {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mylec-nav--offcanvas .mylec-nav-link {
  padding: 14px 1.5rem;
  border-radius: 0;
  background: transparent;
  color: var(--mylec-gray-900);
  font-weight: 600;
  font-size: 1rem;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.mylec-nav--offcanvas .mylec-nav-link:hover {
  background-color: var(--mylec-gray-50);
  border-left-color: var(--mylec-red);
  color: var(--mylec-red);
}

.mylec-nav--offcanvas .mylec-nav-dropdown {
  width: 100%;
}

.mylec-nav--offcanvas .mylec-nav-dropdown-toggle {
  width: 100%;
  text-align: left;
  padding: 14px 1.5rem;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.mylec-nav--offcanvas .mylec-nav-dropdown-toggle:hover {
  background-color: var(--mylec-gray-50);
  border-left-color: var(--mylec-red);
  color: var(--mylec-red);
}

.mylec-offcanvas .mylec-nav-dropdown-menu {
  position: static !important;
  transform: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: var(--mylec-gray-50) !important;
  padding: 0.5rem 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

.mylec-offcanvas .mylec-nav-dropdown-item {
  padding: 12px 1.5rem 12px 3rem;
  font-size: 0.95rem;
  border-left: 3px solid transparent;
  transition: all 0.2s ease;
}

.mylec-nav-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-right: 12px;
  color: var(--mylec-gray-700);
  flex-shrink: 0;
}

.mylec-nav--offcanvas .mylec-nav-link,
.mylec-nav--offcanvas .mylec-nav-dropdown-toggle {
  justify-content: flex-start; /* left align text */
}

/* Ensure offcanvas links fill the width and align their content to the left */
.mylec-nav--offcanvas .mylec-nav-link {
  display: flex !important;
  width: 100% !important;
  text-align: left !important;
}

.mylec-offcanvas .mylec-nav-dropdown-item {
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  padding-left: 3rem; /* keep icon offset for nested items */
}

.mylec-offcanvas .mylec-nav-dropdown-menu {
  padding-left: 0.5rem !important;
}

.mylec-offcanvas .mylec-nav-dropdown-item:hover {
  background-color: var(--mylec-gray-100);
  border-left-color: var(--mylec-red);
  color: var(--mylec-red);
}

.mylec-nav-link {
  color: var(--mylec-gray-900);
  text-decoration: none;
  font-weight: 600;
}

.mylec-nav-link:hover {
  color: var(--mylec-red);
}

.mylec-nav-dropdown {
  position: relative;
}

.mylec-nav-dropdown-toggle {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.mylec-nav-dropdown-menu {
  min-width: 180px;
  background: var(--mylec-white);
  border: 1px solid var(--mylec-gray-200);
  border-radius: 10px;
  box-shadow: var(--mylec-shadow);
  padding: 8px;
  z-index: 2000; /* place dropdown above navbar/logo/content */
}

/* Header now uses Bootstrap dropdown; do not rely on hover-only behavior */

.mylec-nav-dropdown-item {
  display: block;
  padding: 10px 10px;
  border-radius: 8px;
  color: var(--mylec-gray-900);
  text-decoration: none;
  font-weight: 600;
}

.mylec-nav-dropdown-item:hover {
  background: var(--mylec-gray-50);
  color: var(--mylec-red);
}

.mylec-header-splitter {
  height: 4px;
  background: var(--mylec-red);
}

.mylec-breadcrumbs {
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.mylec-breadcrumbs .breadcrumb {
  padding: 10px 0;
}

.mylec-breadcrumbs .breadcrumb-item a {
  color: var(--mylec-gray-900);
  text-decoration: none;
  font-weight: 700;
}

.mylec-breadcrumbs .breadcrumb-item a:hover {
  text-decoration: underline;
}

/* Searchable combobox dropdown */
.mylec-combobox {
  position: relative;
}

.mylec-combobox__list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  max-height: 240px;
  overflow-y: auto;
  z-index: 2500;
}

.mylec-combobox__option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 12px;
  border: 0;
  background: transparent;
}

.mylec-combobox__option:hover,
.mylec-combobox__option.is-active {
  background: rgba(0, 0, 0, 0.05);
}

/* Footer */
.mylec-contact {
  position: relative;
  color: var(--mylec-white);
  padding: 48px 0;
}

.mylec-contact-bg {
  position: absolute;
  inset: 0;
  background: url('/images/Backrround%20Image%20sub.png') center / cover no-repeat;
  filter: saturate(0.9);
  z-index: 0;
}

.mylec-contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.mylec-contact-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 24px;
}

.mylec-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.mylec-section-title h2 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
}

.mylec-section-title-line {
  flex: 1;
  height: 2px;
  background: var(--mylec-red);
}

/* red left line variant for Contact Us header */
.mylec-section-title-line--red {
  background: var(--mylec-red);
  width: 18%; /* approx same visible length as white lines */
  display: inline-block;
  vertical-align: middle;
  height: 4px;
  margin-right: 10px;
}

/* Larger Contact Us heading */
.mylec-contact-heading {
  margin: 0 12px 0 0;
  display: inline-block;
  vertical-align: middle;
  font-size: 1.35rem; /* H3-sized */
}

.mylec-section-title--light .mylec-section-title-line {
  background: var(--mylec-white);
  opacity: 0.9;
}

/* For footer Contact Us, override light section styles so lines and heading are red */
.mylec-contact .mylec-section-title--light .mylec-section-title-line,
.mylec-contact .mylec-section-title--light .mylec-section-title-line--red {
  background: var(--mylec-red) !important;
  opacity: 1 !important;
}

.mylec-contact .mylec-contact-heading {
  color: #ffffff !important; /* make footer Contact heading white */
  font-size: 1.35rem; /* H3-sized */
}

.mylec-contact-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mylec-card {
  border-radius: var(--mylec-radius);
  padding: 14px;
  box-shadow: var(--mylec-shadow);
}

/* Make footer cards match the visual style of the top feature cards */
.mylec-contact .mylec-card {
  background: #ffffff; /* force pure white for footer cards */
  border: 1px solid #333333;
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
  color: var(--mylec-gray-900);
  text-align: center; /* center content under icon */
  padding-top: 12px;
}

.mylec-card-icon {
  display: block;
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin: 0 auto 8px auto; /* center at top with spacing */
}

.mylec-contact .mylec-card-title {
  margin-top: 8px;
}

/* Footer contact card title and value color adjustments */
.mylec-contact .mylec-card-title {
  color: var(--mylec-red);
  font-weight: 800;
}

.mylec-contact .mylec-card-value,
.mylec-contact .mylec-card-value a {
  color: var(--mylec-gray-900);
  text-decoration: none;
}

/* Style the contact form to match feature cards */
.mylec-contact .mylec-form {
  background: var(--mylec-white);
  border: 1px solid #333333;
  box-shadow: 0 14px 36px rgba(0,0,0,0.25);
  padding: 18px;
}

.mylec-contact .mylec-form input,
.mylec-contact .mylec-form textarea {
  border: 1px solid #000000 !important; /* black border */
  background: var(--mylec-gray-200) !important; /* light gray background */
  color: var(--mylec-gray-700) !important; /* dark gray text */
  border-radius: 12px !important; /* rounded edges */
  padding: 10px 12px !important;
  outline: none !important;
  box-sizing: border-box;
  -webkit-appearance: none;
}

/* ensure placeholders are slightly muted */
.mylec-contact .mylec-form input::placeholder,
.mylec-contact .mylec-form textarea::placeholder {
  color: rgba(59,59,59,0.5) !important;
}

/* Make the Send button span the full width of the form */
.mylec-contact .mylec-form .mylec-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 18px;
}

.mylec-contact .mylec-form .mylec-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.06rem rgba(193,18,31,0.25);
}

.mylec-card--light {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.20);
}

/* Ensure the three service feature cards on the Home page are pure white on all viewports */
.mylec-section[aria-label="Services"] .mylec-feature-card,
.mylec-feature-grid > .mylec-feature-card {
  background-color: #ffffff !important;
  color: var(--mylec-gray-900) !important;
  border: 1px solid #333333 !important;
}

/* Ensure icons inside these cards have transparent background so they sit on white */
.mylec-section[aria-label="Services"] .mylec-feature-card .mylec-feature-icon img {
  background: transparent !important;
}

.mylec-card-title {
  font-weight: 800;
  color: var(--mylec-white);
}

.mylec-card-value,
.mylec-card-value a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
}

.mylec-card-value a:hover {
  text-decoration: underline;
}

.mylec-form {
  background: rgba(255, 255, 255, 0.10);
  border-radius: var(--mylec-radius);
  border: 1px solid rgba(255, 255, 255, 0.20);
  padding: 16px;
  box-shadow: var(--mylec-shadow);
}

.mylec-form-field {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.mylec-form-field span {
  font-weight: 700;
}

.mylec-form input,
.mylec-form textarea {
  width: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--mylec-gray-900);
}

.mylec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  border: 0;
  cursor: pointer;
}

.mylec-btn--primary {
  background: var(--mylec-red);
  color: var(--mylec-white);
}

.mylec-btn--primary:hover {
  background: var(--mylec-red-dark);
}

/* CTA buttons under About Us bullets */
.mylec-cta-actions {
  margin-top: 18px;
  display: flex;
  gap: 12px;
}

.mylec-btn--cta {
  background: var(--mylec-red);
  color: var(--mylec-white);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mylec-btn--cta:hover {
  background: var(--mylec-red-dark);
}

.mylec-footer-splitter {
  height: 4px;
  background: var(--mylec-red);
}

.mylec-map {
  background: var(--mylec-white);
  padding: 28px 0;
}

/* Stretch the map embed to full viewport width while keeping the same height */
.mylec-map-embed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
  padding: 0 16px; /* keep some horizontal inset so inline links are visible */
}

.mylec-map-embed iframe {
  width: 100%;
  height: 360px;
  border: 0;
  border-radius: 14px;
  box-shadow: var(--mylec-shadow);
}

.mylec-map-link {
  margin-top: 10px;
  max-width: 1200px; /* constrain link line to page width */
  margin-left: auto;
  margin-right: auto;
  padding: 0 8px;
  box-sizing: border-box;
}

.mylec-map-link a {
  color: var(--mylec-red);
  font-weight: 700;
  text-decoration: none;
}

.mylec-map-link a:hover {
  text-decoration: underline;
}

.mylec-footer-bottom {
  background: #ffffff; /* force pure white for footer bottom */
  padding: 30px 0 36px;
}

.mylec-footer-bottom-inner {
  display: grid;
  justify-items: center;
  gap: 14px;
}

.mylec-footer-logo img {
  width: 320px; /* doubled size in footer */
  max-width: 100%;
  height: auto;
  display: block;
}

/* Cropping wrapper for footer logo so you can hide excess white space.
   Use CSS variables to adjust the visible area: --crop-w, --crop-h, --crop-x, --crop-y
   Values are in px (or % for responsive adjustments). */
.mylec-footer-logo-crop {
  --crop-w: 280px; /* visible width */
  --crop-h: 140px; /* visible height */
  --crop-x: 0px;   /* horizontal offset (positive moves image left) */
  --crop-y: -40px;   /* vertical offset (positive moves image up) */

  width: var(--crop-w);
  height: var(--crop-h);
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.mylec-footer-logo-crop img {
  /* keep the doubled width but allow shifting to crop */
  width: 320px;
  height: auto;
  transform: translate(var(--crop-x), var(--crop-y));
  display: block;
}

.mylec-footer-nav {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: center;
}

.mylec-footer-link {
  color: var(--mylec-gray-900);
  font-weight: 800;
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.mylec-footer-link:hover {
  color: var(--mylec-red);
  border-bottom-color: var(--mylec-red);
}

.mylec-footer-link--active {
  border-bottom-color: var(--mylec-red);
}

.mylec-footer-copy {
  color: var(--mylec-gray-700);
}

/* full width red footer bar with current year copyright */
.mylec-footer-bar {
  background: var(--mylec-red);
  color: var(--mylec-white);
  padding: 10px 0;
}

.mylec-footer-bar .mylec-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mylec-footer-bar .mylec-footer-copy {
  color: var(--mylec-white);
  font-weight: 700;
}

@media (max-width: 992px) {
  .mylec-contact-inner {
    grid-template-columns: 1fr;
  }

  .mylec-contact-cards {
    grid-template-columns: 1fr;
  }
}

/* Landing page */
.mylec-hero {
  position: relative;
  /* increase bottom padding so the background image extends further down */
  padding: 190px 0 160px;
  color: var(--mylec-white);
}

.mylec-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/images/Backrround%20Image%20Main.png') center / cover no-repeat;
  z-index: 0;
}

.mylec-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.mylec-hero-inner {
  position: relative;
  z-index: 2;
}

/* center hero content and actions */
.mylec-hero-content {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.mylec-hero-subtitle {
  margin: 0 auto 22px;
  text-align: center;
  font-size: 1.125rem; /* slightly larger for better readability */
  line-height: 1.6;
}

.mylec-hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center; /* center buttons */
  margin-top: 8px;
}

@media (max-width: 600px) {
  .mylec-hero-actions {
    flex-direction: column;
    gap: 10px;
    align-items: center;
  }
}

/* ------------------------------
   Account (employee portal) layout
   Retail-style structure (inspired by modern ecommerce UX patterns)
   Applies only to `/Account/*` pages via `Pages/Shared/_AccountLayout.cshtml`.
   ------------------------------ */

.account-shell {
  background: var(--mylec-white);
  color: #222222;
}

.retail-header {
  position: sticky;
  top: 0;
  z-index: 1030;
}

.retail-topbar {
  background: var(--mylec-red);
  color: var(--mylec-white);
  font-size: 0.875rem;
}

.retail-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 16px;
}

.retail-topbar__right {
  display: flex;
  gap: 12px;
}

.retail-topbar__link {
  color: var(--mylec-white);
  text-decoration: none;
  opacity: 0.95;
  transition: opacity 180ms ease;
}

.retail-topbar__link:hover,
.retail-topbar__link:focus-visible {
  opacity: 1;
}

.retail-navbar {
  background: var(--mylec-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.retail-breadcrumbs {
  background: var(--mylec-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 10px 0;
}

.retail-breadcrumbs .breadcrumb-item a {
  color: #222222;
  text-decoration: none;
  font-weight: 800;
}

.retail-breadcrumbs .breadcrumb-item a:hover {
  text-decoration: underline;
}

.retail-navbar__inner {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

.retail-navbar__brand {
  text-decoration: none;
  color: #222222;
  font-weight: 900;
  letter-spacing: 0.2px;
}

.retail-navbar__menu {
  appearance: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  background: var(--mylec-white);
  border-radius: 10px;
  padding: 8px 10px;
  line-height: 0;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.retail-navbar__menu:hover,
.retail-navbar__menu:focus-visible {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.28);
}

.retail-navbar__menu-icon {
  display: inline-block;
  width: 18px;
  height: 12px;
  background: linear-gradient(#222222 2px, transparent 2px) 0 0 / 100% 5px;
}

.retail-navbar__search {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.retail-search__input {
  width: 100%;
  max-width: 620px;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 10px 14px;
}

.retail-search__button {
  border: 1px solid var(--mylec-red);
  background: var(--mylec-red);
  color: var(--mylec-white);
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.retail-search__button:hover,
.retail-search__button:focus-visible {
  background: var(--mylec-red-dark);
  border-color: var(--mylec-red-dark);
}

.retail-navbar__links {
  display: none;
  gap: 16px;
  justify-content: flex-start;
}

.retail-navlink {
  color: #222222;
  text-decoration: none;
  padding: 6px 4px;
  border-bottom: 2px solid transparent;
  transition: border-color 200ms ease;
}

.retail-navlink:hover,
.retail-navlink:focus-visible {
  border-color: var(--mylec-red);
}

.retail-navbar__cart {
  justify-self: end;
  color: #222222;
  text-decoration: none;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  transition: box-shadow 200ms ease, border-color 200ms ease;
}

.retail-navbar__cart:hover,
.retail-navbar__cart:focus-visible {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.28);
}

.retail-offcanvas {
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.retail-drawer {
  display: grid;
  gap: 4px;
}

.retail-drawer__link {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: #222222;
  transition: background-color 200ms ease;
}

.retail-drawer__link:hover,
.retail-drawer__link:focus-visible {
  background: rgba(0, 0, 0, 0.04);
}

.retail-drawer__divider {
  border-color: rgba(0, 0, 0, 0.12);
}

.retail-main {
  min-height: calc(100vh - 160px);
}

.retail-hero {
  background: #F5F5F5;
}

.retail-hero__inner {
  padding: 36px 16px;
}

.retail-hero__content {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.retail-hero__title {
  font-weight: 900;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.retail-hero__subtitle {
  margin-bottom: 18px;
  color: rgba(34, 34, 34, 0.85);
}

.retail-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mylec-red);
  color: var(--mylec-white);
  border-radius: 999px;
  padding: 10px 18px;
  text-decoration: none;
  font-weight: 800;
  transition: background-color 200ms ease;
}

.retail-hero__cta:hover,
.retail-hero__cta:focus-visible {
  background: var(--mylec-red-dark);
}

.retail-account-content {
  padding: 24px 16px 40px;
}

.retail-login__inner {
  display: grid;
  justify-items: center;
  padding: 0 16px 12px;
}

.retail-card {
  width: 100%;
  max-width: 520px;
  background: var(--mylec-white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.retail-card--wide {
  max-width: 1600px;
}

.retail-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 900;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}

.retail-btn--primary {
  background: var(--mylec-red);
  border-color: var(--mylec-red);
  color: var(--mylec-white);
}

.retail-btn--primary:hover,
.retail-btn--primary:focus-visible {
  background: var(--mylec-red-dark);
  border-color: var(--mylec-red-dark);
}

.retail-btn--outline {
  background: var(--mylec-white);
  border-color: rgba(0, 0, 0, 0.18);
  color: #222222;
}

.retail-btn--outline:hover,
.retail-btn--outline:focus-visible {
  border-color: rgba(0, 0, 0, 0.32);
  background: rgba(0, 0, 0, 0.02);
}

.retail-btn--sm {
  padding: 6px 12px;
  font-weight: 800;
  font-size: 0.875rem;
}

.retail-tile {
  display: grid;
  gap: 6px;
  height: 100%;
  padding: 18px;
  border-radius: 14px;
  text-decoration: none;
  background: var(--mylec-white);
  color: #222222;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.retail-tile:hover,
.retail-tile:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
}

.retail-tile__title {
  font-weight: 900;
}

.retail-tile__subtitle {
  color: rgba(34, 34, 34, 0.7);
  font-size: 0.9rem;
}

.retail-filterbar {
  padding: 14px;
  border-radius: 14px;
  background: var(--mylec-white);
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.06);
}

.retail-footer {
  background: var(--mylec-red);
  color: var(--mylec-white);
}

.retail-footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  padding: 32px 16px;
}

.retail-footer__title {
  font-weight: 900;
  margin-bottom: 8px;
}

.retail-footer__link {
  display: block;
  color: var(--mylec-white);
  text-decoration: none;
  opacity: 0.95;
  padding: 4px 0;
  transition: opacity 180ms ease;
}

.retail-footer__link:hover,
.retail-footer__link:focus-visible {
  opacity: 1;
}

@media (min-width: 768px) {
  .retail-navbar__inner {
    grid-template-columns: auto auto 1fr auto auto;
  }

  .retail-navbar__links {
    display: flex;
  }

  .retail-footer__inner {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
  }

  .retail-hero__inner {
    padding: 48px 16px;
  }
}

@media (min-width: 1200px) {
  .retail-navbar__inner,
  .retail-topbar__inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .retail-hero__content {
    text-align: left;
  }
}

/* Hero curve SVG */
.mylec-hero-curve {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* sit at hero bottom */
  width: 100%;
  height: 160px;
  display: block;
  z-index: 3; /* above overlay */
}

.mylec-hero-kicker {
  font-weight: 800;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
  font-size: 2em; /* make kicker text approximately 3x bigger */
  line-height: 1;
}

/* kicker with small red bars each side */
.mylec-hero-kicker {
  position: relative;
  text-align: center;
}
.mylec-hero-kicker::before, .mylec-hero-kicker::after {
  content: '';
  display: inline-block;
  width: 36px;
  height: 4px;
  background: #e31c28;
  vertical-align: middle;
  margin: 0 12px;
}

.mylec-hero-title {
  margin: 0 0 12px;
  font-weight: 900;
  text-align: center;
  font-size: 3.2rem;
  line-height: 1.02;
}

.mylec-hero-subtitle {
  margin: 0 auto 22px; /* center horizontally and provide spacing */
  max-width: 62ch;
  color: rgba(255, 255, 255, 0.92);
  text-align: center;
  font-size: 1.125rem; /* slightly larger */
  line-height: 1.6;
}

.mylec-hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.mylec-hero-actions .mylec-btn {
  border-radius: 10px;
  padding: 12px 28px;
  box-shadow: var(--mylec-shadow);
}

/* Feature cards overlapping hero */
.mylec-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: -90px; /* moved up further to better overlap the hero */
}

.mylec-feature-card {
  background: var(--mylec-white); /* updated to use theme variable */
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.12);
  text-align: center;
  transform: translateY(0);
}

/* Make feature cards fully opaque with a solid black border */
.mylec-feature-card {
  background: var(--mylec-white) !important;
  border: 1px solid #000000;
}

.mylec-feature-icon {
  font-size: 34px;
  color: var(--mylec-red);
  margin-bottom: 12px;
}

.mylec-feature-title {
  color: var(--mylec-red);
  font-weight: 800;
  margin-bottom: 10px;
}

.mylec-feature-text {
  color: var(--mylec-gray-700);
}

.mylec-section {
  padding: 48px 0;
}

.mylec-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.mylec-feature-card {
  /* Make cards visually pop above the hero */
  background: var(--mylec-white); /* solid white */
  border: 1px solid #333333; /* dark gray edge */
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 14px 36px rgba(0,0,0,0.25); /* stronger shadow */
  position: relative;
  z-index: 20; /* ensure it sits above overlays */
}

.mylec-feature-icon {
  font-size: 28px;
  margin-bottom: 8px;
}

/* style images inside feature icons */
.mylec-feature-icon img {
  width: 44px;
  height: 44px;
  display: inline-block;
  object-fit: contain;
}
}

.mylec-feature-title {
  margin: 0 0 6px;
  color: var(--mylec-red);
  font-weight: 900;
}

.mylec-feature-text {
  margin: 0;
  color: var(--mylec-gray-700);
}

.mylec-split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 24px;
  /* stretch columns to the same height so the image can match the left content height */
  align-items: stretch;
}

.mylec-split--reverse {
  grid-template-columns: 1.05fr 0.95fr;
}

.mylec-split--reverse .mylec-split-media {
  order: 2;
}

.mylec-split-media {
  /*
    Controls for media size and vertical offset:
    --mylec-split-media-scale : multiplier of column height (0.5 = 50%).
    --mylec-split-media-offset-y : vertical offset to move image (supports px, %, etc.).
    Increase --mylec-split-media-scale to make the image bigger.
  */
  --mylec-split-media-scale: 0.7; /* increase default size (0.8 = 80% of column height) */
  --mylec-split-media-offset-y: -59px;

  /* center the media and allow vertical centering; allow overflow so transparent image parts are visible */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.mylec-split-media img {
  width: auto;
  /* limit image size to a fraction of the column height without cropping */
  height: auto;
  max-height: calc(100% * var(--mylec-split-media-scale));
  object-fit: contain;
  background: transparent; /* keep PNG transparency visible */
  border-radius: var(--mylec-radius);
  box-shadow: var(--mylec-shadow);
  display: block;
  max-width: 100%;
  transform: translateY(var(--mylec-split-media-offset-y));
}

/* Reduce the scale on smaller viewports so the image fits comfortably */
@media (max-width: 992px) {
  .mylec-split-media {
    --mylec-split-media-scale: 0.6;
  }
}

.mylec-section-kicker {
  color: var(--mylec-red);
  font-weight: 600;
  font-size: 1.35rem;
  margin-bottom: 8px;
}

.mylec-section-heading {
  margin: 0 0 12px;
  font-weight: 900;
}

.mylec-bullets {
  margin: 14px 0 0;
  padding-left: 18px;
  list-style: none;
}

.mylec-bullets li {
  margin: 6px 0;
  position: relative;
  padding-left: 34px; /* space for the custom bullet */
}

.mylec-bullets li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url('/images/icons/arrow-red.svg') no-repeat center/contain;
}

.mylec-reviews {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 18px;
  align-items: start;
}

/* When the reviews section only contains the image cards, make it a single column
   so the image spans the full width instead of a left/right split. Uses :has()
   which is supported in modern browsers. */
.mylec-reviews:has(.mylec-reviews-cards:only-child) {
  grid-template-columns: 1fr;
}

.mylec-stars {
  color: var(--mylec-red);
  font-weight: 900;
  letter-spacing: 0.08em;
}

.mylec-reviews-note {
  color: var(--mylec-gray-700);
  margin-top: 8px;
}

.mylec-reviews-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.mylec-review-card {
  background: var(--mylec-white);
  border: 1px solid var(--mylec-gray-200);
  border-radius: var(--mylec-radius);
  padding: 14px;
  box-shadow: var(--mylec-shadow);
}

.mylec-google-review-img {
  width: 100%;
  max-width: 1200px; /* match container max width */
  height: auto;
  border-radius: 12px;
  border: 2px solid #333333; /* dark gray border around the image */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); /* stronger shadow */
  display: block;
  margin: 0 auto;
}

/* center the reviews image container and constrain its width to the main container */
.mylec-reviews .mylec-reviews-cards {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px; /* match page horizontal padding */
  box-sizing: border-box;
}

/* keep normal section padding so the image has breathing room */
.mylec-section[aria-label="Google Reviews"] {
  padding: 48px 0;
}

@media (max-width: 600px) {
  .mylec-google-review-img {
    width: 100%;
    max-width: 100%;
  }
}

.mylec-review-stars {
  color: var(--mylec-red);
  font-weight: 900;
  margin-bottom: 6px;
}

.mylec-products-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0 0 16px;
  padding-left: 18px;
}

/* Products grid without a table look; arrow bullets for items */
.mylec-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px 12px; /* reduced spacing between rows and columns */
  margin: 0 0 8px;
}

.mylec-products-item {
  position: relative;
  padding: 6px 0;
  padding-left: 22px; /* space for the arrow */
  color: var(--mylec-gray-900);
}

.mylec-products-header {
  font-weight: 800;
  padding-left: 0; /* headers don't get arrow space */
  padding-bottom: 4px;
  margin-bottom: 2px;
}

/* red arrow before each non-header item, but not for empty placeholders */
.mylec-products-item:not(.mylec-products-header):not(.mylec-products-empty)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: url('/images/icons/arrow-red.svg') center/contain no-repeat;
}

/* last row is visually placed to the right by keeping the cell in the right column */
.mylec-products-grid .mylec-products-item--right {
  /* no extra styles needed; markup places this item in the right column */
}

@media (max-width: 768px) {
  .mylec-products-grid {
    grid-template-columns: 1fr;
  }
  .mylec-products-item {
    padding-left: 0;
  }
  .mylec-products-item:not(.mylec-products-header)::before {
    /* inline arrow for stacked mobile layout */
    position: static;
    transform: none;
    display: inline-block;
    margin-right: 8px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
  }
}

/* About Us */
.mylec-feature-grid--two {
  grid-template-columns: repeat(2, 1fr);
}

.mylec-about-mv {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 22px;
  align-items: start;
  margin-top: 16px;
}

.mylec-about-actions {
  margin-top: 14px;
  display: flex;
  justify-content: flex-start; /* right-align the action buttons under the cards */
  gap: 12px;
  align-items: center;
}

/* Make Mission & Vision feature cards white in the About Us section */
.mylec-about-mv .mylec-feature-card {
  /* force a solid white card in About Us and ensure readable dark text */
  background: #ffffff !important;
  border: 1px solid #333333 !important;
  color: var(--mylec-gray-900) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,0.25) !important;
}

.mylec-about-mv .mylec-feature-card .mylec-feature-icon img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  margin: 0 auto 8px;
}
/* make sure title and body text inside these cards are dark */
.mylec-about-mv .mylec-feature-card .mylec-feature-title,
.mylec-about-mv .mylec-feature-card .mylec-feature-text {
  color: var(--mylec-gray-900) !important;
}

.mylec-values {
  position: relative;
  padding: 80px 0;
  color: var(--mylec-white);
  background: linear-gradient(180deg, rgba(193, 18, 31, 0.0) 0%, rgba(193, 18, 31, 1) 8%, rgba(193, 18, 31, 1) 92%, rgba(193, 18, 31, 0.0) 100%);
}

.mylec-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 18px;
}

.mylec-value-card {
  background: rgba(0, 0, 0, 0.18);
  border: 2px solid rgba(139, 0, 0, 0.6);
  border-radius: var(--mylec-radius);
  padding: 40px 24px;
  text-align: center;
}

.mylec-value-card h3 {
  margin: 0 0 16px;
  font-weight: 900;
  font-size: 1.5rem;
}

.mylec-value-card p {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
}

.mylec-certifications-section {
  padding: 56px 0;
  background: var(--mylec-white);
}

.mylec-certifications-section .mylec-section-title {
  margin-bottom: 24px;
}

.mylec-certifications-section .mylec-section-title-line {
  background: var(--mylec-red);
}

.mylec-certifications-section h2 {
  color: var(--mylec-gray-900);
}

.mylec-certifications {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 16px;
}

.mylec-certifications img {
  width: 100%;
  height: 120px;
  object-fit: contain;
  background: var(--mylec-white);
  border: 1px solid var(--mylec-gray-200);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--mylec-shadow);
}

@media (max-width: 992px) {
  .mylec-contact-inner {
    grid-template-columns: 1fr;
  }

  .mylec-contact-cards {
    grid-template-columns: 1fr;
  }

  .mylec-feature-grid {
    grid-template-columns: 1fr;
  }

  .mylec-split,
  .mylec-split--reverse {
    grid-template-columns: 1fr;
  }

  .mylec-split--reverse .mylec-split-media {
    order: 0;
  }

  .mylec-reviews {
    grid-template-columns: 1fr;
  }

  .mylec-reviews-cards {
    grid-template-columns: 1fr;
  }

  .mylec-feature-grid--two {
    grid-template-columns: 1fr;
  }

  .mylec-about-mv {
    grid-template-columns: 1fr;
  }

  .mylec-values-grid {
    grid-template-columns: 1fr;
  }

  .mylec-certifications {
    grid-template-columns: 1fr 1fr;
  }
}