/* Clickpad overrides for the Aiero template */

/* Site-wide font override — DM Sans */
:root {
  --font-primary: "DM Sans", sans-serif;
  --font-secondary: "DM Sans", sans-serif;
}
body, h1, h2, h3, h4, h5, h6, p, a, span, li, input, textarea, button, select, label, td, th {
  font-family: "DM Sans", sans-serif !important;
}
body {
  line-height: 1.75 !important;
  letter-spacing: 0.004em !important;
}
p {
  line-height: 1.75 !important;
  margin-bottom: 1.1em !important;
}
h1, h2, h3, h4, h5, h6 {
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

/* IFC/BIM card: full width of container minus 2px each side on mobile */
@media (max-width: 991px) {
  .aiero-bim-card {
    margin-left: -13px !important;
    margin-right: -13px !important;
    border-radius: 12px !important;
  }
}

/* service-sec5 v2 card: shift bg image right on mobile so text isn't obscured */
@media (max-width: 991px) {
  .ser-card5.v2 img {
    object-position: calc(50% + 50px) center !important;
  }
}

/* style-text3 "Clickpad" — prevent wrapping on mobile */
@media (max-width: 577px) {
  .about-us-sec3 .style-text3 {
    font-size: 68px !important;
    line-height: 52px !important;
    white-space: nowrap;
  }
}

/* Page banner background overrides (inline style + !important CSS for reliability) */
.project-single-page-banner.page-banner6 {
  background-image: url('/aiero/demo-media/homepage/project-single/page1-6.png') !important;
}
.projects-page-banner.page-banner5 {
  background-image: url('/aiero/demo-media/homepage/project/page1-5.png') !important;
}
.contact-page-banner.page-banner9 {
  background-image: url('/aiero/demo-media/homepage/contact/page1-9%20(1).png') !important;
}
.faq-page-banner.page-banner9 {
  background-image: url('/aiero/demo-media/homepage/faq/page1-9.png') !important;
}
.blog-page-banner.page-banner9 {
  background-image: url('/aiero/demo-media/homepage/blog2/page1-9.png') !important;
}
.blog-single-page-banner.page-banner9 {
  background-image: url('/aiero/demo-media/homepage/blog-article/page1-9%20(1).png') !important;
}

/* Legal page banner */
.legal-page-banner.page-banner9 {
  background-image: url('/aiero/demo-media/homepage/faq/page1-9.png') !important;
}

/*
 * Global: fade the decorative ::before bg-layer2.png on ALL page-banner
 * variants so the gradient dissolves before it exits the banner boundary
 * rather than cutting in a hard horizontal line. The ::before starts at
 * top: ~-29% and is 1115px tall; the banner bottom sits at ~58% of that
 * height, so fading 30%→62% completes the fade within the banner.
 */
section[class*="page-banner"]::before {
  -webkit-mask-image: linear-gradient(to bottom, black 30%, transparent 62%);
  mask-image: linear-gradient(to bottom, black 30%, transparent 62%);
}

/*
 * Soft gradient overlay at the bottom of every page-banner so the main
 * background-image also blends into the page rather than ending on a
 * hard edge. pointer-events: none so text/links inside remain clickable.
 * Breadcrumbs are z-index: 2 to stay above this z-index: 1 overlay.
 */
section[class*="page-banner"]::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(to bottom, transparent 0%, var(--color-content-white) 100%);
  pointer-events: none;
  z-index: 1;
}
.active-body section[class*="page-banner"]::after {
  background: linear-gradient(to bottom, transparent 0%, var(--color-surface-dark-2) 100%);
}

/* Keep breadcrumbs above the fade overlay on all banners */
section[class*="page-banner"] .breadcrumbs {
  z-index: 2;
}

/* Legal sidebar tab nav — active state */
.legal-sidebar-nav a.active {
  color: var(--color-primary, #7b5ce5) !important;
  font-weight: 700;
}

/* Prevent dark mode from applying brightness filter to client logo carousels */
/* Add a soft light glow/highlight around logos in dark mode */
body.dark-mode .swiper.brand .swiper-slide img,
body.dark-mode .swiper.brand2 .swiper-slide img {
  filter: none !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18), 0 0 20px rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.11);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}