.elementor-134 .elementor-element.elementor-element-cfd70e5{--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;--gap:60px 60px;--row-gap:60px;--column-gap:60px;}.elementor-134 .elementor-element.elementor-element-47c802c{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-ade984c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-952a758{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--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-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-134 .elementor-element.elementor-element-17ad101{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right: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-134 .elementor-element.elementor-element-9a555c4{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-892b7e7{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-8fcaaac{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-ab6b72f{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-a724a3a{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-168c20c{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-edaa990{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-9f9fd3c{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-5580042{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-134 .elementor-element.elementor-element-df09d7d{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-9b79158{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:nowrap;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-3a2b770{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-5cd42f9{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-315aba4{--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;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-134 .elementor-element.elementor-element-7a257ff{--display:flex;}.elementor-134 .elementor-element.elementor-element-d4b566b{--display:flex;}.elementor-134 .elementor-element.elementor-element-7054940{--display:flex;}.elementor-134 .elementor-element.elementor-element-cff4680{--display:flex;}.elementor-134 .elementor-element.elementor-element-96935ad{--display:flex;}.elementor-134 .elementor-element.elementor-element-d727953{--display:flex;}.elementor-134 .elementor-element.elementor-element-621f367{--display:flex;}.elementor-134 .elementor-element.elementor-element-e452773{--display:flex;}.elementor-134 .elementor-element.elementor-element-b898f89{--display:flex;}.elementor-134 .elementor-element.elementor-element-ea0fec5 .elementor-button-content-wrapper{flex-direction:row;}.elementor-134 .elementor-element.elementor-element-7385777{--display:flex;}.elementor-134 .elementor-element.elementor-element-e77ed96{--display:flex;}.elementor-134 .elementor-element.elementor-element-8e2e08f{--display:flex;}.elementor-134 .elementor-element.elementor-element-3e8e475 .elementor-button-content-wrapper{flex-direction:row;}.elementor-134 .elementor-element.elementor-element-c3774ec{--display:flex;}@media(min-width:768px){.elementor-134 .elementor-element.elementor-element-cfd70e5{--width:100%;}.elementor-134 .elementor-element.elementor-element-47c802c{--width:100%;}.elementor-134 .elementor-element.elementor-element-ade984c{--width:100%;}.elementor-134 .elementor-element.elementor-element-9a555c4{--width:100%;}.elementor-134 .elementor-element.elementor-element-892b7e7{--width:100%;}.elementor-134 .elementor-element.elementor-element-a724a3a{--width:100%;}.elementor-134 .elementor-element.elementor-element-168c20c{--width:100%;}.elementor-134 .elementor-element.elementor-element-df09d7d{--width:100%;}.elementor-134 .elementor-element.elementor-element-9b79158{--width:100%;}}/* Start custom CSS for container, class: .elementor-element-47c802c */.elementor-134 .elementor-element.elementor-element-47c802c { --content-media-height: 440px; --content-media-visual-width: 400px; width: 85% !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-family: "Manrope", sans-serif; } /* Zwykły blok przy lewej krawędzi */ .elementor-134 .elementor-element.elementor-element-47c802c:not(.content-media-reverse) { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; } /* Wersja odwrócona przy prawej krawędzi */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; } .elementor-134 .elementor-element.elementor-element-47c802c * { box-sizing: border-box; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-row { position: relative; width: 100%; max-width: none; height: var(--content-media-height) !important; min-height: var(--content-media-height) !important; max-height: var(--content-media-height) !important; display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; margin: 0; padding: 0; background: transparent !important; overflow: hidden; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-copy { position: relative; z-index: 1; height: 100%; min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; margin: 0; padding: 64px 40px 64px 128px; background: #1D1E20; overflow: visible; } /* Czarne wejście pod obrazek */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-copy::after { content: ""; position: absolute; top: 0; right: -80px; bottom: 0; width: 80px; background: #1D1E20; pointer-events: none; z-index: 0; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-copy > * { position: relative; z-index: 1; } /* Wersja odwrócona: czarne wejście od lewej */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-copy::after { left: -80px; right: auto; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title p { width: 100%; margin: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 40px; font-weight: 700; line-height: 52px; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description p, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description li { margin-top: 0; margin-bottom: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 500; line-height: 33px; text-align: justify; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description ul, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description ol { margin: 0; padding-left: 24px; } /* Obraz */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-visual { position: relative; z-index: 2; width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-height); min-height: var(--content-media-height); max-height: var(--content-media-height); flex: 0 0 var(--content-media-visual-width); align-self: stretch; display: flex !important; margin: 0; padding: 0; overflow: visible; line-height: 0; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-visual > .elementor-element, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-visual .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-visual img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; object-position: center center; margin: 0; padding: 0; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-row { flex-direction: row-reverse; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-copy { padding: 64px 128px 64px 40px; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action { --content-media-cta-width: 260px; --content-media-cta-height: 84px; --content-media-cta-offset: 40px; position: relative; overflow: visible !important; padding-bottom: var(--content-media-cta-offset) !important; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action { position: absolute; right: calc(var(--content-media-visual-width) - 18px); bottom: 0; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; padding: 0; z-index: 5; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action .elementor-button-wrapper { width: 100%; height: 100%; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 6px solid #000000; border-radius: 6px; background: #F9A928; color: #000000; font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; text-transform: none; white-space: normal; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action .elementor-button:hover { background: #F9A928; color: #000000; transform: scale(1.03); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } } /* CTA dla obrazu po lewej */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action.content-media-reverse .content-media-action { left: calc(var(--content-media-visual-width) - 18px); right: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .elementor-134 .elementor-element.elementor-element-47c802c { --content-media-height: 384px; --content-media-visual-width: 349px; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-copy { gap: 28px; padding: 48px 32px 48px 64px; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-copy { padding: 48px 64px 48px 32px; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title p { font-size: 34px; line-height: 44px; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description p, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description li { font-size: 17px; line-height: 24px; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action { --content-media-cta-width: 220px; --content-media-cta-height: 72px; --content-media-cta-offset: 34px; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action .elementor-button { padding: 8px 14px; border-width: 5px; font-size: 19px; line-height: 24px; } } /* ========================================================= MOBILE — tekst i obraz obok siebie, pełne czarne tło oraz CTA pod obrazkiem ========================================================= */ @media (max-width: 960px) { .elementor-134 .elementor-element.elementor-element-47c802c, .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse { --content-media-visual-width: clamp(8.75rem, 35vw, 12rem); --content-media-mobile-height: clamp(9.625rem, 38.5vw, 13.2rem); width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; align-self: auto !important; margin: 0 !important; } /* Pełne czarne tło również pod obrazkiem */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-row, .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-row { height: auto !important; min-height: var(--content-media-mobile-height) !important; max-height: none !important; display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; background: #1D1E20 !important; overflow: visible; } /* Odwrócona wersja: obraz po lewej */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-row { flex-direction: row-reverse !important; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-copy, .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-copy { min-height: var(--content-media-mobile-height); height: auto; gap: 0.75rem; padding: 1.25rem 0.8rem 1.25rem 1.25rem; background: transparent; overflow: visible; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-reverse .content-media-copy { padding: 1.25rem 1.25rem 1.25rem 0.8rem; } /* Na telefonie całe tło robi content-media-row */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-copy::after { display: none; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-title p { font-size: clamp(1.25rem, 5.2vw, 1.6rem); line-height: 1.2; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description p, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description li { font-size: clamp(0.68rem, 2.5vw, 0.82rem); line-height: 1.35; text-align: left; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description ul, .elementor-134 .elementor-element.elementor-element-47c802c .content-media-description ol { padding-left: 1rem; } /* Obraz pozostaje obok tekstu */ .elementor-134 .elementor-element.elementor-element-47c802c .content-media-visual { width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-mobile-height); min-height: var(--content-media-mobile-height); max-height: var(--content-media-mobile-height); flex: 0 0 var(--content-media-visual-width); align-self: flex-start; aspect-ratio: auto; } .elementor-134 .elementor-element.elementor-element-47c802c .content-media-visual img { width: 100% !important; height: 100% !important; object-fit: contain; object-position: center top; } /* ======================================================= CTA — pod obrazkiem, wewnątrz czarnego bloku ======================================================= */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action { --content-media-cta-width: min( calc(var(--content-media-visual-width) - 0.5rem), clamp(8rem, 30vw, 10rem) ); --content-media-cta-height: clamp(3.3rem, 12vw, 4.2rem); --content-media-cta-top: calc( var(--content-media-mobile-height) + 0.5rem ); padding-bottom: 0 !important; } /* Rząd jest wystarczająco wysoki na obraz i CTA */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-row { min-height: calc( var(--content-media-mobile-height) + var(--content-media-cta-height) + 0.75rem ) !important; } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action, .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action.content-media-reverse .content-media-action { position: absolute !important; top: var(--content-media-cta-top); bottom: auto; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; z-index: 5; } /* Obraz po prawej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action:not(.content-media-reverse) .content-media-action { left: auto; right: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } /* Obraz po lewej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action.content-media-reverse .content-media-action { right: auto; left: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } .elementor-134 .elementor-element.elementor-element-47c802c.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; padding: 0.35rem 0.55rem; border-width: 0.3rem; border-radius: 0.3rem; font-size: clamp(0.82rem, 3.4vw, 1.05rem); line-height: 1.15; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-9a555c4 */.elementor-134 .elementor-element.elementor-element-9a555c4 { --content-media-height: 440px; --content-media-visual-width: 400px; width: 85% !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-family: "Manrope", sans-serif; } /* Zwykły blok przy lewej krawędzi */ .elementor-134 .elementor-element.elementor-element-9a555c4:not(.content-media-reverse) { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; } /* Wersja odwrócona przy prawej krawędzi */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; } .elementor-134 .elementor-element.elementor-element-9a555c4 * { box-sizing: border-box; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-row { position: relative; width: 100%; max-width: none; height: var(--content-media-height) !important; min-height: var(--content-media-height) !important; max-height: var(--content-media-height) !important; display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; margin: 0; padding: 0; background: transparent !important; overflow: hidden; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-copy { position: relative; z-index: 1; height: 100%; min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; margin: 0; padding: 64px 40px 64px 128px; background: #1D1E20; overflow: visible; } /* Czarne wejście pod obrazek */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-copy::after { content: ""; position: absolute; top: 0; right: -80px; bottom: 0; width: 80px; background: #1D1E20; pointer-events: none; z-index: 0; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-copy > * { position: relative; z-index: 1; } /* Wersja odwrócona: czarne wejście od lewej */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-copy::after { left: -80px; right: auto; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title p { width: 100%; margin: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 40px; font-weight: 700; line-height: 52px; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description p, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description li { margin-top: 0; margin-bottom: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 500; line-height: 33px; text-align: justify; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description ul, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description ol { margin: 0; padding-left: 24px; } /* Obraz */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-visual { position: relative; z-index: 2; width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-height); min-height: var(--content-media-height); max-height: var(--content-media-height); flex: 0 0 var(--content-media-visual-width); align-self: stretch; display: flex !important; margin: 0; padding: 0; overflow: visible; line-height: 0; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-visual > .elementor-element, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-visual .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-visual img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; object-position: center center; margin: 0; padding: 0; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-row { flex-direction: row-reverse; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-copy { padding: 64px 128px 64px 40px; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action { --content-media-cta-width: 260px; --content-media-cta-height: 84px; --content-media-cta-offset: 40px; position: relative; overflow: visible !important; padding-bottom: var(--content-media-cta-offset) !important; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action { position: absolute; right: calc(var(--content-media-visual-width) - 18px); bottom: 0; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; padding: 0; z-index: 5; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action .elementor-button-wrapper { width: 100%; height: 100%; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 6px solid #000000; border-radius: 6px; background: #F9A928; color: #000000; font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; text-transform: none; white-space: normal; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action .elementor-button:hover { background: #F9A928; color: #000000; transform: scale(1.03); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } } /* CTA dla obrazu po lewej */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action.content-media-reverse .content-media-action { left: calc(var(--content-media-visual-width) - 18px); right: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .elementor-134 .elementor-element.elementor-element-9a555c4 { --content-media-height: 384px; --content-media-visual-width: 349px; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-copy { gap: 28px; padding: 48px 32px 48px 64px; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-copy { padding: 48px 64px 48px 32px; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title p { font-size: 34px; line-height: 44px; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description p, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description li { font-size: 17px; line-height: 24px; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action { --content-media-cta-width: 220px; --content-media-cta-height: 72px; --content-media-cta-offset: 34px; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action .elementor-button { padding: 8px 14px; border-width: 5px; font-size: 19px; line-height: 24px; } } /* ========================================================= MOBILE — tekst i obraz obok siebie, pełne czarne tło oraz CTA pod obrazkiem ========================================================= */ @media (max-width: 960px) { .elementor-134 .elementor-element.elementor-element-9a555c4, .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse { --content-media-visual-width: clamp(8.75rem, 35vw, 12rem); --content-media-mobile-height: clamp(9.625rem, 38.5vw, 13.2rem); width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; align-self: auto !important; margin: 0 !important; } /* Pełne czarne tło również pod obrazkiem */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-row, .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-row { height: auto !important; min-height: var(--content-media-mobile-height) !important; max-height: none !important; display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; background: #1D1E20 !important; overflow: visible; } /* Odwrócona wersja: obraz po lewej */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-row { flex-direction: row-reverse !important; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-copy, .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-copy { min-height: var(--content-media-mobile-height); height: auto; gap: 0.75rem; padding: 1.25rem 0.8rem 1.25rem 1.25rem; background: transparent; overflow: visible; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-reverse .content-media-copy { padding: 1.25rem 1.25rem 1.25rem 0.8rem; } /* Na telefonie całe tło robi content-media-row */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-copy::after { display: none; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-title p { font-size: clamp(1.25rem, 5.2vw, 1.6rem); line-height: 1.2; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description p, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description li { font-size: clamp(0.68rem, 2.5vw, 0.82rem); line-height: 1.35; text-align: left; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description ul, .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-description ol { padding-left: 1rem; } /* Obraz pozostaje obok tekstu */ .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-visual { width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-mobile-height); min-height: var(--content-media-mobile-height); max-height: var(--content-media-mobile-height); flex: 0 0 var(--content-media-visual-width); align-self: flex-start; aspect-ratio: auto; } .elementor-134 .elementor-element.elementor-element-9a555c4 .content-media-visual img { width: 100% !important; height: 100% !important; object-fit: contain; object-position: center top; } /* ======================================================= CTA — pod obrazkiem, wewnątrz czarnego bloku ======================================================= */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action { --content-media-cta-width: min( calc(var(--content-media-visual-width) - 0.5rem), clamp(8rem, 30vw, 10rem) ); --content-media-cta-height: clamp(3.3rem, 12vw, 4.2rem); --content-media-cta-top: calc( var(--content-media-mobile-height) + 0.5rem ); padding-bottom: 0 !important; } /* Rząd jest wystarczająco wysoki na obraz i CTA */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-row { min-height: calc( var(--content-media-mobile-height) + var(--content-media-cta-height) + 0.75rem ) !important; } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action, .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action.content-media-reverse .content-media-action { position: absolute !important; top: var(--content-media-cta-top); bottom: auto; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; z-index: 5; } /* Obraz po prawej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action:not(.content-media-reverse) .content-media-action { left: auto; right: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } /* Obraz po lewej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action.content-media-reverse .content-media-action { right: auto; left: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } .elementor-134 .elementor-element.elementor-element-9a555c4.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; padding: 0.35rem 0.55rem; border-width: 0.3rem; border-radius: 0.3rem; font-size: clamp(0.82rem, 3.4vw, 1.05rem); line-height: 1.15; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-a724a3a */.elementor-134 .elementor-element.elementor-element-a724a3a { --content-media-height: 440px; --content-media-visual-width: 400px; width: 85% !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-family: "Manrope", sans-serif; } /* Zwykły blok przy lewej krawędzi */ .elementor-134 .elementor-element.elementor-element-a724a3a:not(.content-media-reverse) { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; } /* Wersja odwrócona przy prawej krawędzi */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; } .elementor-134 .elementor-element.elementor-element-a724a3a * { box-sizing: border-box; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-row { position: relative; width: 100%; max-width: none; height: var(--content-media-height) !important; min-height: var(--content-media-height) !important; max-height: var(--content-media-height) !important; display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; margin: 0; padding: 0; background: transparent !important; overflow: hidden; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-copy { position: relative; z-index: 1; height: 100%; min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; margin: 0; padding: 64px 40px 64px 128px; background: #1D1E20; overflow: visible; } /* Czarne wejście pod obrazek */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-copy::after { content: ""; position: absolute; top: 0; right: -80px; bottom: 0; width: 80px; background: #1D1E20; pointer-events: none; z-index: 0; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-copy > * { position: relative; z-index: 1; } /* Wersja odwrócona: czarne wejście od lewej */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-copy::after { left: -80px; right: auto; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title p { width: 100%; margin: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 40px; font-weight: 700; line-height: 52px; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description p, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description li { margin-top: 0; margin-bottom: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 500; line-height: 33px; text-align: justify; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description ul, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description ol { margin: 0; padding-left: 24px; } /* Obraz */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-visual { position: relative; z-index: 2; width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-height); min-height: var(--content-media-height); max-height: var(--content-media-height); flex: 0 0 var(--content-media-visual-width); align-self: stretch; display: flex !important; margin: 0; padding: 0; overflow: visible; line-height: 0; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-visual > .elementor-element, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-visual .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-visual img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; object-position: center center; margin: 0; padding: 0; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-row { flex-direction: row-reverse; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-copy { padding: 64px 128px 64px 40px; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action { --content-media-cta-width: 260px; --content-media-cta-height: 84px; --content-media-cta-offset: 40px; position: relative; overflow: visible !important; padding-bottom: var(--content-media-cta-offset) !important; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action { position: absolute; right: calc(var(--content-media-visual-width) - 18px); bottom: 0; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; padding: 0; z-index: 5; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action .elementor-button-wrapper { width: 100%; height: 100%; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 6px solid #000000; border-radius: 6px; background: #F9A928; color: #000000; font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; text-transform: none; white-space: normal; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action .elementor-button:hover { background: #F9A928; color: #000000; transform: scale(1.03); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } } /* CTA dla obrazu po lewej */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action.content-media-reverse .content-media-action { left: calc(var(--content-media-visual-width) - 18px); right: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .elementor-134 .elementor-element.elementor-element-a724a3a { --content-media-height: 384px; --content-media-visual-width: 349px; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-copy { gap: 28px; padding: 48px 32px 48px 64px; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-copy { padding: 48px 64px 48px 32px; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title p { font-size: 34px; line-height: 44px; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description p, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description li { font-size: 17px; line-height: 24px; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action { --content-media-cta-width: 220px; --content-media-cta-height: 72px; --content-media-cta-offset: 34px; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action .elementor-button { padding: 8px 14px; border-width: 5px; font-size: 19px; line-height: 24px; } } /* ========================================================= MOBILE — tekst i obraz obok siebie, pełne czarne tło oraz CTA pod obrazkiem ========================================================= */ @media (max-width: 960px) { .elementor-134 .elementor-element.elementor-element-a724a3a, .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse { --content-media-visual-width: clamp(8.75rem, 35vw, 12rem); --content-media-mobile-height: clamp(9.625rem, 38.5vw, 13.2rem); width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; align-self: auto !important; margin: 0 !important; } /* Pełne czarne tło również pod obrazkiem */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-row, .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-row { height: auto !important; min-height: var(--content-media-mobile-height) !important; max-height: none !important; display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; background: #1D1E20 !important; overflow: visible; } /* Odwrócona wersja: obraz po lewej */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-row { flex-direction: row-reverse !important; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-copy, .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-copy { min-height: var(--content-media-mobile-height); height: auto; gap: 0.75rem; padding: 1.25rem 0.8rem 1.25rem 1.25rem; background: transparent; overflow: visible; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-reverse .content-media-copy { padding: 1.25rem 1.25rem 1.25rem 0.8rem; } /* Na telefonie całe tło robi content-media-row */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-copy::after { display: none; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-title p { font-size: clamp(1.25rem, 5.2vw, 1.6rem); line-height: 1.2; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description p, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description li { font-size: clamp(0.68rem, 2.5vw, 0.82rem); line-height: 1.35; text-align: left; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description ul, .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-description ol { padding-left: 1rem; } /* Obraz pozostaje obok tekstu */ .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-visual { width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-mobile-height); min-height: var(--content-media-mobile-height); max-height: var(--content-media-mobile-height); flex: 0 0 var(--content-media-visual-width); align-self: flex-start; aspect-ratio: auto; } .elementor-134 .elementor-element.elementor-element-a724a3a .content-media-visual img { width: 100% !important; height: 100% !important; object-fit: contain; object-position: center top; } /* ======================================================= CTA — pod obrazkiem, wewnątrz czarnego bloku ======================================================= */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action { --content-media-cta-width: min( calc(var(--content-media-visual-width) - 0.5rem), clamp(8rem, 30vw, 10rem) ); --content-media-cta-height: clamp(3.3rem, 12vw, 4.2rem); --content-media-cta-top: calc( var(--content-media-mobile-height) + 0.5rem ); padding-bottom: 0 !important; } /* Rząd jest wystarczająco wysoki na obraz i CTA */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-row { min-height: calc( var(--content-media-mobile-height) + var(--content-media-cta-height) + 0.75rem ) !important; } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action, .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action.content-media-reverse .content-media-action { position: absolute !important; top: var(--content-media-cta-top); bottom: auto; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; z-index: 5; } /* Obraz po prawej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action:not(.content-media-reverse) .content-media-action { left: auto; right: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } /* Obraz po lewej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action.content-media-reverse .content-media-action { right: auto; left: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } .elementor-134 .elementor-element.elementor-element-a724a3a.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; padding: 0.35rem 0.55rem; border-width: 0.3rem; border-radius: 0.3rem; font-size: clamp(0.82rem, 3.4vw, 1.05rem); line-height: 1.15; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-df09d7d */.elementor-134 .elementor-element.elementor-element-df09d7d { --content-media-height: 440px; --content-media-visual-width: 400px; width: 85% !important; max-width: none !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; font-family: "Manrope", sans-serif; } /* Zwykły blok przy lewej krawędzi */ .elementor-134 .elementor-element.elementor-element-df09d7d:not(.content-media-reverse) { align-self: flex-start !important; margin-left: 0 !important; margin-right: auto !important; } /* Wersja odwrócona przy prawej krawędzi */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse { align-self: flex-end !important; margin-left: auto !important; margin-right: 0 !important; } .elementor-134 .elementor-element.elementor-element-df09d7d * { box-sizing: border-box; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-row { position: relative; width: 100%; max-width: none; height: var(--content-media-height) !important; min-height: var(--content-media-height) !important; max-height: var(--content-media-height) !important; display: flex; flex-direction: row; align-items: stretch; flex-wrap: nowrap; margin: 0; padding: 0; background: transparent !important; overflow: hidden; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-copy { position: relative; z-index: 1; height: 100%; min-width: 0; flex: 1 1 0; display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 40px; margin: 0; padding: 64px 40px 64px 128px; background: #1D1E20; overflow: visible; } /* Czarne wejście pod obrazek */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-copy::after { content: ""; position: absolute; top: 0; right: -80px; bottom: 0; width: 80px; background: #1D1E20; pointer-events: none; z-index: 0; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-copy > * { position: relative; z-index: 1; } /* Wersja odwrócona: czarne wejście od lewej */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-copy::after { left: -80px; right: auto; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title p { width: 100%; margin: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 40px; font-weight: 700; line-height: 52px; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description p, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description li { margin-top: 0; margin-bottom: 0; color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 20px; font-weight: 500; line-height: 33px; text-align: justify; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description ul, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description ol { margin: 0; padding-left: 24px; } /* Obraz */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-visual { position: relative; z-index: 2; width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-height); min-height: var(--content-media-height); max-height: var(--content-media-height); flex: 0 0 var(--content-media-visual-width); align-self: stretch; display: flex !important; margin: 0; padding: 0; overflow: visible; line-height: 0; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-visual > .elementor-element, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-visual .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-visual img { width: 100% !important; height: 100% !important; display: block; object-fit: contain; object-position: center center; margin: 0; padding: 0; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-row { flex-direction: row-reverse; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-copy { padding: 64px 128px 64px 40px; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action { --content-media-cta-width: 260px; --content-media-cta-height: 84px; --content-media-cta-offset: 40px; position: relative; overflow: visible !important; padding-bottom: var(--content-media-cta-offset) !important; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action { position: absolute; right: calc(var(--content-media-visual-width) - 18px); bottom: 0; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; padding: 0; z-index: 5; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action .elementor-button-wrapper { width: 100%; height: 100%; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; display: flex; align-items: center; justify-content: center; padding: 10px 18px; border: 6px solid #000000; border-radius: 6px; background: #F9A928; color: #000000; font-family: "Manrope", sans-serif; font-size: 22px; font-weight: 700; line-height: 28px; text-align: center; text-transform: none; white-space: normal; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action .elementor-button:hover { background: #F9A928; color: #000000; transform: scale(1.03); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } } /* CTA dla obrazu po lewej */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action.content-media-reverse .content-media-action { left: calc(var(--content-media-visual-width) - 18px); right: auto; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .elementor-134 .elementor-element.elementor-element-df09d7d { --content-media-height: 384px; --content-media-visual-width: 349px; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-copy { gap: 28px; padding: 48px 32px 48px 64px; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-copy { padding: 48px 64px 48px 32px; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title p { font-size: 34px; line-height: 44px; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description p, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description li { font-size: 17px; line-height: 24px; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action { --content-media-cta-width: 220px; --content-media-cta-height: 72px; --content-media-cta-offset: 34px; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action .elementor-button { padding: 8px 14px; border-width: 5px; font-size: 19px; line-height: 24px; } } /* ========================================================= MOBILE — tekst i obraz obok siebie, pełne czarne tło oraz CTA pod obrazkiem ========================================================= */ @media (max-width: 960px) { .elementor-134 .elementor-element.elementor-element-df09d7d, .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse { --content-media-visual-width: clamp(8.75rem, 35vw, 12rem); --content-media-mobile-height: clamp(9.625rem, 38.5vw, 13.2rem); width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; align-self: auto !important; margin: 0 !important; } /* Pełne czarne tło również pod obrazkiem */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-row, .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-row { height: auto !important; min-height: var(--content-media-mobile-height) !important; max-height: none !important; display: flex; flex-direction: row !important; flex-wrap: nowrap; align-items: stretch; background: #1D1E20 !important; overflow: visible; } /* Odwrócona wersja: obraz po lewej */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-row { flex-direction: row-reverse !important; } /* Tekst */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-copy, .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-copy { min-height: var(--content-media-mobile-height); height: auto; gap: 0.75rem; padding: 1.25rem 0.8rem 1.25rem 1.25rem; background: transparent; overflow: visible; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-reverse .content-media-copy { padding: 1.25rem 1.25rem 1.25rem 0.8rem; } /* Na telefonie całe tło robi content-media-row */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-copy::after { display: none; } /* Tytuł */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title .elementor-heading-title, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-title p { font-size: clamp(1.25rem, 5.2vw, 1.6rem); line-height: 1.2; text-align: center; } /* Opis */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description p, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description li { font-size: clamp(0.68rem, 2.5vw, 0.82rem); line-height: 1.35; text-align: left; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description ul, .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-description ol { padding-left: 1rem; } /* Obraz pozostaje obok tekstu */ .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-visual { width: var(--content-media-visual-width); min-width: var(--content-media-visual-width); max-width: var(--content-media-visual-width); height: var(--content-media-mobile-height); min-height: var(--content-media-mobile-height); max-height: var(--content-media-mobile-height); flex: 0 0 var(--content-media-visual-width); align-self: flex-start; aspect-ratio: auto; } .elementor-134 .elementor-element.elementor-element-df09d7d .content-media-visual img { width: 100% !important; height: 100% !important; object-fit: contain; object-position: center top; } /* ======================================================= CTA — pod obrazkiem, wewnątrz czarnego bloku ======================================================= */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action { --content-media-cta-width: min( calc(var(--content-media-visual-width) - 0.5rem), clamp(8rem, 30vw, 10rem) ); --content-media-cta-height: clamp(3.3rem, 12vw, 4.2rem); --content-media-cta-top: calc( var(--content-media-mobile-height) + 0.5rem ); padding-bottom: 0 !important; } /* Rząd jest wystarczająco wysoki na obraz i CTA */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-row { min-height: calc( var(--content-media-mobile-height) + var(--content-media-cta-height) + 0.75rem ) !important; } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action, .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action.content-media-reverse .content-media-action { position: absolute !important; top: var(--content-media-cta-top); bottom: auto; width: var(--content-media-cta-width); height: var(--content-media-cta-height); margin: 0; z-index: 5; } /* Obraz po prawej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action:not(.content-media-reverse) .content-media-action { left: auto; right: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } /* Obraz po lewej: CTA wycentrowane pod nim */ .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action.content-media-reverse .content-media-action { right: auto; left: calc( (var(--content-media-visual-width) - var(--content-media-cta-width)) / 2 ); } .elementor-134 .elementor-element.elementor-element-df09d7d.content-media-with-action .content-media-action .elementor-button { width: 100%; height: 100%; min-height: 0 !important; padding: 0.35rem 0.55rem; border-width: 0.3rem; border-radius: 0.3rem; font-size: clamp(0.82rem, 3.4vw, 1.05rem); line-height: 1.15; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-cfd70e5 */@media (min-width: 768px) { .elementor-134 .elementor-element.elementor-element-cfd70e5 { width: 100vw !important; max-width: 100vw !important; flex: 0 0 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } }/* End custom CSS */ /* Start custom CSS for button, class: .elementor-element-f2eed5b */.elementor-134 .elementor-element.elementor-element-f2eed5b { width: auto; max-width: 100%; font-family: "Manrope", sans-serif; } .elementor-134 .elementor-element.elementor-element-f2eed5b .elementor-button-wrapper { display: flex; justify-content: center; width: 100%; } .elementor-134 .elementor-element.elementor-element-f2eed5b .elementor-button { width: auto; max-width: 100%; min-height: 4rem; display: inline-flex; align-items: center; justify-content: center; padding: 0.625rem 1.35rem; background: #F9A928; border: 0.375rem solid #000000; border-radius: 0.5rem; color: #000000; font-family: "Manrope", sans-serif; font-size: 2rem; font-weight: 700; line-height: 1.25; text-align: center; text-transform: none; white-space: normal; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-f2eed5b .elementor-button:hover { background: #F9A928; color: #000000; transform: scale(1.04); box-shadow: 0 0.45rem 0.9rem rgba(0, 0, 0, 0.2); } } @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-f2eed5b .elementor-button { min-height: 3.35rem; padding: 0.5rem 1rem; border-width: 0.3125rem; font-size: 1.35rem; line-height: 1.25; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-d4b566b */.elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-badge-size: 32px; --case-card-badge-offset: -8px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; --case-card-bg-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + (var(--case-card-button-height) / 2) ); --case-card-total-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) + 10px ); position: relative; width: var(--case-card-width) !important; max-width: var(--case-card-max-width) !important; height: var(--case-card-total-height) !important; min-height: var(--case-card-total-height) !important; max-height: var(--case-card-total-height) !important; margin: 0 auto 0 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; font-family: "Manrope", sans-serif; } .elementor-134 .elementor-element.elementor-element-d4b566b::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--case-card-bg-height); background: #1d1e20; clip-path: polygon( 0 0, 100% 0, calc(100% - var(--case-card-slant)) 100%, 0 100% ); z-index: 0; pointer-events: none; } .elementor-134 .elementor-element.elementor-element-d4b566b * { box-sizing: border-box; } /* Główny wrapper Elementora */ .elementor-134 .elementor-element.elementor-element-d4b566b > .e-con-inner { position: relative; z-index: 1; width: 100% !important; max-width: none !important; height: var(--case-card-bg-height) !important; min-height: var(--case-card-bg-height) !important; max-height: var(--case-card-bg-height) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: var(--case-card-gap) !important; margin: 0 !important; padding: var(--case-card-padding-top) var(--case-card-padding-right) 0 var(--case-card-padding-left) !important; overflow: visible !important; } /* ========================================================= LEWA CZĘŚĆ — obrazek, badge, button ========================================================= */ .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-media { position: relative !important; z-index: 3; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: calc( var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) ) !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; flex: 0 0 var(--case-card-image-width) !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-media > .e-con-inner { position: static !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Obrazek */ .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-image { position: relative !important; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: var(--case-card-image-height) !important; min-height: var(--case-card-image-height) !important; max-height: var(--case-card-image-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border: 2px solid #000000 !important; } /* Badge — bez dodatkowego borderu CSS */ .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-badge { position: absolute !important; top: var(--case-card-badge-offset) !important; right: var(--case-card-badge-offset) !important; width: var(--case-card-badge-size) !important; min-width: var(--case-card-badge-size) !important; max-width: var(--case-card-badge-size) !important; height: var(--case-card-badge-size) !important; min-height: var(--case-card-badge-size) !important; max-height: var(--case-card-badge-size) !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-badge .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-badge img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; object-position: center center !important; border: 0 !important; border-radius: 0 !important; } /* Button — pod obrazkiem, przecina dolną krawędź czarnego pola */ .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button { position: absolute !important; top: calc( var(--case-card-image-height) + var(--case-card-button-gap) ) !important; left: calc( (var(--case-card-image-width) - var(--case-card-button-width)) / 2 ) !important; width: var(--case-card-button-width) !important; min-width: var(--case-card-button-width) !important; max-width: var(--case-card-button-width) !important; height: var(--case-card-button-height) !important; min-height: var(--case-card-button-height) !important; max-height: var(--case-card-button-height) !important; margin: 0 !important; padding: 0 !important; z-index: 6 !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button-wrapper { width: 100% !important; height: 100% !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button { width: 100% !important; height: 100% !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 8px !important; background: #f9a928 !important; border: 2px solid #000000 !important; border-radius: 2px !important; color: #000000 !important; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button-text { color: #000000 !important; font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 19px !important; text-align: center !important; white-space: nowrap !important; text-transform: none !important; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button:hover { background: #f9a928 !important; color: #000000 !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); } } /* ========================================================= PRAWA CZĘŚĆ — tekst ========================================================= */ .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-content { position: relative !important; z-index: 2; width: var(--case-card-content-width) !important; max-width: var(--case-card-content-width) !important; min-width: 0 !important; height: calc( var(--case-card-bg-height) - var(--case-card-padding-top) ) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; flex: 0 1 var(--case-card-content-width) !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-content > .e-con-inner { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--case-card-content-gap) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-title .elementor-heading-title { width: 100% !important; margin: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-title-size) !important; font-weight: 700 !important; line-height: var(--case-card-title-line) !important; text-align: start !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-description { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; flex: 1 1 auto !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-description p { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-desc-size) !important; font-weight: 500 !important; line-height: var(--case-card-desc-line) !important; text-align: justify !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 32px; --case-card-padding-left: 32px; --case-card-gap: 22px; --case-card-slant: 22px; --case-card-content-width: 420px; --case-card-title-size: 18px; --case-card-title-line: 24px; --case-card-desc-size: 8.5px; --case-card-desc-line: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 24px; --case-card-padding-left: 24px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 16px; --case-card-slant: 22px; --case-card-content-width: none; --case-card-title-size: 16px; --case-card-title-line: 22px; --case-card-desc-size: 8px; --case-card-desc-line: 11px; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-content { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-padding-top: 14px; --case-card-padding-right: 16px; --case-card-padding-left: 16px; --case-card-image-width: 132px; --case-card-image-height: 106px; --case-card-badge-size: 28px; --case-card-badge-offset: -7px; --case-card-button-width: 118px; --case-card-button-height: 25px; --case-card-button-gap: 28px; --case-card-gap: 12px; --case-card-slant: 18px; --case-card-title-size: 15px; --case-card-title-line: 20px; --case-card-desc-size: 7.3px; --case-card-desc-line: 10.2px; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button-text { font-size: 12px !important; line-height: 16px !important; } }/* ========================================================= DESKTOP — powiększenie case card i przesunięcie CTA ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 34px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 230px; --case-card-image-height: 184px; --case-card-badge-size: 44px; --case-card-badge-offset: -12px; --case-card-button-width: 190px; --case-card-button-height: 44px; --case-card-button-gap: 34px; --case-card-gap: 64px; --case-card-slant: 36px; --case-card-content-width: 720px; --case-card-content-gap: 22px; --case-card-title-size: 34px; --case-card-title-line: 42px; --case-card-desc-size: 16px; --case-card-desc-line: 25px; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 72px ) !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button-text { font-size: 20px !important; line-height: 26px !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-image img { border-width: 5px !important; } }/* ========================================================= DESKTOP — większa wysokość karty, większy obrazek, więcej miejsca na opis ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 44px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 280px; --case-card-image-height: 224px; --case-card-badge-size: 48px; --case-card-badge-offset: -13px; --case-card-button-width: 210px; --case-card-button-height: 48px; --case-card-button-gap: 54px; --case-card-gap: 72px; --case-card-slant: 42px; --case-card-content-width: 760px; --case-card-content-gap: 24px; --case-card-title-size: 36px; --case-card-title-line: 46px; --case-card-desc-size: 16px; --case-card-desc-line: 26px; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-content { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-content > .e-con-inner { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-description { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-description p { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 88px ) !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-button .elementor-button-text { font-size: 21px !important; line-height: 27px !important; } .elementor-134 .elementor-element.elementor-element-d4b566b .case-card-image img { border-width: 5px !important; } } /* ========================================================= OPIS — szybsze, płynniejsze zmniejszanie przy zwężaniu ekranu Dotyczy tylko opisu, nie nagłówka. ========================================================= */ /* Desktop / laptop */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-desc-size: clamp(16px, 1vw, 22px); --case-card-desc-line: clamp(17px, 1.35vw, 25px); } } /* Tablet */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-desc-size: clamp(9px, 1.15vw, 11px); --case-card-desc-line: clamp(10px, 1.4vw, 14px); } } /* Telefon */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-desc-size: clamp(7px, 1.8vw, 8px); --case-card-desc-line: clamp(9.5px, 2.4vw, 11px); } } /* Mały telefon */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-d4b566b { --case-card-desc-size: clamp(6.6px, 1.9vw, 7.3px); --case-card-desc-line: clamp(9px, 2.55vw, 10.2px); } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-96935ad */.elementor-134 .elementor-element.elementor-element-96935ad { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-badge-size: 32px; --case-card-badge-offset: -8px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; --case-card-bg-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + (var(--case-card-button-height) / 2) ); --case-card-total-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) + 10px ); position: relative; width: var(--case-card-width) !important; max-width: var(--case-card-max-width) !important; height: var(--case-card-total-height) !important; min-height: var(--case-card-total-height) !important; max-height: var(--case-card-total-height) !important; margin: 0 auto 0 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; font-family: "Manrope", sans-serif; } .elementor-134 .elementor-element.elementor-element-96935ad::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--case-card-bg-height); background: #1d1e20; clip-path: polygon( 0 0, 100% 0, calc(100% - var(--case-card-slant)) 100%, 0 100% ); z-index: 0; pointer-events: none; } .elementor-134 .elementor-element.elementor-element-96935ad * { box-sizing: border-box; } /* Główny wrapper Elementora */ .elementor-134 .elementor-element.elementor-element-96935ad > .e-con-inner { position: relative; z-index: 1; width: 100% !important; max-width: none !important; height: var(--case-card-bg-height) !important; min-height: var(--case-card-bg-height) !important; max-height: var(--case-card-bg-height) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: var(--case-card-gap) !important; margin: 0 !important; padding: var(--case-card-padding-top) var(--case-card-padding-right) 0 var(--case-card-padding-left) !important; overflow: visible !important; } /* ========================================================= LEWA CZĘŚĆ — obrazek, badge, button ========================================================= */ .elementor-134 .elementor-element.elementor-element-96935ad .case-card-media { position: relative !important; z-index: 3; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: calc( var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) ) !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; flex: 0 0 var(--case-card-image-width) !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-media > .e-con-inner { position: static !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Obrazek */ .elementor-134 .elementor-element.elementor-element-96935ad .case-card-image { position: relative !important; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: var(--case-card-image-height) !important; min-height: var(--case-card-image-height) !important; max-height: var(--case-card-image-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border: 2px solid #000000 !important; } /* Badge — bez dodatkowego borderu CSS */ .elementor-134 .elementor-element.elementor-element-96935ad .case-card-badge { position: absolute !important; top: var(--case-card-badge-offset) !important; right: var(--case-card-badge-offset) !important; width: var(--case-card-badge-size) !important; min-width: var(--case-card-badge-size) !important; max-width: var(--case-card-badge-size) !important; height: var(--case-card-badge-size) !important; min-height: var(--case-card-badge-size) !important; max-height: var(--case-card-badge-size) !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-badge .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-badge img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; object-position: center center !important; border: 0 !important; border-radius: 0 !important; } /* Button — pod obrazkiem, przecina dolną krawędź czarnego pola */ .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button { position: absolute !important; top: calc( var(--case-card-image-height) + var(--case-card-button-gap) ) !important; left: calc( (var(--case-card-image-width) - var(--case-card-button-width)) / 2 ) !important; width: var(--case-card-button-width) !important; min-width: var(--case-card-button-width) !important; max-width: var(--case-card-button-width) !important; height: var(--case-card-button-height) !important; min-height: var(--case-card-button-height) !important; max-height: var(--case-card-button-height) !important; margin: 0 !important; padding: 0 !important; z-index: 6 !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button-wrapper { width: 100% !important; height: 100% !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button { width: 100% !important; height: 100% !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 8px !important; background: #f9a928 !important; border: 2px solid #000000 !important; border-radius: 2px !important; color: #000000 !important; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button-text { color: #000000 !important; font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 19px !important; text-align: center !important; white-space: nowrap !important; text-transform: none !important; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button:hover { background: #f9a928 !important; color: #000000 !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); } } /* ========================================================= PRAWA CZĘŚĆ — tekst ========================================================= */ .elementor-134 .elementor-element.elementor-element-96935ad .case-card-content { position: relative !important; z-index: 2; width: var(--case-card-content-width) !important; max-width: var(--case-card-content-width) !important; min-width: 0 !important; height: calc( var(--case-card-bg-height) - var(--case-card-padding-top) ) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; flex: 0 1 var(--case-card-content-width) !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-content > .e-con-inner { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--case-card-content-gap) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-title .elementor-heading-title { width: 100% !important; margin: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-title-size) !important; font-weight: 700 !important; line-height: var(--case-card-title-line) !important; text-align: center !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-description { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; flex: 1 1 auto !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-96935ad .case-card-description p { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-desc-size) !important; font-weight: 500 !important; line-height: var(--case-card-desc-line) !important; text-align: justify !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 32px; --case-card-padding-left: 32px; --case-card-gap: 22px; --case-card-slant: 22px; --case-card-content-width: 420px; --case-card-title-size: 18px; --case-card-title-line: 24px; --case-card-desc-size: 8.5px; --case-card-desc-line: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 24px; --case-card-padding-left: 24px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 16px; --case-card-slant: 22px; --case-card-content-width: none; --case-card-title-size: 16px; --case-card-title-line: 22px; --case-card-desc-size: 8px; --case-card-desc-line: 11px; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-content { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-padding-top: 14px; --case-card-padding-right: 16px; --case-card-padding-left: 16px; --case-card-image-width: 132px; --case-card-image-height: 106px; --case-card-badge-size: 28px; --case-card-badge-offset: -7px; --case-card-button-width: 118px; --case-card-button-height: 25px; --case-card-button-gap: 28px; --case-card-gap: 12px; --case-card-slant: 18px; --case-card-title-size: 15px; --case-card-title-line: 20px; --case-card-desc-size: 7.3px; --case-card-desc-line: 10.2px; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button-text { font-size: 12px !important; line-height: 16px !important; } }/* ========================================================= DESKTOP — powiększenie case card i przesunięcie CTA ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 34px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 230px; --case-card-image-height: 184px; --case-card-badge-size: 44px; --case-card-badge-offset: -12px; --case-card-button-width: 190px; --case-card-button-height: 44px; --case-card-button-gap: 34px; --case-card-gap: 64px; --case-card-slant: 36px; --case-card-content-width: 720px; --case-card-content-gap: 22px; --case-card-title-size: 34px; --case-card-title-line: 42px; --case-card-desc-size: 16px; --case-card-desc-line: 25px; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 72px ) !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button-text { font-size: 20px !important; line-height: 26px !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-image img { border-width: 5px !important; } }/* ========================================================= DESKTOP — większa wysokość karty, większy obrazek, więcej miejsca na opis ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 44px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 280px; --case-card-image-height: 224px; --case-card-badge-size: 48px; --case-card-badge-offset: -13px; --case-card-button-width: 210px; --case-card-button-height: 48px; --case-card-button-gap: 54px; --case-card-gap: 72px; --case-card-slant: 42px; --case-card-content-width: 760px; --case-card-content-gap: 24px; --case-card-title-size: 36px; --case-card-title-line: 46px; --case-card-desc-size: 16px; --case-card-desc-line: 26px; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-content { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-content > .e-con-inner { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-description { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-96935ad .case-card-description p { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 88px ) !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-button .elementor-button-text { font-size: 21px !important; line-height: 27px !important; } .elementor-134 .elementor-element.elementor-element-96935ad .case-card-image img { border-width: 5px !important; } } /* ========================================================= OPIS — szybsze, płynniejsze zmniejszanie przy zwężaniu ekranu Dotyczy tylko opisu, nie nagłówka. ========================================================= */ /* Desktop / laptop */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-desc-size: clamp(16px, 1vw, 22px); --case-card-desc-line: clamp(17px, 1.35vw, 25px); } } /* Tablet */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-desc-size: clamp(9px, 1.15vw, 11px); --case-card-desc-line: clamp(10px, 1.4vw, 14px); } } /* Telefon */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-desc-size: clamp(7px, 1.8vw, 8px); --case-card-desc-line: clamp(9.5px, 2.4vw, 11px); } } /* Mały telefon */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-96935ad { --case-card-desc-size: clamp(6.6px, 1.9vw, 7.3px); --case-card-desc-line: clamp(9px, 2.55vw, 10.2px); } }/* ========================================================= CASE CARD — WERSJA ODWRÓCONA Klasa na głównym kontenerze: case-card case-card-reverse ========================================================= */ .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse { margin-left: auto !important; margin-right: 0 !important; } /* Odwrócony skos — teraz skos jest po lewej stronie */ .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse::before { clip-path: polygon( var(--case-card-slant) 0, 100% 0, 100% 100%, 0 100% ) !important; } /* Odwrócenie kolejności: tekst po lewej, obrazek po prawej */ .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Przy odwróconym skosie dajemy więcej oddechu po lewej stronie */ .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse { --case-card-padding-left: 96px; --case-card-padding-right: 78px; } /* Tekst w wersji odwróconej wyrównany do lewej */ .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-title .elementor-heading-title { text-align: left !important; } .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-description p { text-align: justify !important; } /* Badge przechodzi na lewy górny róg obrazka */ .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-badge { left: var(--case-card-badge-offset) !important; right: auto !important; } /* Button pod obrazkiem — lustrzane przesunięcie względem normalnej karty */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) - 88px ) !important; } } /* Tablet */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse { --case-card-padding-left: 48px; --case-card-padding-right: 32px; } .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) - 32px ) !important; } } /* Telefon */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse { --case-card-padding-left: 24px; --case-card-padding-right: 24px; } .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-button { left: calc( (var(--case-card-image-width) - var(--case-card-button-width)) / 2 ) !important; } .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse .case-card-title .elementor-heading-title { text-align: center !important; } } /* Mały telefon */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-96935ad.case-card-reverse { --case-card-padding-left: 16px; --case-card-padding-right: 16px; } }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e452773 */.elementor-134 .elementor-element.elementor-element-e452773 { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-badge-size: 32px; --case-card-badge-offset: -8px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; --case-card-bg-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + (var(--case-card-button-height) / 2) ); --case-card-total-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) + 10px ); position: relative; width: var(--case-card-width) !important; max-width: var(--case-card-max-width) !important; height: var(--case-card-total-height) !important; min-height: var(--case-card-total-height) !important; max-height: var(--case-card-total-height) !important; margin: 0 auto 0 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; font-family: "Manrope", sans-serif; } .elementor-134 .elementor-element.elementor-element-e452773::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--case-card-bg-height); background: #1d1e20; clip-path: polygon( 0 0, 100% 0, calc(100% - var(--case-card-slant)) 100%, 0 100% ); z-index: 0; pointer-events: none; } .elementor-134 .elementor-element.elementor-element-e452773 * { box-sizing: border-box; } /* Główny wrapper Elementora */ .elementor-134 .elementor-element.elementor-element-e452773 > .e-con-inner { position: relative; z-index: 1; width: 100% !important; max-width: none !important; height: var(--case-card-bg-height) !important; min-height: var(--case-card-bg-height) !important; max-height: var(--case-card-bg-height) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: var(--case-card-gap) !important; margin: 0 !important; padding: var(--case-card-padding-top) var(--case-card-padding-right) 0 var(--case-card-padding-left) !important; overflow: visible !important; } /* ========================================================= LEWA CZĘŚĆ — obrazek, badge, button ========================================================= */ .elementor-134 .elementor-element.elementor-element-e452773 .case-card-media { position: relative !important; z-index: 3; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: calc( var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) ) !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; flex: 0 0 var(--case-card-image-width) !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-media > .e-con-inner { position: static !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Obrazek */ .elementor-134 .elementor-element.elementor-element-e452773 .case-card-image { position: relative !important; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: var(--case-card-image-height) !important; min-height: var(--case-card-image-height) !important; max-height: var(--case-card-image-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border: 2px solid #000000 !important; } /* Badge — bez dodatkowego borderu CSS */ .elementor-134 .elementor-element.elementor-element-e452773 .case-card-badge { position: absolute !important; top: var(--case-card-badge-offset) !important; right: var(--case-card-badge-offset) !important; width: var(--case-card-badge-size) !important; min-width: var(--case-card-badge-size) !important; max-width: var(--case-card-badge-size) !important; height: var(--case-card-badge-size) !important; min-height: var(--case-card-badge-size) !important; max-height: var(--case-card-badge-size) !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-badge .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-badge img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; object-position: center center !important; border: 0 !important; border-radius: 0 !important; } /* Button — pod obrazkiem, przecina dolną krawędź czarnego pola */ .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button { position: absolute !important; top: calc( var(--case-card-image-height) + var(--case-card-button-gap) ) !important; left: calc( (var(--case-card-image-width) - var(--case-card-button-width)) / 2 ) !important; width: var(--case-card-button-width) !important; min-width: var(--case-card-button-width) !important; max-width: var(--case-card-button-width) !important; height: var(--case-card-button-height) !important; min-height: var(--case-card-button-height) !important; max-height: var(--case-card-button-height) !important; margin: 0 !important; padding: 0 !important; z-index: 6 !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-wrapper { width: 100% !important; height: 100% !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button { width: 100% !important; height: 100% !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 8px !important; background: #f9a928 !important; border: 2px solid #000000 !important; border-radius: 2px !important; color: #000000 !important; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-text { color: #000000 !important; font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 19px !important; text-align: center !important; white-space: nowrap !important; text-transform: none !important; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button:hover { background: #f9a928 !important; color: #000000 !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); } } /* ========================================================= PRAWA CZĘŚĆ — tekst ========================================================= */ .elementor-134 .elementor-element.elementor-element-e452773 .case-card-content { position: relative !important; z-index: 2; width: var(--case-card-content-width) !important; max-width: var(--case-card-content-width) !important; min-width: 0 !important; height: calc( var(--case-card-bg-height) - var(--case-card-padding-top) ) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; flex: 0 1 var(--case-card-content-width) !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-content > .e-con-inner { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--case-card-content-gap) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-title .elementor-heading-title { width: 100% !important; margin: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-title-size) !important; font-weight: 700 !important; line-height: var(--case-card-title-line) !important; text-align: center !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-description { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; flex: 1 1 auto !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-e452773 .case-card-description p { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-desc-size) !important; font-weight: 500 !important; line-height: var(--case-card-desc-line) !important; text-align: justify !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 32px; --case-card-padding-left: 32px; --case-card-gap: 22px; --case-card-slant: 22px; --case-card-content-width: 420px; --case-card-title-size: 18px; --case-card-title-line: 24px; --case-card-desc-size: 8.5px; --case-card-desc-line: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 24px; --case-card-padding-left: 24px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 16px; --case-card-slant: 22px; --case-card-content-width: none; --case-card-title-size: 16px; --case-card-title-line: 22px; --case-card-desc-size: 8px; --case-card-desc-line: 11px; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-content { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-padding-top: 14px; --case-card-padding-right: 16px; --case-card-padding-left: 16px; --case-card-image-width: 132px; --case-card-image-height: 106px; --case-card-badge-size: 28px; --case-card-badge-offset: -7px; --case-card-button-width: 118px; --case-card-button-height: 25px; --case-card-button-gap: 28px; --case-card-gap: 12px; --case-card-slant: 18px; --case-card-title-size: 15px; --case-card-title-line: 20px; --case-card-desc-size: 7.3px; --case-card-desc-line: 10.2px; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-text { font-size: 12px !important; line-height: 16px !important; } }/* ========================================================= DESKTOP — powiększenie case card i przesunięcie CTA ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 34px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 230px; --case-card-image-height: 184px; --case-card-badge-size: 44px; --case-card-badge-offset: -12px; --case-card-button-width: 190px; --case-card-button-height: 44px; --case-card-button-gap: 34px; --case-card-gap: 64px; --case-card-slant: 36px; --case-card-content-width: 720px; --case-card-content-gap: 22px; --case-card-title-size: 34px; --case-card-title-line: 42px; --case-card-desc-size: 16px; --case-card-desc-line: 25px; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 72px ) !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-text { font-size: 20px !important; line-height: 26px !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-image img { border-width: 5px !important; } }/* ========================================================= DESKTOP — większa wysokość karty, większy obrazek, więcej miejsca na opis ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 44px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 280px; --case-card-image-height: 224px; --case-card-badge-size: 48px; --case-card-badge-offset: -13px; --case-card-button-width: 210px; --case-card-button-height: 48px; --case-card-button-gap: 54px; --case-card-gap: 72px; --case-card-slant: 42px; --case-card-content-width: 760px; --case-card-content-gap: 24px; --case-card-title-size: 36px; --case-card-title-line: 46px; --case-card-desc-size: 16px; --case-card-desc-line: 26px; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-content { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-content > .e-con-inner { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-description { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-e452773 .case-card-description p { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 88px ) !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-text { font-size: 21px !important; line-height: 27px !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-image img { border-width: 5px !important; } } /* ========================================================= OPIS — szybsze, płynniejsze zmniejszanie przy zwężaniu ekranu Dotyczy tylko opisu, nie nagłówka. ========================================================= */ /* Desktop / laptop */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-desc-size: clamp(16px, 1vw, 22px); --case-card-desc-line: clamp(17px, 1.35vw, 25px); } } /* Tablet */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-desc-size: clamp(9px, 1.15vw, 11px); --case-card-desc-line: clamp(10px, 1.4vw, 14px); } } /* Telefon */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-desc-size: clamp(7px, 1.8vw, 8px); --case-card-desc-line: clamp(9.5px, 2.4vw, 11px); } } /* Mały telefon */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-e452773 { --case-card-desc-size: clamp(6.6px, 1.9vw, 7.3px); --case-card-desc-line: clamp(9px, 2.55vw, 10.2px); } } /* Ikona w przycisku case-card */ .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-content-wrapper { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .elementor-134 .elementor-element.elementor-element-e452773 .case-card-button .elementor-button-icon svg { width: 1.2em !important; height: 1.2em !important; fill: currentColor !important; }/* End custom CSS */ /* Start custom CSS for container, class: .elementor-element-e77ed96 */.elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-badge-size: 32px; --case-card-badge-offset: -8px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; --case-card-bg-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + (var(--case-card-button-height) / 2) ); --case-card-total-height: calc( var(--case-card-padding-top) + var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) + 10px ); position: relative; width: var(--case-card-width) !important; max-width: var(--case-card-max-width) !important; height: var(--case-card-total-height) !important; min-height: var(--case-card-total-height) !important; max-height: var(--case-card-total-height) !important; margin: 0 auto 0 0 !important; padding: 0 !important; background: transparent !important; overflow: visible !important; font-family: "Manrope", sans-serif; } .elementor-134 .elementor-element.elementor-element-e77ed96::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: var(--case-card-bg-height); background: #1d1e20; clip-path: polygon( 0 0, 100% 0, calc(100% - var(--case-card-slant)) 100%, 0 100% ); z-index: 0; pointer-events: none; } .elementor-134 .elementor-element.elementor-element-e77ed96 * { box-sizing: border-box; } /* Główny wrapper Elementora */ .elementor-134 .elementor-element.elementor-element-e77ed96 > .e-con-inner { position: relative; z-index: 1; width: 100% !important; max-width: none !important; height: var(--case-card-bg-height) !important; min-height: var(--case-card-bg-height) !important; max-height: var(--case-card-bg-height) !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: flex-start !important; gap: var(--case-card-gap) !important; margin: 0 !important; padding: var(--case-card-padding-top) var(--case-card-padding-right) 0 var(--case-card-padding-left) !important; overflow: visible !important; } /* ========================================================= LEWA CZĘŚĆ — obrazek, badge, button ========================================================= */ .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-media { position: relative !important; z-index: 3; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: calc( var(--case-card-image-height) + var(--case-card-button-gap) + var(--case-card-button-height) ) !important; min-height: 0 !important; max-height: none !important; display: block !important; margin: 0 !important; padding: 0 !important; flex: 0 0 var(--case-card-image-width) !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-media > .e-con-inner { position: static !important; width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: block !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* Obrazek */ .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-image { position: relative !important; width: var(--case-card-image-width) !important; min-width: var(--case-card-image-width) !important; max-width: var(--case-card-image-width) !important; height: var(--case-card-image-height) !important; min-height: var(--case-card-image-height) !important; max-height: var(--case-card-image-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-image .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-image img { width: 100% !important; height: 100% !important; display: block !important; object-fit: cover !important; object-position: center center !important; border: 2px solid #000000 !important; } /* Badge — bez dodatkowego borderu CSS */ .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-badge { position: absolute !important; top: var(--case-card-badge-offset) !important; right: var(--case-card-badge-offset) !important; width: var(--case-card-badge-size) !important; min-width: var(--case-card-badge-size) !important; max-width: var(--case-card-badge-size) !important; height: var(--case-card-badge-size) !important; min-height: var(--case-card-badge-size) !important; max-height: var(--case-card-badge-size) !important; margin: 0 !important; padding: 0 !important; z-index: 5 !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-badge .elementor-widget-container { width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-badge img { width: 100% !important; height: 100% !important; display: block !important; object-fit: contain !important; object-position: center center !important; border: 0 !important; border-radius: 0 !important; } /* Button — pod obrazkiem, przecina dolną krawędź czarnego pola */ .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button { position: absolute !important; top: calc( var(--case-card-image-height) + var(--case-card-button-gap) ) !important; left: calc( (var(--case-card-image-width) - var(--case-card-button-width)) / 2 ) !important; width: var(--case-card-button-width) !important; min-width: var(--case-card-button-width) !important; max-width: var(--case-card-button-width) !important; height: var(--case-card-button-height) !important; min-height: var(--case-card-button-height) !important; max-height: var(--case-card-button-height) !important; margin: 0 !important; padding: 0 !important; z-index: 6 !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-wrapper { width: 100% !important; height: 100% !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button { width: 100% !important; height: 100% !important; min-height: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 4px 8px !important; background: #f9a928 !important; border: 2px solid #000000 !important; border-radius: 2px !important; color: #000000 !important; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-text { color: #000000 !important; font-family: "Manrope", sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 19px !important; text-align: center !important; white-space: nowrap !important; text-transform: none !important; } @media (hover: hover) and (pointer: fine) { .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button:hover { background: #f9a928 !important; color: #000000 !important; transform: translateY(-1px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); } } /* ========================================================= PRAWA CZĘŚĆ — tekst ========================================================= */ .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-content { position: relative !important; z-index: 2; width: var(--case-card-content-width) !important; max-width: var(--case-card-content-width) !important; min-width: 0 !important; height: calc( var(--case-card-bg-height) - var(--case-card-padding-top) ) !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; flex: 0 1 var(--case-card-content-width) !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-content > .e-con-inner { width: 100% !important; max-width: none !important; height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--case-card-content-gap) !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-title { width: 100% !important; margin: 0 !important; padding: 0 !important; flex: 0 0 auto !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-title .elementor-heading-title { width: 100% !important; margin: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-title-size) !important; font-weight: 700 !important; line-height: var(--case-card-title-line) !important; text-align: center !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-description { width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; flex: 1 1 auto !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-description p { margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: "Manrope", sans-serif !important; font-size: var(--case-card-desc-size) !important; font-weight: 500 !important; line-height: var(--case-card-desc-line) !important; text-align: justify !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-width: 85%; --case-card-max-width: 1120px; --case-card-padding-top: 16px; --case-card-padding-right: 48px; --case-card-padding-left: 48px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 28px; --case-card-slant: 22px; --case-card-content-width: 520px; --case-card-content-gap: 12px; --case-card-title-size: 20px; --case-card-title-line: 26px; --case-card-desc-size: 9px; --case-card-desc-line: 13px; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 32px; --case-card-padding-left: 32px; --case-card-gap: 22px; --case-card-slant: 22px; --case-card-content-width: 420px; --case-card-title-size: 18px; --case-card-title-line: 24px; --case-card-desc-size: 8.5px; --case-card-desc-line: 12px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-width: 100%; --case-card-max-width: none; --case-card-padding-top: 16px; --case-card-padding-right: 24px; --case-card-padding-left: 24px; --case-card-image-width: 150px; --case-card-image-height: 120px; --case-card-button-width: 133px; --case-card-button-height: 27px; --case-card-button-gap: 32px; --case-card-gap: 16px; --case-card-slant: 22px; --case-card-content-width: none; --case-card-title-size: 16px; --case-card-title-line: 22px; --case-card-desc-size: 8px; --case-card-desc-line: 11px; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-content { width: auto !important; max-width: none !important; flex: 1 1 auto !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-padding-top: 14px; --case-card-padding-right: 16px; --case-card-padding-left: 16px; --case-card-image-width: 132px; --case-card-image-height: 106px; --case-card-badge-size: 28px; --case-card-badge-offset: -7px; --case-card-button-width: 118px; --case-card-button-height: 25px; --case-card-button-gap: 28px; --case-card-gap: 12px; --case-card-slant: 18px; --case-card-title-size: 15px; --case-card-title-line: 20px; --case-card-desc-size: 7.3px; --case-card-desc-line: 10.2px; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-text { font-size: 12px !important; line-height: 16px !important; } }/* ========================================================= DESKTOP — powiększenie case card i przesunięcie CTA ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 34px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 230px; --case-card-image-height: 184px; --case-card-badge-size: 44px; --case-card-badge-offset: -12px; --case-card-button-width: 190px; --case-card-button-height: 44px; --case-card-button-gap: 34px; --case-card-gap: 64px; --case-card-slant: 36px; --case-card-content-width: 720px; --case-card-content-gap: 22px; --case-card-title-size: 34px; --case-card-title-line: 42px; --case-card-desc-size: 16px; --case-card-desc-line: 25px; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 72px ) !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-text { font-size: 20px !important; line-height: 26px !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-image img { border-width: 5px !important; } }/* ========================================================= DESKTOP — większa wysokość karty, większy obrazek, więcej miejsca na opis ========================================================= */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-width: 88%; --case-card-max-width: 1360px; --case-card-padding-top: 44px; --case-card-padding-left: 78px; --case-card-padding-right: 96px; --case-card-image-width: 280px; --case-card-image-height: 224px; --case-card-badge-size: 48px; --case-card-badge-offset: -13px; --case-card-button-width: 210px; --case-card-button-height: 48px; --case-card-button-gap: 54px; --case-card-gap: 72px; --case-card-slant: 42px; --case-card-content-width: 760px; --case-card-content-gap: 24px; --case-card-title-size: 36px; --case-card-title-line: 46px; --case-card-desc-size: 16px; --case-card-desc-line: 26px; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-content { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-content > .e-con-inner { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-description { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-description p { overflow: visible !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) + 88px ) !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button { border-width: 5px !important; border-radius: 4px !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-text { font-size: 21px !important; line-height: 27px !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-image img { border-width: 5px !important; } } /* ========================================================= OPIS — szybsze, płynniejsze zmniejszanie przy zwężaniu ekranu Dotyczy tylko opisu, nie nagłówka. ========================================================= */ /* Desktop / laptop */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-desc-size: clamp(16px, 1vw, 22px); --case-card-desc-line: clamp(17px, 1.35vw, 25px); } } /* Tablet */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-desc-size: clamp(9px, 1.15vw, 11px); --case-card-desc-line: clamp(10px, 1.4vw, 14px); } } /* Telefon */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-desc-size: clamp(7px, 1.8vw, 8px); --case-card-desc-line: clamp(9.5px, 2.4vw, 11px); } } /* Mały telefon */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-e77ed96 { --case-card-desc-size: clamp(6.6px, 1.9vw, 7.3px); --case-card-desc-line: clamp(9px, 2.55vw, 10.2px); } }/* ========================================================= CASE CARD — WERSJA ODWRÓCONA Klasa na głównym kontenerze: case-card case-card-reverse ========================================================= */ .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse { margin-left: auto !important; margin-right: 0 !important; } /* Odwrócony skos — teraz skos jest po lewej stronie */ .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse::before { clip-path: polygon( var(--case-card-slant) 0, 100% 0, 100% 100%, 0 100% ) !important; } /* Odwrócenie kolejności: tekst po lewej, obrazek po prawej */ .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse > .e-con-inner { flex-direction: row-reverse !important; } /* Przy odwróconym skosie dajemy więcej oddechu po lewej stronie */ .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse { --case-card-padding-left: 96px; --case-card-padding-right: 78px; } /* Tekst w wersji odwróconej wyrównany do lewej */ .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-title .elementor-heading-title { text-align: left !important; } .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-description .elementor-widget-container, .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-description p { text-align: justify !important; } /* Badge przechodzi na lewy górny róg obrazka */ .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-badge { left: var(--case-card-badge-offset) !important; right: auto !important; } /* Button pod obrazkiem — lustrzane przesunięcie względem normalnej karty */ @media (min-width: 1025px) { .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) - 88px ) !important; } } /* Tablet */ @media (max-width: 1024px) { .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse { --case-card-padding-left: 48px; --case-card-padding-right: 32px; } .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-button { left: calc( ((var(--case-card-image-width) - var(--case-card-button-width)) / 2) - 32px ) !important; } } /* Telefon */ @media (max-width: 767px) { .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse { --case-card-padding-left: 24px; --case-card-padding-right: 24px; } .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-button { left: calc( (var(--case-card-image-width) - var(--case-card-button-width)) / 2 ) !important; } .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse .case-card-title .elementor-heading-title { text-align: center !important; } } /* Mały telefon */ @media (max-width: 480px) { .elementor-134 .elementor-element.elementor-element-e77ed96.case-card-reverse { --case-card-padding-left: 16px; --case-card-padding-right: 16px; } } /* Ikona w przycisku case-card */ .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-content-wrapper { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; } .elementor-134 .elementor-element.elementor-element-e77ed96 .case-card-button .elementor-button-icon svg { width: 1.2em !important; height: 1.2em !important; fill: currentColor !important; }/* End custom CSS */