.elementor-kit-352{--e-global-color-primary:#2D3580;--e-global-color-secondary:#F5C800;--e-global-color-text:#444444;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Montserrat";--e-global-typography-primary-font-weight:900;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:600;}.elementor-kit-352 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .header-inner{width:1146px;max-width:100%;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-header .site-branding .site-logo img{width:186px;max-width:186px;}.site-header .site-navigation ul.menu li a{color:#2D3580;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===========================
   MT-TECHNIEK — GLOBALE CSS
   Versie 1.0 | JJ Communicatie
=========================== */

:root {
  --mt-navy: #2D3580;
  --mt-orange: #F5C800;
  --mt-white: #ffffff;
  --mt-gray: #444444;
  --mt-light: #F4F4F4;
  --mt-border: #E5E7EB;
  --mt-font: 'Inter', 'Roboto', sans-serif;
}

/* --- Basis typografie --- */
body, .elementor-widget-container {
  font-family: var(--mt-font);
}
.elementor-heading-title {
  font-family: var(--mt-font) !important;
}
.mt-eyebrow {
  font-family: var(--mt-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--mt-orange);
  margin-bottom: 16px;
  display: block;
}
.mt-accent { color: var(--mt-orange); }

/* --- Sectie-achtergronden --- */
.mt-dark {
  background-color: var(--mt-navy) !important;
}
.mt-light-bg {
  background-color: var(--mt-light) !important;
}
.mt-orange-bg {
  background-color: var(--mt-orange) !important;
}

/* --- Knoppen --- */
.mt-btn {
  display: inline-block;
  font-family: var(--mt-font);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 28px;
  border-radius: 6px;
  text-decoration: none;
  transition: opacity .2s, transform .2s;
  cursor: pointer;
  border: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.mt-btn-primary {
  background: var(--mt-orange);
  color: var(--mt-navy);
}
.mt-btn-primary:hover {
  opacity: .88;
  color: var(--mt-navy);
}
.mt-btn-outline {
  border: 2px solid rgba(255,255,255,.35);
  color: white;
  background: transparent;
}
.mt-btn-outline:hover {
  border-color: white;
  color: white;
}
.mt-btn-dark {
  background: var(--mt-navy);
  color: white;
}
.mt-btn-dark:hover {
  opacity: .85;
  color: white;
}

/* --- Kaart hover-effect --- */
.mt-card-hover {
  transition: transform .2s, box-shadow .2s;
  border-radius: 12px;
}
.mt-card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(45,53,128,.10);
}

/* --- Badge labels --- */
.mt-label {
  display: inline-block;
  font-family: var(--mt-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: var(--mt-orange);
  color: var(--mt-navy);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}
.mt-label-dark {
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.7);
}

/* --- USP / dienst kaarten --- */
.mt-usp-icon {
  width: 52px;
  height: 52px;
  background: rgba(245,200,0,.12);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 20px;
}

/* --- Divider streep --- */
.mt-divider {
  height: 3px;
  background: linear-gradient(90deg, var(--mt-navy), var(--mt-orange));
  border: none;
  margin: 0;
}

/* --- Contactinfo items --- */
.mt-contact-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--mt-border);
  margin-bottom: 20px;
}
.mt-contact-icon-wrap {
  width: 44px;
  height: 44px;
  background: var(--mt-navy);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

/* --- Responsive: mobiel --- */
@media(max-width: 767px) {
  .mt-btn { width: 100%; justify-content: center; }
}/* ── Hero sectie ── */
.hero-sectie {
  position: relative;
  overflow: hidden;
}

/* Decoratieve vormen */
.hero-sectie::before {
  content: '';
  position: absolute;
  right: -120px;
  top: 8%;
  width: 580px;
  height: 580px;
  background: #F5C800;
  opacity: 0.07;
  transform: rotate(30deg);
  border-radius: 48px;
  pointer-events: none;
  z-index: 0;
}
.hero-sectie::after {
  content: '';
  position: absolute;
  right: 140px;
  bottom: -100px;
  width: 380px;
  height: 380px;
  background: #F5C800;
  opacity: 0.05;
  transform: rotate(15deg);
  border-radius: 36px;
  pointer-events: none;
  z-index: 0;
}

/* Zorgt dat widgets boven de decoratie staan */
.hero-kolom > .elementor-widget-wrap {
  position: relative;
  z-index: 1;
  padding: 96px 32px !important;
  max-width: 680px;
}

/* ── Label pill ── */
.hero-label .elementor-widget-container {
  display: inline-block;
}
.hero-label p {
  display: inline-block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #F5C800 !important;
  background: rgba(245, 200, 0, 0.12) !important;
  border: 1px solid rgba(245, 200, 0, 0.32) !important;
  padding: 6px 16px !important;
  border-radius: 100px !important;
  margin-bottom: 24px !important;
}

/* ── H1 ── */
.hero-h1 .elementor-heading-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(36px, 5.5vw, 64px) !important;
  line-height: 1.07 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
}

/* ── Subtekst ── */
.hero-sub p {
  font-family: 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: rgba(255, 255, 255, 0.72) !important;
  margin-bottom: 36px !important;
  max-width: 520px;
}

/* ── Primaire knop ── */
.hero-btn-primary a {
  background: #F5C800 !important;
  color: #000000 !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  border: none !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
.hero-btn-primary a:hover {
  background: #C9A200 !important;
  transform: translateY(-1px);
}

/* ── Outline knop ── */
.hero-btn-outline a {
  background: transparent !important;
  color: #ffffff !important;
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 4px !important;
  border: 2px solid #ffffff !important;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease !important;
}
.hero-btn-outline a:hover {
  background: #ffffff !important;
  color: #2D3580 !important;
  transform: translateY(-1px);
}

/* ── Stats balk ── */
.hero-stats {
  margin-top: 64px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 32px;
}
.hero-stat-val .elementor-heading-title {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 900 !important;
  font-size: 24px !important;
  color: #F5C800 !important;
  line-height: 1 !important;
}
.hero-stat-label p {
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.55) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.07em !important;
  margin: 0 !important;
}

/* ── Mobiel ── */
@media (max-width: 768px) {
  .hero-kolom > .elementor-widget-wrap {
    padding: 72px 20px !important;
  }
  .hero-sectie::before,
  .hero-sectie::after { display: none; }
}/* End custom CSS */