/* ==========================================================================
   Brixkom Design System — "Construction Premium"
   Spec: docs/superpowers/specs/2026-03-12-brixkom-theme-design-system.md
   ========================================================================== */

/* Google Fonts
   Note: @import is render-blocking. For production optimization, consider moving
   to wp_enqueue_style in functions.php or adding <link rel="preconnect"> later.
   For now, @import keeps this purely CSS with no PHP changes needed. */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;500;600&family=Staatliches&display=swap');

/* ==========================================================================
   Design Tokens
   ========================================================================== */
:root {
  /* Colors */
  --bx-primary: #F6640A;
  --bx-hover: #D4550A;
  --bx-dark: #111111;
  --bx-surface: #1A1A1A;
  --bx-light: #F5F5F5;
  --bx-white: #FFFFFF;
  --bx-text-dark: #111111;
  --bx-text-body: #444444;
  --bx-text-muted: #999999;
  --bx-text-light: #CCCCCC;
  --bx-error: #DC2626;
  --bx-success: #16A34A;

  /* Typography */
  --bx-font-heading: 'Bebas Neue', sans-serif;
  --bx-font-sub: 'Staatliches', sans-serif;
  --bx-font-body: 'Poppins', sans-serif;

  /* Spacing */
  --bx-space-xs: 4px;
  --bx-space-sm: 8px;
  --bx-space-md: 16px;
  --bx-space-lg: 24px;
  --bx-space-xl: 32px;
  --bx-space-2xl: 48px;
  --bx-space-3xl: 64px;

  /* Misc */
  --bx-radius: 2px;
  --bx-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --bx-transition: all 150ms ease;
}

/* ==========================================================================
   Typography
   ========================================================================== */

/* Base body text */
body,
.ast-body-text {
  font-family: var(--bx-font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  color: var(--bx-text-body);
}

/* Headings */
h1, .entry-title,
.ast-archive-title,
.elementor-heading-title.elementor-size-xxl {
  font-family: var(--bx-font-heading);
  font-weight: 400;
  font-size: 56px;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.1;
  color: var(--bx-text-dark);
}

h2,
.elementor-heading-title.elementor-size-xl {
  font-family: var(--bx-font-heading);
  font-weight: 400;
  font-size: 42px;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.15;
  color: var(--bx-text-dark);
}

h3,
.elementor-heading-title.elementor-size-large {
  font-family: var(--bx-font-heading);
  font-weight: 400;
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: 3px;
  line-height: 1.2;
  color: var(--bx-text-dark);
}

h4, h5, h6 {
  font-family: var(--bx-font-heading);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bx-text-dark);
}

/* Subheadlines / Labels */
.elementor-heading-title.elementor-size-medium {
  font-family: var(--bx-font-sub);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--bx-primary);
}

/* Small / Meta text */
.entry-meta,
.ast-comment-meta,
.ast-blog-single-element .post-meta,
.woocommerce-result-count {
  font-family: var(--bx-font-body);
  font-weight: 400;
  font-size: 13px;
  color: var(--bx-text-muted);
}

/* Responsive typography */
@media (max-width: 922px) {
  h1, .entry-title,
  .elementor-heading-title.elementor-size-xxl {
    font-size: 42px;
  }
  h2, .elementor-heading-title.elementor-size-xl {
    font-size: 32px;
  }
}

@media (max-width: 768px) {
  h1, .entry-title,
  .elementor-heading-title.elementor-size-xxl {
    font-size: 36px;
  }
  h2, .elementor-heading-title.elementor-size-xl {
    font-size: 28px;
  }
  h3, .elementor-heading-title.elementor-size-large {
    font-size: 22px;
  }
}

@media (max-width: 544px) {
  h1, .entry-title,
  .elementor-heading-title.elementor-size-xxl {
    font-size: 32px;
  }
  h2, .elementor-heading-title.elementor-size-xl {
    font-size: 26px;
  }
  h3, .elementor-heading-title.elementor-size-large {
    font-size: 20px;
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

/* Primary button */
/* Note: !important only on properties Elementor sets inline (bg, color, padding, border-radius).
   Other properties use normal cascade (priority 20 is sufficient). */
.ast-button,
.button,
.elementor-button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  font-family: var(--bx-font-heading);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  background-color: var(--bx-primary) !important;
  color: #000 !important;
  border: none;
  border-radius: var(--bx-radius) !important;
  padding: 10px 24px !important;
  transition: var(--bx-transition);
  cursor: pointer;
}

.ast-button:hover,
.button:hover,
.elementor-button:hover,
.wp-block-button__link:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--bx-hover) !important;
  color: #000 !important;
}

/* Focus state — accessibility */
.ast-button:focus-visible,
.button:focus-visible,
.elementor-button:focus-visible,
.wp-block-button__link:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
  outline: 2px solid var(--bx-primary);
  outline-offset: 2px;
}

/* Large CTA buttons (Elementor size-lg and size-xl) */
.elementor-button.elementor-size-lg,
.elementor-button.elementor-size-xl {
  font-size: 18px !important;
  letter-spacing: 2px;
  padding: 14px 36px !important;
}

/* Secondary / Outline button — use Elementor's "outline" skin or custom class */
.elementor-button.bx-outline,
.ast-outline-button {
  background-color: transparent !important;
  color: var(--bx-primary) !important;
  border: 2px solid var(--bx-primary) !important;
}

.elementor-button.bx-outline:hover,
.ast-outline-button:hover {
  background-color: var(--bx-primary) !important;
  color: #000 !important;
}

/* Dark button variant */
.elementor-button.bx-dark {
  background-color: #000 !important;
  color: var(--bx-primary) !important;
}

.elementor-button.bx-dark:hover {
  background-color: var(--bx-surface) !important;
}

/* Ghost button (white outline on dark backgrounds) */
.elementor-button.bx-ghost {
  background-color: transparent !important;
  color: var(--bx-white) !important;
  border: 2px solid var(--bx-white) !important;
}

.elementor-button.bx-ghost:hover {
  background-color: var(--bx-white) !important;
  color: var(--bx-dark) !important;
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--bx-primary);
  text-decoration: underline;
  transition: var(--bx-transition);
}

a:hover {
  color: var(--bx-hover);
}

a:visited {
  color: var(--bx-primary);
}

a:focus-visible {
  outline: 2px solid var(--bx-primary);
  outline-offset: 2px;
}

/* Navigation links should not be underlined */
.main-navigation a,
.ast-header-navigation a,
.elementor-nav-menu a,
.widget a,
.ast-footer-widget a {
  text-decoration: none;
}

/* ==========================================================================
   Content Area
   ========================================================================== */

.site-content,
.ast-container {
  max-width: 1200px;
}

/* Light background for main content */
.site-main {
  background-color: var(--bx-light);
}

/* Cards and product tiles on light background */
.ast-separate-container .ast-article-post,
.ast-separate-container .ast-article-single,
.woocommerce ul.products li.product {
  background-color: var(--bx-white);
  box-shadow: var(--bx-shadow);
  border-radius: var(--bx-radius);
}

/* WooCommerce notices */
.woocommerce-error {
  color: var(--bx-error);
  border-color: var(--bx-error);
}

.woocommerce-message {
  color: var(--bx-success);
  border-color: var(--bx-success);
}

/* ==========================================================================
   Header — Dark Navigation (Override Astra Customizer)
   Astra uses --ast-global-color-X vars and inline styles from Customizer.
   We override aggressively with !important on all visual properties.
   ========================================================================== */

/* Sticky header */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

/* Force dark header — override Astra's var(--ast-global-color-5) */
.ast-primary-header-bar,
.ast-primary-header,
.main-header-bar,
.ast-hfb-header .ast-builder-grid-row,
[data-section="section-primary-header-builder"],
.ast-desktop .ast-primary-header-bar,
body .ast-primary-header-bar {
  background-color: var(--bx-dark) !important;
  background: var(--bx-dark) !important;
  min-height: 80px;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Logo area — ensure it's visible on dark bg */
.site-logo-img .custom-logo,
.ast-site-identity .custom-logo {
  max-height: 60px;
  width: auto;
}

.site-title a,
.ast-site-title-wrap a {
  font-family: var(--bx-font-heading) !important;
  font-size: 32px !important;
  color: var(--bx-primary) !important;
  letter-spacing: 3px;
  text-decoration: none !important;
  text-transform: uppercase;
}

/* Navigation links — white on dark */
.main-header-menu .menu-link,
.main-header-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > a,
.ast-nav-menu .menu-link,
.ast-header-navigation a,
.main-navigation a {
  font-family: var(--bx-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #fff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: var(--bx-transition);
  line-height: normal !important;
}

.main-header-menu .menu-link:hover,
.main-header-menu .menu-item > a:hover,
.ast-builder-menu-1 .menu-item > a:hover {
  color: var(--bx-primary) !important;
}

/* Active nav item */
.main-header-menu .current-menu-item > .menu-link,
.current-menu-item > a,
.current-menu-ancestor > a {
  color: var(--bx-primary) !important;
}

/* Dropdown menus */
.main-header-menu .sub-menu {
  background-color: var(--bx-dark) !important;
  border-top-color: var(--bx-primary) !important;
}

.main-header-menu .sub-menu .menu-link,
.main-header-menu .sub-menu .menu-item > a {
  color: #ccc !important;
  font-size: 13px !important;
}

.main-header-menu .sub-menu .menu-link:hover {
  color: var(--bx-primary) !important;
  background-color: var(--bx-surface) !important;
}

/* Header icons — white on dark */
.ast-header-woo-cart .ast-cart-menu-wrap,
.ast-header-account-wrap,
.ast-header-search .ast-search-icon,
.ast-header-woo-cart .ast-woo-header-cart-info-wrap,
header .ast-header-account-wrap .ast-header-account-type-icon .ahfb-svg-iconset svg,
header .astra-cart-drawer-title {
  color: #fff !important;
  fill: #fff !important;
}

.ast-header-woo-cart .ast-cart-menu-wrap:hover,
.ast-header-search .ast-search-icon:hover {
  color: var(--bx-primary) !important;
}

/* Cart count badge */
.ast-header-woo-cart .count,
.ast-cart-menu-wrap .count,
.ast-woo-header-cart-info-wrap .count {
  background-color: var(--bx-primary) !important;
  color: #000 !important;
}

/* Header SVG icons (account, search) — force white */
header.site-header svg,
.ast-header-account-wrap svg,
.ast-header-search svg {
  fill: #fff !important;
  color: #fff !important;
}

header.site-header svg:hover {
  fill: var(--bx-primary) !important;
}

/* Mobile menu */
@media (max-width: 922px) {
  .site-title a,
  .ast-site-title-wrap a {
    font-size: 24px !important;
  }

  .ast-button-wrap .menu-toggle,
  .ast-mobile-menu-trigger-minimal,
  .ast-mobile-menu-trigger-outline {
    color: #fff !important;
    border-color: #fff !important;
  }

  .ast-header-break-point .main-header-menu,
  .ast-mobile-popup-drawer .ast-mobile-popup-inner {
    background-color: var(--bx-dark) !important;
  }

  .ast-header-break-point .main-header-menu a {
    color: #fff !important;
    border-color: var(--bx-surface) !important;
  }

  .ast-header-break-point .main-header-menu a:hover {
    color: var(--bx-primary) !important;
  }
}

/* ==========================================================================
   Footer — CTA Banner + Dark Footer
   ========================================================================== */

/* CTA Banner (Above Footer or Elementor section) */
.bx-cta-banner,
.ast-above-footer-wrap,
[data-section="section-above-footer-builder"] {
  background-color: var(--bx-primary) !important;
  padding: 40px var(--bx-space-2xl);
  text-align: center;
}

.bx-cta-banner h2,
.bx-cta-banner h3,
.ast-above-footer-wrap h2,
.ast-above-footer-wrap h3 {
  font-family: var(--bx-font-heading) !important;
  font-size: 32px !important;
  color: #000 !important;
  letter-spacing: 3px;
}

.bx-cta-banner p,
.ast-above-footer-wrap p {
  color: rgba(0, 0, 0, 0.7) !important;
  font-size: 14px;
}

.bx-cta-banner .elementor-button,
.ast-above-footer-wrap .ast-button {
  background-color: #000 !important;
  color: var(--bx-primary) !important;
}

.bx-cta-banner .elementor-button:hover,
.ast-above-footer-wrap .ast-button:hover {
  background-color: var(--bx-surface) !important;
}

/* Main Footer — override Astra Customizer */
.site-footer,
.ast-footer-overlay,
.ast-primary-footer,
body .ast-primary-footer,
body .site-footer,
[data-section="section-primary-footer-builder"] {
  background-color: var(--bx-dark) !important;
  background: var(--bx-dark) !important;
  padding: 40px 0;
}

/* Footer headings */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer .widget-title,
.ast-footer-widget .widget-title {
  font-family: var(--bx-font-heading) !important;
  color: var(--bx-primary) !important;
  font-size: 16px !important;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* Footer text */
.site-footer,
.site-footer p,
.site-footer li,
.ast-footer-widget {
  color: var(--bx-text-muted) !important;
  font-family: var(--bx-font-body);
  font-size: 13px;
  line-height: 2.2;
}

/* Footer links */
.site-footer a,
.ast-footer-widget a {
  color: var(--bx-text-muted) !important;
  text-decoration: none;
  transition: var(--bx-transition);
}

.site-footer a:hover,
.ast-footer-widget a:hover {
  color: var(--bx-primary) !important;
}

/* Social icons in footer */
.site-footer .ast-social-element,
.ast-footer-social-wrap .ast-social-element {
  background-color: #222 !important;
  color: var(--bx-primary) !important;
  width: 32px;
  height: 32px;
  border-radius: var(--bx-radius);
  transition: var(--bx-transition);
}

.site-footer .ast-social-element:hover,
.ast-footer-social-wrap .ast-social-element:hover {
  background-color: var(--bx-primary) !important;
  color: #000 !important;
}

/* Bottom Bar (Copyright) — override Astra */
.ast-footer-copyright,
.ast-below-footer-wrap,
body .ast-below-footer-wrap,
[data-section="section-below-footer-builder"] {
  background-color: #0A0A0A !important;
  background: #0A0A0A !important;
  border-top: 1px solid #222;
  padding: 14px 0;
}

.ast-footer-copyright a,
.ast-footer-copyright span,
.ast-footer-copyright p,
.ast-below-footer-wrap a,
.ast-below-footer-wrap span,
.ast-below-footer-wrap p {
  color: #555 !important;
  font-family: var(--bx-font-body);
  font-size: 12px;
}

.ast-footer-copyright a:hover,
.ast-below-footer-wrap a:hover {
  color: var(--bx-primary) !important;
}

/* Footer responsive */
@media (max-width: 922px) {
  .bx-cta-banner,
  .ast-above-footer-wrap {
    padding: 32px var(--bx-space-md);
  }

  .bx-cta-banner h2,
  .bx-cta-banner h3 {
    font-size: 24px !important;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Dark section — add CSS class "bx-dark-section" to any Elementor section */
.bx-dark-section {
  background-color: var(--bx-dark) !important;
}

.bx-dark-section h1,
.bx-dark-section h2,
.bx-dark-section h3,
.bx-dark-section h4 {
  color: var(--bx-primary) !important;
}

.bx-dark-section p,
.bx-dark-section li,
.bx-dark-section span {
  color: var(--bx-text-light) !important;
}

.bx-dark-section a {
  color: var(--bx-primary) !important;
}

/* Surface section — slightly lighter dark variant */
.bx-surface-section {
  background-color: var(--bx-surface) !important;
}

.bx-surface-section h1,
.bx-surface-section h2,
.bx-surface-section h3,
.bx-surface-section h4 {
  color: var(--bx-primary) !important;
}

.bx-surface-section p,
.bx-surface-section li {
  color: var(--bx-text-light) !important;
}

/* ==========================================================================
   Global Responsive Adjustments
   ========================================================================== */

@media (max-width: 544px) {
  /* Tighter spacing on mobile */
  .ast-separate-container .ast-article-post,
  .ast-separate-container .ast-article-single {
    padding: var(--bx-space-md);
  }

  /* Stack CTA buttons vertically */
  .bx-cta-banner .elementor-button-wrapper {
    display: block;
    margin-bottom: var(--bx-space-sm);
  }
}

/* ==========================================================================
   Elementor Overrides
   ========================================================================== */

/* Ensure Elementor sections respect our color system */
.elementor-section.bx-dark-section > .elementor-container {
  color: var(--bx-text-light);
}

/* Elementor divider in brand color */
.elementor-divider-separator {
  border-color: var(--bx-primary) !important;
}

/* Elementor icon styling */
.elementor-icon {
  color: var(--bx-primary);
  transition: var(--bx-transition);
}

.elementor-icon:hover {
  color: var(--bx-hover);
}

/* ==========================================================================
   Homepage — Page Builder Template Reset
   RULE: NEVER set display/flex/flex-direction on Elementor containers.
   Elementor handles layout via e-flex/e-con classes + JS.
   We ONLY override: colors, fonts, backgrounds, spacing, borders, shadows.
   ========================================================================== */

/* Full-width page — remove Astra wrapper constraints */
.ast-page-builder-template .entry-content {
  margin: 0 !important;
  padding: 0 !important;
}

.ast-page-builder-template .site-content .ast-container {
  max-width: 100% !important;
  padding: 0 !important;
}

/* Remove default light bg on page builder pages — sections control their own bg */
.ast-page-builder-template .site-main {
  background-color: transparent !important;
}

/* ==========================================================================
   Homepage — Section 1: Hero (dark bg, text left, image right)
   ========================================================================== */

.elementor-764 > .elementor-element-4e5868a {
  background: linear-gradient(160deg, #0d0d0d 0%, #1a1a1a 60%, #222 100%) !important;
  padding-top: 80px !important;
  padding-bottom: 60px !important;
  min-height: 580px;
  position: relative;
  overflow: hidden;
}

/* Orange accent bar at top */
.elementor-764 > .elementor-element-4e5868a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--bx-primary);
  z-index: 1;
}

/* Hero inner max-width */
.elementor-element-4e5868a > .e-con-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px !important;
}

/* Hero subheadline */
.elementor-element-fb20105 .elementor-heading-title {
  font-family: var(--bx-font-sub) !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  color: var(--bx-primary) !important;
  margin-bottom: 12px !important;
}

/* Hero H1 */
.elementor-element-75d9d89 .elementor-icon-box-title,
.elementor-element-75d9d89 .elementor-icon-box-title span {
  font-family: var(--bx-font-heading) !important;
  font-size: 52px !important;
  line-height: 1.08 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Hero body text */
.elementor-element-75d9d89 .elementor-icon-box-description {
  font-family: var(--bx-font-body) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: #aaa !important;
  margin-top: 16px !important;
}

/* Hero CTA button */
.elementor-element-eda7d4d .elementor-button {
  font-size: 16px !important;
  letter-spacing: 2px !important;
  padding: 14px 40px !important;
  margin-top: 20px !important;
}

/* Hero product image */
.elementor-element-ad0e4d3 img {
  filter: drop-shadow(0 16px 48px rgba(246, 100, 10, 0.12));
  transition: transform 400ms ease;
}

.elementor-element-ad0e4d3 img:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   Homepage — Section 2: Product Tabs (BK10 / BK13 / BK16)
   ========================================================================== */

.elementor-764 > .elementor-element-a47761b {
  background-color: var(--bx-light) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.elementor-element-a47761b > .e-con-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px !important;
}

/* Section heading */
.elementor-element-b2e9d9c .elementor-heading-title {
  font-family: var(--bx-font-heading) !important;
  font-size: 40px !important;
  color: var(--bx-text-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  margin-bottom: 32px !important;
}

/* Tab buttons — visual only, no layout changes */
.elementor-element-64f54e1 .e-n-tab-title {
  font-family: var(--bx-font-heading) !important;
  font-size: 20px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  background-color: var(--bx-dark) !important;
  color: #fff !important;
  border: 2px solid var(--bx-dark) !important;
  border-radius: var(--bx-radius) !important;
  padding: 12px 32px !important;
  transition: var(--bx-transition);
}

.elementor-element-64f54e1 .e-n-tab-title:hover {
  border-color: var(--bx-primary) !important;
  background-color: var(--bx-surface) !important;
}

.elementor-element-64f54e1 .e-n-tab-title[aria-selected="true"] {
  background-color: var(--bx-primary) !important;
  color: #000 !important;
  border-color: var(--bx-primary) !important;
}

/* Tab content typography — applies to all tab panels */
.elementor-element-64f54e1 .e-n-tabs-content h2 {
  font-family: var(--bx-font-heading) !important;
  font-size: 30px !important;
  color: var(--bx-text-dark) !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

.elementor-element-64f54e1 .e-n-tabs-content .elementor-widget-text-editor p {
  font-family: var(--bx-font-body) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
  color: var(--bx-text-body) !important;
}

/* Tab product images */
.elementor-element-64f54e1 .e-n-tabs-content .elementor-widget-image img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.1));
  transition: transform 300ms ease;
}

.elementor-element-64f54e1 .e-n-tabs-content .elementor-widget-image img:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   Homepage — Section 3: Benefits ("Warum BRiXKOM wählen?")
   ========================================================================== */

.elementor-764 > .elementor-element-520788d {
  background-color: var(--bx-dark) !important;
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.elementor-element-520788d > .e-con-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px !important;
}

/* Label */
.elementor-element-bac4a42 .elementor-heading-title {
  font-family: var(--bx-font-sub) !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: 4px !important;
  color: var(--bx-primary) !important;
  text-align: center !important;
  margin-bottom: 8px !important;
}

/* Main heading */
.elementor-element-75d5426 .elementor-heading-title {
  font-family: var(--bx-font-heading) !important;
  font-size: 40px !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  color: #fff !important;
  text-align: center !important;
  margin-bottom: 40px !important;
}

/* Benefit cards — visual styling only */
.elementor-element-e718fc4,
.elementor-element-99c80cc,
.elementor-element-53bc638 {
  background-color: var(--bx-surface) !important;
  border-radius: var(--bx-radius) !important;
  padding: 28px 24px !important;
  border-left: 3px solid var(--bx-primary) !important;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.elementor-element-e718fc4:hover,
.elementor-element-99c80cc:hover,
.elementor-element-53bc638:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(246, 100, 10, 0.08);
}

/* Card headings */
.elementor-element-520788d h3 {
  font-family: var(--bx-font-heading) !important;
  font-size: 20px !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
}

/* Card dividers */
.elementor-element-520788d .elementor-divider-separator {
  border-color: var(--bx-primary) !important;
  border-width: 2px !important;
}

/* Card text */
.elementor-element-520788d .elementor-widget-text-editor p {
  color: var(--bx-text-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ==========================================================================
   Homepage — Section 4: CTA / Contact
   ========================================================================== */

.elementor-764 > .elementor-element-b2ebd40 {
  background: linear-gradient(135deg, var(--bx-primary), var(--bx-hover)) !important;
  padding-top: 48px !important;
  padding-bottom: 48px !important;
}

.elementor-element-b2ebd40 > .e-con-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px !important;
}

/* CTA heading */
.elementor-element-cc6502f .elementor-heading-title {
  font-family: var(--bx-font-heading) !important;
  font-size: 34px !important;
  text-transform: uppercase !important;
  letter-spacing: 3px !important;
  color: #000 !important;
  text-align: center !important;
}

/* CTA description */
.elementor-element-0bab195 .elementor-icon-box-description {
  color: rgba(0, 0, 0, 0.7) !important;
  font-size: 15px !important;
  text-align: center !important;
}

/* Contact list */
.elementor-element-b2ebd40 .elementor-icon-list-text {
  color: #000 !important;
  font-family: var(--bx-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
}

.elementor-element-b2ebd40 .elementor-icon-list-icon svg {
  fill: #000 !important;
}

/* ==========================================================================
   Homepage — Responsive
   ========================================================================== */

@media (max-width: 922px) {
  .elementor-764 > .elementor-element-4e5868a {
    padding-top: 48px !important;
    padding-bottom: 32px !important;
    min-height: auto;
  }

  .elementor-element-75d9d89 .elementor-icon-box-title,
  .elementor-element-75d9d89 .elementor-icon-box-title span {
    font-size: 38px !important;
  }

  .elementor-element-b2e9d9c .elementor-heading-title {
    font-size: 30px !important;
  }

  .elementor-element-64f54e1 .e-n-tab-title {
    font-size: 16px !important;
    padding: 10px 20px !important;
  }

  .elementor-element-75d5426 .elementor-heading-title {
    font-size: 30px !important;
  }
}

@media (max-width: 544px) {
  .elementor-element-75d9d89 .elementor-icon-box-title,
  .elementor-element-75d9d89 .elementor-icon-box-title span {
    font-size: 30px !important;
  }

  .elementor-element-cc6502f .elementor-heading-title {
    font-size: 26px !important;
  }
}