/**
 * Modern dark landing theme – image-forward, no avatars.
 * Inspired by modern 3D/creative sites: dark base, gradient accents, your images as focus.
 */

/* =============================================================================
   CSS custom properties
   ============================================================================= */
.landing-modern {
  --lm-bg: #1a2332;
  --lm-bg-soft: #223044;
  --lm-bg-card: rgba(255, 255, 255, 0.06);
  --lm-border: rgba(255, 255, 255, 0.1);
  --lm-text: #e8ecf1;
  --lm-text-muted: #9aa8b8;
  --lm-accent: #22a6f2;
  --lm-accent-2: #06d6a0;
  --lm-gradient: linear-gradient(135deg, #22a6f2 0%, #06d6a0 100%);
  --lm-radius: 16px;
  --lm-radius-sm: 10px;
}

/* =============================================================================
   Page background (dark) – site-wide when body has .landing-modern
   ============================================================================= */
.body-3.landing-modern,
.body-3.home.landing-modern,
.body-2.landing-modern,
body.landing-modern {
  background-color: var(--lm-bg) !important;
  background-image: none !important;
  overflow-x: hidden;
}

/* Prevent horizontal scroll on mobile/desktop */
body.landing-modern {
  overflow-x: hidden;
}

/* Images never exceed container (mobile/desktop) */
body.landing-modern img {
  max-width: 100%;
  height: auto;
}

/* =============================================================================
   Typography – ensure all text is clearly visible on dark background (site-wide)
   ============================================================================= */
body.landing-modern {
  color: var(--lm-text);
}

/* Headings – all visible */
body.landing-modern .heading,
body.landing-modern .heading-2,
body.landing-modern .heading-3,
body.landing-modern .heading-52,
body.landing-modern .heading-53,
body.landing-modern .heading-54,
body.landing-modern .heading-55,
body.landing-modern h1,
body.landing-modern h2,
body.landing-modern h3,
body.landing-modern h4,
body.landing-modern h5,
body.landing-modern h6 {
  color: var(--lm-text) !important;
}

/* Paragraphs and text blocks */
body.landing-modern .paragraph-2,
body.landing-modern .paragraph-3,
body.landing-modern .paragraph-4,
body.landing-modern .paragraph-5,
body.landing-modern .paragraph-6,
body.landing-modern .text-block-7,
body.landing-modern .text-block-8,
body.landing-modern .text-block-9,
body.landing-modern p {
  color: var(--lm-text) !important;
}

/* Catch-all: any heading-/paragraph-/text-block- class across all pages */
body.landing-modern [class^="heading-"],
body.landing-modern [class*=" heading-"] {
  color: var(--lm-text) !important;
}
body.landing-modern [class^="paragraph-"],
body.landing-modern [class*=" paragraph-"] {
  color: var(--lm-text) !important;
}
body.landing-modern [class^="text-block-"],
body.landing-modern [class*=" text-block-"] {
  color: var(--lm-text) !important;
}


/* Section backgrounds – keep content readable when sections have images/overlays */
body.landing-modern .section-6 {
  background-image: none !important;
  background-color: var(--lm-bg) !important;
}

body.landing-modern .section-7,
body.landing-modern .section-8 {
  background-color: transparent !important;
  background-image: none !important;
}

/* POS pages (Comcash, PC America): sections that are light in base theme – use dark so text is visible */
body.landing-modern .section-32,
body.landing-modern .section-32.secc33,
body.landing-modern .section-33 {
  background-color: var(--lm-bg-soft) !important;
  background-image: none !important;
}

/* POS / Aldelo: hero and feature sections – dark for consistency and text visibility */
body.landing-modern .section-27,
body.landing-modern .section-28,
body.landing-modern .section-29 {
  background-color: var(--lm-bg-soft) !important;
  background-image: none !important;
}

/* Lists and bold text – clearly visible on all pages (POS, IT Services, etc.) */
body.landing-modern li,
body.landing-modern .list-4,
body.landing-modern .list-5,
body.landing-modern .list-6,
body.landing-modern .unordered-list,
body.landing-modern .unordered-list-2,
body.landing-modern .unordered-list-3,
body.landing-modern .list-item-13,
body.landing-modern strong,
body.landing-modern .bold-text-4,
body.landing-modern .bold-text-9,
body.landing-modern .bold-text-10,
body.landing-modern [class^="bold-text-"],
body.landing-modern [class*=" bold-text-"] {
  color: var(--lm-text) !important;
}

/* POS tab labels (ALDELO, PC AMERICA, COMCASH) – base theme uses dark blue #0a1485 */
body.landing-modern .section-26 .text-block-25,
body.landing-modern .section-26 .text-block-26,
body.landing-modern .section-26 .text-block-27 {
  color: var(--lm-text) !important;
}

/* POS 3rd tab (Comcash) – “SUPPORT FOR AN ADVANCED EMV & NFC PAYMENT TERMINAL” block: base uses very light blue bg + dark text; we force dark bg + light text so it’s visible */
body.landing-modern .div-block-55.comcash {
  background-color: var(--lm-bg-soft) !important;
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius-sm);
}
body.landing-modern .div-block-55.comcash .heading-13,
body.landing-modern .div-block-55.comcash .bold-text-12,
body.landing-modern .div-block-55.comcash .unordered-list.comcashtext,
body.landing-modern .div-block-55.comcash .unordered-list.comcashtext li,
body.landing-modern .div-block-55.comcash .list-item-13.comcashtxt,
body.landing-modern .div-block-55.comcash .list-item-14,
body.landing-modern .div-block-55.comcash .list-item-15 {
  color: var(--lm-text) !important;
}

/* Buttons and links in content – visible */
body.landing-modern .button-7,
body.landing-modern .button-8,
body.landing-modern .w-button {
  color: #fff !important;
}

/* =============================================================================
   IP Cameras page (body-4) – white cards get dark background so text is visible
   ============================================================================= */
body.landing-modern.body-4 .container-23 {
  background: var(--lm-bg-soft) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
body.landing-modern.body-4 .container-23 .paragraph-17 {
  color: var(--lm-text) !important;
}

/* Featured product card (4 MP Mini Bullet, “For pricing information”, etc.) */
body.landing-modern.body-4 .column-22 {
  background: var(--lm-bg-soft) !important;
  border-color: var(--lm-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
body.landing-modern.body-4 .column-22 h4,
body.landing-modern.body-4 .column-22 .heading-21,
body.landing-modern.body-4 .column-22 > div:first-child h4,
body.landing-modern.body-4 .column-22 > div:first-child p {
  color: var(--lm-text) !important;
}
body.landing-modern.body-4 .column-22 .text-block-22 {
  color: var(--lm-accent) !important;
}
body.landing-modern.body-4 .camera-product-section__title {
  color: var(--lm-text) !important;
}

/* =============================================================================
   Software page – section-14 and white cards (Office 365, Anti-Virus, Online Backup)
   ============================================================================= */
body.landing-modern .section-14 {
  background-color: var(--lm-bg) !important;
  background-image: none !important;
}
body.landing-modern .section-14 .heading-9 {
  color: var(--lm-text) !important;
}
body.landing-modern .container-18 .div-block-17,
body.landing-modern .container-18 .div-block-18,
body.landing-modern .container-18 .div-block-19 {
  background: var(--lm-bg-soft) !important;
  background-image: none !important;
  border: 1px solid var(--lm-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
body.landing-modern .container-18 .div-block-17 .text-block-17,
body.landing-modern .container-18 .div-block-17 .text-block-18,
body.landing-modern .container-18 .div-block-17 .text-block-19,
body.landing-modern .container-18 .div-block-18 .text-block-17,
body.landing-modern .container-18 .div-block-18 .text-block-18,
body.landing-modern .container-18 .div-block-18 .text-block-19,
body.landing-modern .container-18 .div-block-19 .text-block-17,
body.landing-modern .container-18 .div-block-19 .text-block-18,
body.landing-modern .container-18 .div-block-19 .text-block-19,
body.landing-modern .container-18 .div-block-17 .paragraph-9,
body.landing-modern .container-18 .div-block-17 .paragraph-10,
body.landing-modern .container-18 .div-block-17 .paragraph-11,
body.landing-modern .container-18 .div-block-18 .paragraph-9,
body.landing-modern .container-18 .div-block-18 .paragraph-10,
body.landing-modern .container-18 .div-block-18 .paragraph-11,
body.landing-modern .container-18 .div-block-19 .paragraph-9,
body.landing-modern .container-18 .div-block-19 .paragraph-10,
body.landing-modern .container-18 .div-block-19 .paragraph-11 {
  color: var(--lm-text) !important;
}
body.landing-modern .container-18 .div-block-17 strong,
body.landing-modern .container-18 .div-block-18 strong,
body.landing-modern .container-18 .div-block-19 strong,
body.landing-modern .container-18 .div-block-17 .bold-text-2,
body.landing-modern .container-18 .div-block-18 .bold-text,
body.landing-modern .container-18 .div-block-19 .bold-text-2 {
  color: var(--lm-text) !important;
}
body.landing-modern .container-18 .button-11,
body.landing-modern .container-18 .button-12,
body.landing-modern .container-18 .button-13 {
  color: #fff !important;
}

/* =============================================================================
   Laptops, Server, Workstations – white/light cards (product description,
   options, Other Products cards). Same layout/classes across all three.
   ============================================================================= */
/* Content wrapper: Workstations has .workstations (styled below); Laptops/Server use a plain div – remove white outer area */
body.landing-modern[udesly-page-name="laptops"] > div:nth-child(2),
body.landing-modern[udesly-page-name="server"] > div:nth-child(2) {
  background-color: var(--lm-bg) !important;
}
body.landing-modern .workstations {
  background-color: var(--lm-bg) !important;
}
body.landing-modern .column-37 > div {
  background: var(--lm-bg-soft) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
body.landing-modern .column-37 .text-block-62,
body.landing-modern .column-37 .text-block-61,
body.landing-modern .column-37 .text-block-67,
body.landing-modern .column-37 .bold-text-22,
body.landing-modern .column-37 strong,
body.landing-modern .column-37 a {
  color: var(--lm-text) !important;
}
body.landing-modern .column-37 a:hover {
  color: var(--lm-accent) !important;
}

body.landing-modern .div-block-78 .div-block-74,
body.landing-modern .div-block-78 .div-block-75 {
  background: var(--lm-bg-soft) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
body.landing-modern .div-block-78 .heading-51,
body.landing-modern .div-block-78 .text-block-56,
body.landing-modern .div-block-78 .text-block-57,
body.landing-modern .div-block-78 .text-block-58,
body.landing-modern .div-block-78 .text-block-59,
body.landing-modern .div-block-78 strong {
  color: var(--lm-text) !important;
}

body.landing-modern .heading-50 {
  color: var(--lm-text) !important;
}

body.landing-modern .div-block-79,
body.landing-modern .div-block-80 {
  background: var(--lm-bg-soft) !important;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  outline: none !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
body.landing-modern .div-block-79 .button-23,
body.landing-modern .div-block-79 .button-24,
body.landing-modern .div-block-80 .button-23,
body.landing-modern .div-block-80 .button-24 {
  color: #fff !important;
}

.body-3.home .section-34 {
  min-height: 0;
  background: transparent;
}

/* =============================================================================
   Hero section – two-column: text left, featured image right (not stacked)
   ============================================================================= */
.landing-hero {
  padding: 3rem 2rem 4rem;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}

@media (min-width: 640px) {
  .landing-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 3rem;
  }
}

.landing-hero__text {
  text-align: left;
}

.landing-hero__title {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--lm-text);
  margin: 0 0 1rem;
  letter-spacing: -0.02em;
}

.landing-hero__title .gradient {
  background: var(--lm-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-hero__sub {
  font-size: 1.1rem;
  color: var(--lm-text-muted);
  max-width: 520px;
  margin: 0 0 1.5rem;
  line-height: 1.6;
}

/* Horizontal stats strip – breaks vertical stack */
.landing-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  margin-bottom: 2rem;
  padding: 0.75rem 0;
  border-top: 1px solid var(--lm-border);
  border-bottom: 1px solid var(--lm-border);
}

.landing-hero__stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  color: var(--lm-text-muted);
  font-size: 0.9rem;
}

.landing-hero__stat strong {
  color: var(--lm-text);
  font-weight: 600;
  font-size: 1rem;
}

.landing-hero__stat em {
  font-style: normal;
  font-size: 0.85rem;
  opacity: 0.9;
}

.landing-hero__stat:not(:last-child) {
  padding-right: 1.5rem;
  border-right: 1px solid var(--lm-border);
}

@media (max-width: 480px) {
  .landing-hero__stats {
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
  }
  .landing-hero__stat:not(:last-child) {
    padding-right: 0;
    padding-bottom: 0.5rem;
    border-right: none;
    border-bottom: 1px solid var(--lm-border);
  }
}

.landing-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.landing-hero__btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.landing-hero__btn--primary {
  background: var(--lm-gradient);
  color: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(34, 166, 242, 0.35);
}

.landing-hero__btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34, 166, 242, 0.45);
  filter: brightness(1.08);
}

.landing-hero__btn--outline {
  background: transparent;
  color: var(--lm-accent);
  border: 2px solid var(--lm-accent);
}

.landing-hero__btn--outline:hover {
  transform: translateY(-2px);
  background: rgba(34, 166, 242, 0.1);
}

/* Hero mini cards (right column) – keep these; duplicates removed from Solutions */
.landing-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.landing-hero__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(90px, 100%), 1fr));
  gap: 0.75rem;
  width: 100%;
  max-width: 400px;
  perspective: 900px;
}

.landing-hero__mini-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--lm-radius-sm);
  overflow: visible;
  border: 1px solid var(--lm-border);
  background: var(--lm-bg-card);
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  transform-style: preserve-3d;
}

.landing-hero__mini-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.35);
  border-color: rgba(34, 166, 242, 0.3);
}

/* 3D live look: image sits in space with depth and hover lift */
.landing-hero__mini-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--lm-radius-sm) var(--lm-radius-sm) 0 0;
  transform-style: preserve-3d;
  transform: translateZ(0) rotateX(1deg) rotateY(0deg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.15),
    0 6px 12px rgba(0, 0, 0, 0.12),
    0 12px 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.35s cubic-bezier(0.34, 1.2, 0.64, 1), box-shadow 0.35s ease;
}

.landing-hero__mini-card:hover img {
  transform: translateZ(14px) scale(1.04) rotateX(-2deg) rotateY(0deg);
  box-shadow:
    0 8px 16px rgba(0, 0, 0, 0.2),
    0 16px 32px rgba(0, 0, 0, 0.18),
    0 24px 48px rgba(0, 0, 0, 0.12);
}

.landing-hero__mini-card span {
  display: block;
  padding: 0.5rem 0.6rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--lm-accent);
  background: rgba(34, 166, 242, 0.1);
  text-align: center;
  line-height: 1.2;
}

/* =============================================================================
   Section heading (breaks the stack, gives hierarchy)
   ============================================================================= */
.landing-cards-section {
  padding: 0 2rem 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.landing-cards__heading {
  font-family: 'Lato', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--lm-text);
  margin: 0;
  letter-spacing: -0.02em;
}

/* =============================================================================
   Service cards – asymmetric grid (2x2 then 3), not one uniform stack
   ============================================================================= */
.landing-modern .container-40,
.landing-modern .container-39 {
  padding-left: 2rem;
  padding-right: 2rem;
  margin-bottom: 3rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/* First block: 2-column grid = 2 larger cards per row (2x2) */
.landing-modern .container-40 .w-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* Second block: 3-column grid = one row of 3 cards */
.landing-modern .container-39 .w-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 1.5rem;
  align-items: start;
}

/* Let grid control width; prevent base .w-col width from shrinking cells */
.landing-modern .container-40 .w-col,
.landing-modern .container-39 .w-col {
  min-width: 0;
  max-width: none;
  width: auto;
}

@media (max-width: 767px) {
  .landing-modern .container-40 .w-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .landing-modern .container-39 .w-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Card block: dark card with image on top; label area not clipped */
.landing-modern .container-40 .div-block-65,
.landing-modern .container-40 .div-block-66,
.landing-modern .container-40 .div-block-67,
.landing-modern .container-40 .div-block-68,
.landing-modern .container-39 .div-block-65,
.landing-modern .container-39 .div-block-66,
.landing-modern .container-39 .div-block-67,
.landing-modern .container-39 .div-block-68 {
  background: var(--lm-bg-card);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-radius);
  overflow: hidden;
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  height: 100%;
}

.landing-modern .container-40 .div-block-65 .homebutton,
.landing-modern .container-40 .div-block-65 .button-19,
.landing-modern .container-40 .div-block-66 .homebutton,
.landing-modern .container-40 .div-block-67 .homebutton,
.landing-modern .container-40 .div-block-68 .homebutton,
.landing-modern .container-39 .div-block-65 .homebutton,
.landing-modern .container-39 .div-block-66 .homebutton,
.landing-modern .container-39 .div-block-67 .homebutton,
.landing-modern .container-39 .div-block-68 .homebutton {
  flex-shrink: 0;
  margin-top: auto;
}

.landing-modern .container-40 .div-block-65:hover,
.landing-modern .container-40 .div-block-66:hover,
.landing-modern .container-40 .div-block-67:hover,
.landing-modern .container-40 .div-block-68:hover,
.landing-modern .container-39 .div-block-65:hover,
.landing-modern .container-39 .div-block-66:hover,
.landing-modern .container-39 .div-block-67:hover,
.landing-modern .container-39 .div-block-68:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  border-color: rgba(34, 166, 242, 0.25);
}

/* Image: full-width, rounded top; fixed flex so cards align */
.landing-modern .container-40 .div-block-65 img,
.landing-modern .container-40 .div-block-66 img,
.landing-modern .container-40 .div-block-67 img,
.landing-modern .container-40 .div-block-68 img,
.landing-modern .container-39 .div-block-65 img,
.landing-modern .container-39 .div-block-66 img,
.landing-modern .container-39 .div-block-67 img,
.landing-modern .container-39 .div-block-68 img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: none;
  border-radius: var(--lm-radius) var(--lm-radius) 0 0;
  box-shadow: none;
  transition: transform 0.4s ease, filter 0.3s ease;
  flex-shrink: 0;
}

.landing-modern .container-40 .div-block-65:hover img,
.landing-modern .container-40 .div-block-66:hover img,
.landing-modern .container-40 .div-block-67:hover img,
.landing-modern .container-40 .div-block-68:hover img,
.landing-modern .container-39 .div-block-65:hover img,
.landing-modern .container-39 .div-block-66:hover img,
.landing-modern .container-39 .div-block-67:hover img,
.landing-modern .container-39 .div-block-68:hover img {
  transform: scale(1.04);
  filter: brightness(1.05);
}

/* Button below image – full label visible, no truncation */
.landing-modern .container-40 .homebutton,
.landing-modern .container-40 .button-19,
.landing-modern .container-39 .homebutton,
.landing-modern .container-39 .button-19 {
  display: block;
  margin: 0;
  padding: 1rem 1.25rem;
  text-align: center;
  border-radius: 0 0 var(--lm-radius-sm) var(--lm-radius-sm);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  background: rgba(34, 166, 242, 0.15);
  color: var(--lm-accent);
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
  white-space: normal;
  overflow: visible;
  word-wrap: break-word;
  min-height: 2.75em;
  line-height: 1.3;
  width: 100%;
  box-sizing: border-box;
}

.landing-modern .container-40 .button-19,
.landing-modern .container-39 .button-19 {
  background: var(--lm-gradient);
  color: #fff;
}

.landing-modern .container-40 .div-block-65:hover .homebutton,
.landing-modern .container-40 .div-block-66:hover .homebutton,
.landing-modern .container-40 .div-block-67:hover .homebutton,
.landing-modern .container-40 .div-block-68:hover .homebutton,
.landing-modern .container-39 .div-block-65:hover .homebutton,
.landing-modern .container-39 .div-block-66:hover .homebutton,
.landing-modern .container-39 .div-block-67:hover .homebutton,
.landing-modern .container-40 .div-block-68:hover .button-19,
.landing-modern .container-39 .div-block-68:hover .button-19 {
  background: rgba(34, 166, 242, 0.28);
  color: #fff;
}

.landing-modern .container-40 .div-block-68:hover .button-19,
.landing-modern .container-39 .div-block-68:hover .button-19 {
  filter: brightness(1.1);
}

.landing-modern .container-40::before,
.landing-modern .container-39::before {
  content: none;
}

/* =============================================================================
   Navbar on dark background – use .nav-landing-dark on navbar so overrides always win
   ============================================================================= */
.navbar-5.nav-landing-dark {
  background-color: #1a2332 !important;
  background-image: none !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
}

.navbar-5.nav-landing-dark.scrolled {
  background-color: #1a2332 !important;
  background-image: none !important;
}

/* All text and links inside the dark navbar – force visible (including inner divs) */
.navbar-5.nav-landing-dark .nav-menu-2,
.navbar-5.nav-landing-dark .nav-menu-2 a,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-18,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-20,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-21,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-25,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-logmein,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-logmein .nav-link-logmein-label,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24.w-dropdown-toggle,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24.hardwarenav,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24 div,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24.hardwarenav div {
  color: #e8ecf1 !important;
  background-color: transparent !important;
  background-image: none !important;
}
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-logmein .nav-icon-logmein {
  stroke: #e8ecf1;
}

.navbar-5.nav-landing-dark .nav-menu-2 a:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-18:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-20:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-21:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-25:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-logmein:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24.w-dropdown-toggle:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-24.hardwarenav:hover,
.navbar-5.nav-landing-dark .nav-menu-2 .w-dropdown:hover .nav-link-24.w-dropdown-toggle,
.navbar-5.nav-landing-dark .nav-menu-2 .w-dropdown:hover .nav-link-24.hardwarenav,
.navbar-5.nav-landing-dark .nav-menu-2 .w-dropdown:hover .nav-link-24 div {
  color: #22a6f2 !important;
  background-color: rgba(34, 166, 242, 0.12) !important;
  background-image: none !important;
}
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-logmein:hover .nav-icon-logmein {
  stroke: #22a6f2;
}
.navbar-5.nav-landing-dark .nav-menu-2 .nav-link-logmein:hover .nav-link-logmein-label {
  color: #22a6f2 !important;
}

.navbar-5.nav-landing-dark .nav-link-18.w--current,
.navbar-5.nav-landing-dark .nav-link-20.w--current,
.navbar-5.nav-landing-dark .nav-link-21.w--current,
.navbar-5.nav-landing-dark .nav-link-24.w--current,
.navbar-5.nav-landing-dark .nav-link-25.w--current {
  color: #22a6f2 !important;
}

/* Dropdown arrow – visible on dark */
.navbar-5.nav-landing-dark .nav-link-24 .w-icon-dropdown-toggle {
  border-top-color: #e8ecf1 !important;
}

.navbar-5.nav-landing-dark .nav-link-24:hover .w-icon-dropdown-toggle,
.navbar-5.nav-landing-dark .w-dropdown:hover .nav-link-24 .w-icon-dropdown-toggle {
  border-top-color: #22a6f2 !important;
}

/* Dropdown panel */
.navbar-5.nav-landing-dark .w-dropdown-list {
  background: #223044 !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-5.nav-landing-dark .w-dropdown-list .w-dropdown-link {
  color: #e8ecf1 !important;
}

.navbar-5.nav-landing-dark .w-dropdown-list .w-dropdown-link:hover {
  color: #22a6f2 !important;
  background-color: rgba(34, 166, 242, 0.1);
}

/* Mobile open menu */
@media (max-width: 991px) {
  .navbar-5.nav-landing-dark .nav-menu-2,
  .navbar-5.nav-landing-dark .nav-menu-2.w--open {
    background: #1a2332 !important;
  }
}

/* =============================================================================
   Footer on dark page – site-wide (with optional decorative background image)
   ============================================================================= */
.body-3.landing-modern .white-footer,
body.landing-modern .white-footer {
  position: relative;
  background-color: rgba(255, 255, 255, 0.03);
  border-top: 1px solid var(--lm-border);
}

/* Decorative footer image in background (place your image at assets/images/footer-decoration.png) */
.body-3.landing-modern .white-footer::before,
body.landing-modern .white-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background-image: url("../images/footer-decoration.png");
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: auto 120px;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Footer content wrapper (e.g. /html/body/div[3]/div) – above the decoration layer */
.body-3.landing-modern .white-footer .container-41,
body.landing-modern .white-footer .container-41 {
  position: relative;
  z-index: 1;
  padding-bottom: 1.5rem;
}

/* Bottom bar (copyright/terms) sits above the decoration with clear spacing */
.body-3.landing-modern .white-footer .bottom-footer-block,
body.landing-modern .white-footer .bottom-footer-block {
  padding-bottom: 4rem;
  margin-bottom: 0;
}

/* Footer safe area for notched devices */
.body-3.landing-modern .white-footer,
body.landing-modern .white-footer {
  padding-bottom: env(safe-area-inset-bottom);
}

/* Footer menu: 2–3 columns for About us, Products, Services; Follow us moved to bottom row */
@media (max-width: 767px) {
  body.landing-modern .white-footer .footer-row.white-footer-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: 1.25rem 1.5rem;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  body.landing-modern .white-footer .footer-row.white-footer-row .white-footer-column:nth-child(1),
  body.landing-modern .white-footer .footer-row.white-footer-row .white-footer-column:nth-child(2),
  body.landing-modern .white-footer .footer-row.white-footer-row .white-footer-column:nth-child(3) {
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding-left: 0;
    padding-right: 0;
  }
  body.landing-modern .white-footer .footer-row.white-footer-row .white-footer-column:nth-child(4) {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: none !important;
    float: none !important;
    padding-left: 0;
    padding-right: 0;
    text-align: center;
    border-top: 1px solid var(--lm-border);
    padding-top: 1.25rem;
    margin-top: 0.25rem;
  }
  body.landing-modern .white-footer .footer-row .white-footer-column:nth-child(4) .dark-footer-title {
    margin-bottom: 0.5rem;
  }
  body.landing-modern .white-footer .footer-row .white-footer-column:nth-child(4) .color-social-button {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
  }
  body.landing-modern .white-footer .footer-row .white-footer-column:nth-child(4) .footer-contact-info-block {
    margin-top: 0.75rem;
  }
}

/* Footer phone number: white for visibility on dark background */
body.landing-modern .footer-contact-info-block,
body.landing-modern .footer-contact-info-block p {
  color: var(--lm-text) !important;
}
body.landing-modern .footer-contact-info-block a,
body.landing-modern .footer-contact-info-block a[href^="tel:"] {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease;
}
body.landing-modern .footer-contact-info-block a:hover,
body.landing-modern .footer-contact-info-block a[href^="tel:"]:hover {
  color: var(--lm-accent) !important;
  text-decoration-color: var(--lm-accent);
}

/* Contact page: email and phone links in contact info section - white for visibility */
body.landing-modern .text-block-68,
body.landing-modern .text-block-68 strong {
  color: var(--lm-text) !important;
}
body.landing-modern .text-block-68 a,
body.landing-modern .text-block-68 a[href^="mailto:"] {
  color: #ffffff !important;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  transition: text-decoration-color 0.2s ease, color 0.2s ease;
}
body.landing-modern .text-block-68 a:hover,
body.landing-modern .text-block-68 a[href^="mailto:"]:hover {
  color: var(--lm-accent) !important;
  text-decoration-color: var(--lm-accent);
}

/* Very small screens: 2 columns for menu sections, Follow us still full-width at bottom */
@media (max-width: 480px) {
  body.landing-modern .white-footer .footer-row.white-footer-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 1rem 1.25rem;
  }
  body.landing-modern .white-footer .footer-row .white-footer-column:nth-child(3) {
    grid-column: 1 / -1 !important;
  }
}

/* Footer bottom bar: stack on mobile, no float overlap */
@media (max-width: 767px) {
  .white-footer .bottom-footer-block.white-footer-block {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }
  .white-footer .bottom-footer-paragraph {
    float: none !important;
    margin-bottom: 0.25rem;
  }
  .white-footer .bottom-footer-paragraph.right {
    order: 1;
  }
}

.body-3.landing-modern .dark-footer-title,
.body-3.landing-modern .light-footer-link,
.body-3.landing-modern .bottom-footer-paragraph,
body.landing-modern .dark-footer-title,
body.landing-modern .light-footer-link,
body.landing-modern .bottom-footer-paragraph {
  color: var(--lm-text-muted);
}

.body-3.landing-modern .light-footer-link:hover,
body.landing-modern .light-footer-link:hover {
  color: var(--lm-accent);
}

.body-3.landing-modern .link-8,
body.landing-modern .link-8 {
  color: var(--lm-accent);
}

/* =============================================================================
   Footer link icons – small icon before each footer link title
   ============================================================================= */
.white-footer-column .light-footer-link,
.light-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.white-footer-column .light-footer-link {
  display: flex;
}
.light-footer-link .footer-link-icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  opacity: 0.85;
  vertical-align: middle;
}
.light-footer-link:hover .footer-link-icon {
  opacity: 1;
}

@media (max-width: 767px) {
  .landing-hero {
    padding: 2rem 1.5rem 3rem;
  }
  .landing-modern .container-40 .w-col,
  .landing-modern .container-39 .w-col {
    max-width: 100%;
  }
}

/* =============================================================================
   Mobile / touch: tap highlight and touch-friendly
   ============================================================================= */
body.landing-modern a,
body.landing-modern button {
  -webkit-tap-highlight-color: rgba(34, 166, 242, 0.15);
  tap-highlight-color: rgba(34, 166, 242, 0.15);
}