.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"PT Serif";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"PT Serif";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-kit-7 a{color:#FFFFFF;}.elementor-kit-7 a:hover{color:#F68B2E;}.elementor-kit-7 h1{font-size:55px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end: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 .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.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 *//* ============================================================
   NATIVE SON PAINTING LLC – Shrink-on-Scroll Header
   Elementor Custom CSS — paste on the main header container
   ============================================================ */

/* --- DEFAULT STATE: Smooth transitions for all animated properties --- */
.elementor-kit-7 {
    transition: padding-top    0.4s ease-in-out,
                padding-bottom 0.4s ease-in-out,
                min-height     0.4s ease-in-out,
                box-shadow     0.4s ease-in-out,
                background-color 0.4s ease-in-out !important;
}

.elementor-kit-7 .elementor-widget-image img {
    /* Transition covers max-width, width, filter, and transform for full smoothness */
    transition: max-width  0.4s ease-in-out,
                width      0.4s ease-in-out,
                filter     0.4s ease-in-out,
                transform  0.4s ease-in-out !important;
}

/* --- SHRUNK STATE: Triggered after scrolling past the Effects Offset --- */
.elementor-kit-7.elementor-sticky--effects {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    min-height: 80px !important;
    background-color: rgba(2, 63, 117, 0.97) !important;
    box-shadow: 0px 3px 14px rgba(0, 0, 0, 0.28) !important;
}

/* Shrink the centered logo via layout width (not transform) */
.elementor-kit-7.elementor-sticky--effects .elementor-widget-image img {
    max-width: 110px !important;
    width: 110px !important;
    height: auto !important;
}

/* Keep nav items vertically centred as the header shrinks */
.elementor-kit-7.elementor-sticky--effects .elementor-nav-menu--main {
    align-items: center !important;
}

/* ================================================================
   NATIVE SON PAINTING — Top Bar Transparency Fix
   
   ROOT CAUSE:
   The rule `.elementor-kit-7.elementor-sticky--effects` in post-7.css
   (your Global Kit CSS) applies `background-color: rgba(2, 63, 117, 0.97)`
   to the ENTIRE kit wrapper when scrolled — this wrapper encompasses
   BOTH the top bar AND the main header. So when the page is scrolled,
   the semi-transparent navy bleeds over the top bar's dark background.
   
   Additionally, the top bar outer container (62ed8e4c) has its background
   set to rgb(0, 4, 8) — nearly black — instead of the intended #0d1b2e.
   This needs to be corrected in Elementor directly, but can also be
   overridden via CSS.
   
   FIX STRATEGY:
   1. Force the top bar container to always keep its own background colour,
      immune to the kit-level sticky transparency override.
   2. Correct the top bar colour to the intended dark navy #0d1b2e.
   ================================================================ */

/* ----------------------------------------------------------------
   Fix 1: Correct the top bar background colour
   (it's currently rgb(0,4,8) — nearly black — not the intended dark navy)
   Update this in Elementor too: select the top bar container,
   Advanced → Background → Color → #0d1b2e
   ---------------------------------------------------------------- */
.elementor-element-62ed8e4c,
.elementor-element-62ed8e4c:not(.elementor-motion-effects-element-type-background),
.elementor-element-62ed8e4c > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: #0d1b2e !important;
}

/* ----------------------------------------------------------------
   Fix 2: Prevent the sticky-effects transparency from bleeding
   into the top bar. The .elementor-kit-7.elementor-sticky--effects
   rule sets a semi-transparent background on the whole kit wrapper.
   We lock the top bar to its own solid colour so it ignores that.
   ---------------------------------------------------------------- */
.elementor-sticky--effects .elementor-element-62ed8e4c,
.elementor-sticky--effects .elementor-element-62ed8e4c:not(.elementor-motion-effects-element-type-background) {
    background-color: #0d1b2e !important;
    opacity: 1 !important;
}

/* ----------------------------------------------------------------
   Fix 3: Also lock the top bar's inner contact container
   (62ed8e4c's child 2de17079) — it currently shows rgba(0,0,0,0)
   transparent, which is correct since it inherits from the outer.
   No change needed there — the outer fix above handles it.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Fix 4: Ensure the GET A FREE ESTIMATE button in the top bar
   is never affected by the sticky background transition
   ---------------------------------------------------------------- */
.elementor-sticky--effects .elementor-element-62ed8e4c .elementor-button {
    background-color: #c80f2a !important;
}/* End custom CSS */