.elementor-7 .elementor-element.elementor-element-8a841f9{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-7 .elementor-element.elementor-element-8a841f9:not(.elementor-motion-effects-element-type-background), .elementor-7 .elementor-element.elementor-element-8a841f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://sterckeman-przyczepy.pl/wp-content/uploads/2026/09/hero.jpg");background-size:cover;}.elementor-7 .elementor-element.elementor-element-8a841f9::before, .elementor-7 .elementor-element.elementor-element-8a841f9 > .elementor-background-video-container::before, .elementor-7 .elementor-element.elementor-element-8a841f9 > .e-con-inner > .elementor-background-video-container::before, .elementor-7 .elementor-element.elementor-element-8a841f9 > .elementor-background-slideshow::before, .elementor-7 .elementor-element.elementor-element-8a841f9 > .e-con-inner > .elementor-background-slideshow::before, .elementor-7 .elementor-element.elementor-element-8a841f9 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{--background-overlay:'';}.elementor-7 .elementor-element.elementor-element-8a841f9 > .elementor-shape-bottom svg, .elementor-7 .elementor-element.elementor-element-8a841f9 > .e-con-inner > .elementor-shape-bottom svg{height:100px;}.elementor-7 .elementor-element.elementor-element-972ee21{--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;--justify-content:center;}body:not(.rtl) .elementor-7 .elementor-element.elementor-element-6098452{left:0px;}body.rtl .elementor-7 .elementor-element.elementor-element-6098452{right:0px;}.elementor-7 .elementor-element.elementor-element-6098452{top:0px;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-7 .elementor-element.elementor-element-52d9d1f{--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;--justify-content:flex-end;--padding-top:0px;--padding-bottom:150px;--padding-left:0px;--padding-right:0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-7 .elementor-element.elementor-element-4967e60 .elementor-heading-title{font-family:"Omnes", Sans-serif;font-size:110px;font-weight:700;font-style:normal;line-height:110px;color:#FFFFFF;}.elementor-7 .elementor-element.elementor-element-353f14d .elementor-heading-title{font-family:"Omnes", Sans-serif;font-size:67px;font-weight:700;font-style:normal;color:#FFFFFF;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-7 .elementor-element.elementor-element-972ee21{--width:50%;}.elementor-7 .elementor-element.elementor-element-52d9d1f{--width:50%;}}/* Start custom CSS for heading, class: .elementor-element-4967e60 */.elementor-7 .elementor-element.elementor-element-4967e60 .red-dot {
    display: inline-block;
    color: #ed1d2e;
    font-size: 1.15em;
    line-height: 0;
    transform: translateY(0.05em);
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-8a841f9 *//* =========================================================
   HERO – GŁÓWNY KONTENER
   Klasa Elementor: hero-section
   ========================================================= */

.hero-section {
    position: relative;
    min-height: 850px;
    overflow: hidden;
    isolation: isolate;
}


/* =========================================================
   CZERWONA WSTĘGA – WIDGET HTML Z SVG
   Klasa Elementor: hero-red-line
   ========================================================= */

.hero-red-line {
    position: absolute !important;
    z-index: 1 !important;
    top: -90px;
    left: 5%;
    width: 700px;
    height: 900px;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* Wrapper dodawany automatycznie przez Elementor */
.hero-red-line .elementor-widget-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

/* SVG wypełnia dokładnie wymiary widgetu */
.hero-red-line .red-ribbon-svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}


/* =========================================================
   ANIMACJA — RYSOWANIE WSTĘGI OD GÓRY
   W SVG path musi mieć:
   class="red-ribbon-path"
   pathLength="100"

   Kropka musi mieć:
   class="red-ribbon-dot"
   ========================================================= */

.hero-red-line .red-ribbon-path {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: draw-red-ribbon 2.8s cubic-bezier(0.65, 0, 0.35, 1) 0.4s forwards;
}

.hero-red-line .red-ribbon-dot {
    opacity: 0;
    animation: reveal-ribbon-dot 0.3s ease 3.05s forwards;
}

@keyframes draw-red-ribbon {
    from {
        stroke-dashoffset: 100;
    }

    to {
        stroke-dashoffset: 0;
    }
}

@keyframes reveal-ribbon-dot {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* =========================================================
   PRZYCZEPA / PRODUKT
   Klasa Elementor: hero-product
   ========================================================= */

.hero-product {
    position: absolute !important;
    z-index: 2 !important;
    left: 4%;
    bottom: 15%;
    width: min(43vw, 760px);
    margin: 0 !important;
    padding: 0 !important;
}

.hero-product img {
    display: block;
    width: 100%;
    height: auto;
}


/* =========================================================
   TEKST, LOGO, NAGŁÓWEK I CTA
   Klasa Elementor: hero-content
   ========================================================= */

.hero-content {
    position: absolute !important;
    z-index: 3 !important;
    right: 8%;
    bottom: 17%;
    width: min(43%, 660px);
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {
    .hero-section {
        min-height: 720px;
    }

    .hero-red-line {
        top: -100px;
        left: -2%;
        width: 620px;
        height: 800px;
    }

    .hero-product {
        left: 1%;
        bottom: 20%;
        width: min(54vw, 650px);
    }

    .hero-content {
        right: 6%;
        bottom: 14%;
        width: 45%;
    }
}


/* =========================================================
   TELEFON
   ========================================================= */

@media (max-width: 767px) {
    .hero-section {
        min-height: 680px;
    }

    .hero-red-line {
        top: -120px;
        left: -200px;
        width: 610px;
        height: 850px;
    }

    .hero-product {
        left: -12%;
        bottom: 27%;
        width: 114%;
    }

    .hero-content {
        right: auto;
        bottom: 5%;
        left: 7%;
        width: 86%;
    }
}


/* =========================================================
   DOSTĘPNOŚĆ — WŁĄCZONE OGRANICZENIE RUCHU
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    .hero-red-line .red-ribbon-path {
        animation: none;
        stroke-dashoffset: 0;
    }

    .hero-red-line .red-ribbon-dot {
        animation: none;
        opacity: 1;
    }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Omnes';
	font-display: auto;
	src: url('https://sterckeman-przyczepy.pl/wp-content/uploads/2026/09/Omnes-Bold.ttf') format('truetype');
}
/* End Custom Fonts CSS */