.elementor-15 .elementor-element.elementor-element-9c1f197{--display:flex;--min-height:681px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0.48;border-style:none;--border-style:none;}.elementor-15 .elementor-element.elementor-element-9c1f197:not(.elementor-motion-effects-element-type-background), .elementor-15 .elementor-element.elementor-element-9c1f197 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://staraestheticsuk.com/wp-content/uploads/2025/11/stars.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-15 .elementor-element.elementor-element-9c1f197::before, .elementor-15 .elementor-element.elementor-element-9c1f197 > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-9c1f197 > .e-con-inner > .elementor-background-video-container::before, .elementor-15 .elementor-element.elementor-element-9c1f197 > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-9c1f197 > .e-con-inner > .elementor-background-slideshow::before, .elementor-15 .elementor-element.elementor-element-9c1f197 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000105;--background-overlay:'';}.elementor-15 .elementor-element.elementor-element-de34fe2{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-ad29614{--display:flex;--min-height:480px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-15 .elementor-element.elementor-element-165b011{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-480b4b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-15 .elementor-element.elementor-element-7b11f55{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for container, class: .elementor-element-9c1f197 *//* === HERO FADE EFFECT (Wtapianie w dół) === */

/* 1. Ustawienia kontenera Hero */
.sa-hero-video {
    position: relative;
    border: none !important;       /* Usuwa ewentualną ramkę z Elementora */
    margin-bottom: -2px !important; /* Wciągamy sekcję poniżej o 2px "pod spód" */
    overflow: visible !important;   /* Pozwala gradientowi wystawać poza ramkę */
    z-index: 1;
}

/* 2. Tworzymy gradientową nakładkę (Mgiełkę) */
.sa-hero-video::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    
    /* Przesuwamy gradient o 2px W DÓŁ, żeby zakleić łączenie sekcji */
    bottom: -2px; 
    
    /* Wysokość efektu zanikania (im więcej, tym łagodniej) */
    height: 250px; 
    
    /* GRADIENT: Od przezroczystego do koloru tła poniżej */
    /* WAŻNE: Jeśli sekcja niżej jest biała -> zostaw #ffffff */
    /* Jeśli sekcja niżej jest kremowa -> zmień #ffffff na #fdfdfd */
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fdfdfd 100%);
    
    z-index: 2; /* Nad zdjęciem */
    pointer-events: none; /* Kliknięcia przechodzą przez mgłę */
}

/* 3. Wyciągamy tekst i przyciski NA WIERZCH (żeby nie były za mgłą) */
.sa-hero-video-inner,
.sa-hero-video .elementor-widget-wrap {
    position: relative;
    z-index: 10 !important;
}

/* Dostosowanie dla telefonów (mniejsza mgiełka) */
@media (max-width: 768px) {
    .sa-hero-video::after {
        height: 120px;
    }
}/* End custom CSS */