.elementor-kit-9{--e-global-color-primary:#F2F5FA;--e-global-color-secondary:#9EA3AE;--e-global-color-text:#9EA3AE;--e-global-color-accent:#EAF2FF;--e-global-color-410e8eb:#000000;--e-global-color-13cb11b:#0E0F12;--e-global-color-193b4d5:#16181C;--e-global-color-c35d4e8:#262A31;--e-global-typography-primary-font-family:"Archivo";--e-global-typography-primary-font-weight:800;--e-global-typography-primary-text-transform:uppercase;--e-global-typography-primary-line-height:-1px;--e-global-typography-primary-letter-spacing:1.05px;--e-global-typography-secondary-font-family:"Archivo";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-line-height:1.2px;--e-global-typography-secondary-letter-spacing:0px;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6px;--e-global-typography-accent-font-family:"Archivo";--e-global-typography-accent-font-size:12px;--e-global-typography-accent-font-weight:700;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-letter-spacing:3px;background-color:var( --e-global-color-410e8eb );}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 h1{font-size:72px;}.elementor-kit-9 h2{font-size:44px;}.elementor-kit-9 h3{font-size:20px;}.elementor-kit-9 h4{font-size:17px;}.elementor-kit-9 h5{font-size:13px;}.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);}@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-kit-9 h1{font-size:40px;}.elementor-kit-9 h2{font-size:30px;}.elementor-kit-9 h3{font-size:18px;}.elementor-kit-9 h4{font-size:16px;}.elementor-kit-9 h5{font-size:13px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ═══════════════════════════════════════════════════════════════
   STRADA AUTOMOTIVE — header
   ───────────────────────────────────────────────────────────────
   PLAKKEN IN:  Elementor → Site Settings (Hamburger linksboven)
                → Custom CSS

   VEREIST:     de BUITENSTE container van je header-template heeft
                de CSS-klasse:   strada-header
                (Geavanceerd → CSS-klassen)

   Deze versie gebruikt een echte klassenaam in plaats van
   `.elementor-kit-9`. Dat woord werkt namelijk alleen in het Custom
   CSS-veld van een los element — in Site Settings faalt daardoor
   de hele stylesheet.
   ═══════════════════════════════════════════════════════════════ */


/* ── 1. De wrapper die Elementor om elke header zet ── */
.elementor-location-header{
  background: transparent !important;
}


/* ── 2. De balk zelf: onzichtbaar boven de hero ── */
.strada-header{
  background-color: transparent !important;
  background-image: none !important;
  border-bottom: 1px solid transparent;
  transition: background-color .38s ease,
              border-color .38s ease,
              backdrop-filter .38s ease,
              min-height .38s ease;
}

/* Zodra je scrollt zet Elementor deze klasse erop */
.strada-header.elementor-sticky--effects{
  background-color: rgba(0,0,0,.88) !important;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-bottom-color: #262A31;
  min-height: 68px;
}


/* ── 3. Menulinks ──
   Elementor genereert eigen regels op .elementor-item. Die zijn
   specifieker dan een gewone a-.elementor-kit-9, vandaar !important. */
.strada-header .elementor-nav-menu .elementor-item{
  position: relative !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: .3px !important;
  text-transform: none !important;
  padding: 8px 0 !important;
  margin: 0 16px !important;
  transition: color .22s ease !important;
}

.strada-header .elementor-nav-menu .elementor-item,
.strada-header .elementor-nav-menu .elementor-item:link,
.strada-header .elementor-nav-menu .elementor-item:visited{
  color: #9EA3AE !important;
}

.strada-header .elementor-nav-menu .elementor-item:hover,
.strada-header .elementor-nav-menu .elementor-item:focus,
.strada-header .elementor-nav-menu .elementor-item.highlighted,
.strada-header .elementor-nav-menu .elementor-item.elementor-item-active{
  color: #F2F5FA !important;
}

/* dun wit streepje dat onder de link uitschuift */
.strada-header .elementor-nav-menu .elementor-item::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: #F2F5FA;
  transition: width .28s cubic-bezier(.22,.61,.36,1);
}
.strada-header .elementor-nav-menu .elementor-item:hover::after,
.strada-header .elementor-nav-menu .elementor-item.elementor-item-active::after{
  width: 100%;
}


/* ── 4. Telefoonnummer in de header ── */
.strada-header .elementor-widget-text-editor a,
.strada-header .elementor-widget-text-editor a:link,
.strada-header .elementor-widget-text-editor a:visited{
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: #9EA3AE !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color .22s ease !important;
}
.strada-header .elementor-widget-text-editor a:hover{ color: #F2F5FA !important; }


/* ── 5. Knop rechts ──
   Elke eigenschap heeft hier !important nodig — anders wint
   Elementors eigen per-widget CSS (die na deze stylesheet
   geladen wordt) van alles zonder !important, ook al is dit
   een class-.elementor-kit-9. Dat gaf eerder een grijze ronde
   standaardknop in plaats van de rechte witte Strada-knop. */
.strada-header .elementor-button,
.strada-header .elementor-button:link,
.strada-header .elementor-button:visited{
  font-family: 'Archivo', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: 1.4px !important;
  text-transform: uppercase !important;
  padding: 13px 26px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  background-color: rgba(255,255,255,.06) !important;
  color: #F2F5FA !important;
  box-shadow: none !important;
  transition: .28s cubic-bezier(.22,.61,.36,1) !important;
}
@media (hover:hover) and (pointer:fine){
  .strada-header .elementor-button:hover{
    background-color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    color: #000000 !important;
    transform: translateY(-2px) !important;
  }
}


/* ── 6. Hamburger & uitklapmenu op mobiel ── */
.strada-header .elementor-menu-toggle{
  color: #F2F5FA !important;
  background: transparent !important;
}
.strada-header .elementor-nav-menu--dropdown{
  background-color: rgba(0,0,0,.97) !important;
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
.strada-header .elementor-nav-menu--dropdown .elementor-item,
.strada-header .elementor-nav-menu--dropdown .elementor-item:link,
.strada-header .elementor-nav-menu--dropdown .elementor-item:visited,
.strada-header .elementor-nav-menu--dropdown .elementor-item:hover,
.strada-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
  font-family: 'Archivo', sans-serif !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #F2F5FA !important;
  padding: 18px 28px !important;
  margin: 0 !important;
  border-bottom: 1px solid #262A31 !important;
}
.strada-header .elementor-nav-menu--dropdown .elementor-item::after{ display: none; }


/* ── 7. Mobiel ── */
@media (max-width: 767px){
  .strada-header{
    min-height: 68px;
    padding-left: 20px;
    padding-right: 20px;
  }
  .strada-header .elementor-button{ display: none; }
}/* End custom CSS */