/**
Theme Name: Noxiy Child
Author: ThemeOri
Author URI: https://themeforest.net/user/themeori/
Description: Child theme for the Noxiy theme.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: noxiy-child
Template: noxiy
*/

/* ==========================================================================
   TIDEON Brand Book Overrides
   Achromatyczna paleta + Questrial (zamiennik Helvetica Neue)
   ========================================================================== */

/* ---------- 1. CSS Variables — Kolory & Typografia ---------- */

:root {
    /* Typografia — Questrial jako bezplatny zamiennik Helvetica Neue */
    --body-font: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --heading-font: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    /* Paleta achromatyczna wg ksiegi znaku */
    --primary-color-1: #000000;
    --primary-color-2: #000000;
    --primary-color-3: #000000;
    --primary-color-4: #000000;

    --bg-heading-color: #000000;
    --text-heading-color: #000000;
    --btn-heading-color: #000000;
    --body-color: #444444;

    --dark-one: #000000;
    --dark-two: #111111;

    --color-1: #333333;
    --color-9: #0a0a0a;
    --color-10: #1a1a1a;
    --color-11: #333333;
    --color-7: #f5f5f5;
    --color-12: #cccccc;
    --color-13: #f0f0f0;
    --color-24: #333333;

    --btn-cut: 12px;
}

/* ---------- 2. Typografia — grubosci wg ksiegi ---------- */
/* !important wymagany bo CSF generuje inline font-family */

body {
    font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 300;
    letter-spacing: -0.01em;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Questrial', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-weight: 400;
    letter-spacing: -0.02em;
}

h1 {
    font-weight: 400;
}

/* ---------- 3. Przyciski — achromatyczne ---------- */

.noxiy__btn,
.btn-one {
    background: #000;
    color: #fff;
    border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: 14px;
}

.noxiy__btn::after,
.noxiy__btn::before,
.btn-one::after,
.btn-one::before {
    background: #333 !important;
    border-radius: 0 !important;
}

.noxiy__btn:hover,
.btn-one:hover {
    color: #fff;
}

.btn-two {
    background: #000;
    border-radius: 0;
}

.btn-two::after,
.btn-two::before {
    background: #333 !important;
    border-radius: 0 !important;
}

.btn-two:hover {
    color: #fff;
}

.btn-two:hover::before {
    border-radius: 0 !important;
}

.btn-two:hover::after {
    border-radius: 0 !important;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    background: #000;
    border-radius: 0;
}

/* ---------- Ścięte górne narożniki ---------- */

.noxiy__btn,
.btn-one,
.btn-two,
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    clip-path: polygon(
        var(--btn-cut) 0,
        100% 0,
        100% calc(100% - var(--btn-cut)),
        calc(100% - var(--btn-cut)) 100%,
        0 100%,
        0 var(--btn-cut)
    );
}

.header__area-menubar-right-search-box button {
    clip-path: none;
}

/* ---------- 4. Subtitles — achromatyczne ---------- */

.subtitle-one,
.subtitle-two,
.subtitle-three,
.subtitle-four {
    color: #000 !important;
}

.subtitle-one::before,
.subtitle-two::before,
.subtitle-three::before,
.subtitle-four::before {
    background-image: none !important;
    background: #000 !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50%;
    top: 9px !important;
    left: 8px !important;
}

/* ---------- 5. Header / Menu ---------- */

.header__area-menubar-center-menu ul li:hover > a {
    color: #000;
}

.header__area-menubar-center-menu ul li .sub-menu {
    border-top-color: #000;
}

.header__area-menubar-center-menu ul li .sub-menu li:hover > a {
    color: #000;
}

.header__area-menubar-center-menu ul li .sub-menu li > a::after {
    background: #000;
}

.header__area-menubar-center-menu ul li.menu-item-has-children:hover > a::before {
    color: #000;
}

.header__area-menubar-right-contact-icon i {
    color: #000;
}

.header__area-menubar-right-contact-icon i::after {
    background: #000;
}

.header__area-menubar-right-contact-info h6 a:hover {
    color: #000;
}

.header__area-menubar-right-search-box button {
    color: #000;
}

/* Fix: bridge the gap between menu item and submenu dropdown */
.header__area-menubar-center-menu ul li.menu-item-has-children::before {
    content: '';
    position: absolute;
    left: -25px;
    top: 100%;
    width: calc(100% + 50px);
    min-width: 240px;
    height: 40px;
}

.header__area-menubar-center-menu ul li .sub-menu li.menu-item-has-children::before {
    display: none;
}

/* ---------- 6. Sidebar popup ---------- */

.header__area-menubar-right-sidebar-popup .sidebar-close-btn i {
    background: #000;
}

.header__area-menubar-right-sidebar-popup-contact-item-icon i {
    color: #000;
}

.header__area-menubar-right-sidebar-popup-contact-item-content h6 a:hover {
    color: #000;
}

.header__area-menubar-right-sidebar-popup-social ul li a i:hover {
    background: #000;
}

/* ---------- 7. Responsive menu ---------- */

.menu__bar-popup-close i {
    background: #000;
}

.menu__bar-popup-left-social ul li a:hover {
    color: #000 !important;
}

.mean-container .mean-nav ul li a:hover {
    color: #ccc !important;
}

.mean-container .mean-nav ul li a.mean-expand:hover {
    background: #333;
}

/* ---------- 8. Scroll to top ---------- */

.scroll-up::after {
    color: #000;
}

.scroll-up svg.scroll-circle path {
    stroke: #000;
}

/* ---------- 9. Preloader ---------- */

.theme-loader .spinner {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-bounce {
    display: none;
}

.spinner-signet {
    width: 120px;
    height: 120px;
    animation: signet-heartbeat 1s ease-in-out 3;
    animation-delay: 500ms;
}

@keyframes signet-heartbeat {
    0%   { transform: scale(1); }
    15%  { transform: scale(1.12); }
    30%  { transform: scale(1); }
    45%  { transform: scale(1.18); }
    60%  { transform: scale(1); }
    100% { transform: scale(1); }
}

@keyframes preloader-mask-wipe {
    from {
        -webkit-mask-position: 100% 100%;
        mask-position: 100% 100%;
    }
    to {
        -webkit-mask-position: 0% 0%;
        mask-position: 0% 0%;
    }
}

@keyframes preloader-spinner-fade {
    0%   { opacity: 1; }
    40%  { opacity: 0; }
    100% { opacity: 0; }
}

.theme-loader.wipe-out {
    -webkit-mask-image: linear-gradient(to bottom right, transparent 0%, transparent 45%, black 55%, black 100%);
    mask-image: linear-gradient(to bottom right, transparent 0%, transparent 45%, black 55%, black 100%);
    -webkit-mask-size: 300% 300%;
    mask-size: 300% 300%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    animation: preloader-mask-wipe 900ms ease-in-out forwards;
}

.theme-loader.wipe-out .spinner {
    animation: preloader-spinner-fade 450ms ease-out forwards;
}

.preloader-done .theme-loader {
    display: none !important;
}

/* ---------- 10. Banner ---------- */

.banner__one-content > span,
.banner__two-content > span,
.banner__three-content > span,
.banner__four-content > span {
    color: #000;
    --frame-color: rgba(0, 0, 0, 0.3);
    background-color: transparent;
    background-image:
        linear-gradient(var(--frame-color), var(--frame-color)),
        linear-gradient(var(--frame-color), var(--frame-color)),
        linear-gradient(var(--frame-color), var(--frame-color)),
        linear-gradient(var(--frame-color), var(--frame-color)),
        linear-gradient(135deg, transparent calc(50% - 0.5px), var(--frame-color) calc(50% - 0.5px), var(--frame-color) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
        linear-gradient(135deg, transparent calc(50% - 0.5px), var(--frame-color) calc(50% - 0.5px), var(--frame-color) calc(50% + 0.5px), transparent calc(50% + 0.5px));
    background-size:
        calc(100% - 10px) 1px,
        calc(100% - 10px) 1px,
        1px calc(100% - 10px),
        1px calc(100% - 10px),
        10px 10px,
        10px 10px;
    background-position:
        left bottom,
        right top,
        left bottom,
        right top,
        left top,
        right bottom;
    background-repeat: no-repeat;
}

.banner__one-content > span::before,
.banner__two-content > span::before,
.banner__three-content > span::before,
.banner__four-content > span::before {
    background: #000;
}

.banner__one-content > span::after,
.banner__two-content > span::after,
.banner__three-content > span::after,
.banner__four-content > span::after {
    display: none;
}

.banner__one-content-button-video::after,
.banner__one-content-button-video::before {
    background: #000 !important;
}

/* Replace play icon with phone icon in banner one */
.banner__one-content-button-video .fa-play::before {
    content: "\f095";
}

/* ---------- 11. Footer (ciemne tlo — akcenty musza byc jasne) ---------- */

.footer__top-area {
    background: #000;
}

.footer__top-item-info-icon i {
    border-color: #444;
}

/* Footer links hover — bialy na ciemnym tle */
.footer__one-widget-menu ul li a:hover,
.footer__one-widget-menu.two ul li a:hover,
.footer__one-widget-menu.three ul li a:hover,
.footer__one-widget-menu.four ul li a:hover {
    color: #fff !important;
}

.footer__one-widget-menu ul li a::before,
.footer__one-widget-menu.two ul li a::before,
.footer__one-widget-menu.three ul li a::before,
.footer__one-widget-menu.four ul li a::before {
    color: #fff !important;
}

.footer__one-widget-menu.two ul li a:hover::before,
.footer__one-widget-menu.three ul li a:hover::before,
.footer__one-widget-menu.four ul li a:hover::before {
    color: #fff !important;
}

/* Copyright links — widoczne na ciemnym tle */
.copyright__one p a,
.copyright__two p a,
.copyright__three p a,
.copyright__four p a {
    color: #fff !important;
}

/* Footer social hover */
.footer__one-widget-social ul li a:hover i,
.footer__two-widget-social ul li a:hover i,
.footer__three-widget-social ul li a:hover i,
.footer__four-widget-social ul li a:hover i {
    color: #fff;
}

/* Footer widget headings */
.footer__one-widget-about-social ul li a:hover {
    color: #ccc;
}

/* ---------- 12. Contact info labels ---------- */

.contact__two-info-item h6 {
    display: block;
    min-width: 120px;
    text-align: right;
    white-space: nowrap;
}

/* ---------- 13. Form focus states ---------- */

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus {
    border-color: #000;
}

/* ---------- 14. Simple btn ---------- */

.simple-btn:hover,
.simple-btn:focus {
    color: #000;
}

/* ---------- 15. Links ---------- */

.noxiy-core a:hover {
    color: #000;
}

/* ---------- 16. Brand book: neutralizacja akcentów kolorystycznych ---------- */

.services__one-item-content p {
    border-color: var(--color-1) !important;
}

/* ---------- Services tiles — ścięte narożniki (lewy górny + prawy dolny) ---------- */

.services__one-item {
    border-radius: 0 !important;
    clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}

.services__one-item::before {
    border-radius: 0 !important;
}

.services__one-item-image > img {
    border-radius: 0 !important;
}

/* ---------- Testimonial tiles — ścięte narożniki (lewy górny + prawy dolny) ---------- */

.testimonial__two-item {
    border-radius: 0 !important;
    overflow: visible;
    clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}

/* ---------- Kolumny pod sliderem — ścięte narożniki ---------- */

.top-section-under-slider > .elementor-container {
    clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}

.top-section-under-slider .elementor-element-populated,
.top-section-under-slider .elementor-background-overlay {
    border-radius: 0 !important;
}

.benefits__area-right-bottom-contact-icon {
    background: var(--color-13) !important;
    color: #000 !important;
}

/* ---------- 17. Fix: testimonial slider on mobile ---------- */

@media (max-width: 767px) {
    .testimonial__slider {
        height: auto;
    }

    .testimonial__two-item {
        overflow: visible;
    }

    .testimonial__two-left {
        margin-left: 0;
    }

    .testimonial__two-left .testimonial-pagination {
        position: static;
        display: flex;
        justify-content: center;
        transform: none;
        margin-top: 15px;
    }

    .testimonial__two-left .testimonial-pagination span {
        width: 30px;
        height: 6px;
    }
}

/* ---------- 18. Video Background ---------- */

.banner-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

.banner-video-bg video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.banner-video-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    z-index: 2;
    pointer-events: none;
}

.banner__two-bg {
    position: relative;
    overflow: hidden;
}

.banner__one-content,
.banner__two-content,
.banner__three-content {
    position: relative;
    z-index: 2;
}

:has(> .banner-video-bg) .banner__one-content,
:has(> .banner-video-bg) .banner__two-content,
:has(> .banner-video-bg) .banner__three-content {
    text-align: center;
    padding-top: 100px;
}

:has(> .banner-video-bg) .banner__one-content p,
:has(> .banner-video-bg) .banner__two-content p,
:has(> .banner-video-bg) .banner__three-content p {
    margin-left: auto;
    margin-right: auto;
}

:has(> .banner-video-bg) .banner__one-content-button,
:has(> .banner-video-bg) .banner__two-content-button,
:has(> .banner-video-bg) .banner__three-content-button {
    justify-content: center;
}

.banner__two-right {
    position: relative;
    z-index: 2;
}

/* Text styling when video background is present */
:has(> .banner-video-bg) .banner__one-content > span,
:has(> .banner-video-bg) .banner__two-content > span,
:has(> .banner-video-bg) .banner__three-content > span {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 3px;
    text-transform: uppercase;
    padding: 10px 25px 10px 40px;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
    --frame-color: rgba(255, 255, 255, 0.45);
}

:has(> .banner-video-bg) .banner__one-content > span::before,
:has(> .banner-video-bg) .banner__two-content > span::before,
:has(> .banner-video-bg) .banner__three-content > span::before {
    background: #fff;
    top: 19px;
    width: 8px;
    height: 8px;
}

:has(> .banner-video-bg) .banner__one-content > span::after,
:has(> .banner-video-bg) .banner__two-content > span::after,
:has(> .banner-video-bg) .banner__three-content > span::after {
    display: none;
}

:has(> .banner-video-bg) .banner__two-content h1,
:has(> .banner-video-bg) .banner__one-content h1,
:has(> .banner-video-bg) .banner__three-content h1 {
    color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

:has(> .banner-video-bg) .banner__two-content p,
:has(> .banner-video-bg) .banner__one-content p,
:has(> .banner-video-bg) .banner__three-content p {
    color: rgba(255, 255, 255, 0.9);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

:has(> .banner-video-bg) .btn-one,
:has(> .banner-video-bg) .btn-two {
    border-color: #fff;
}

@media (max-width: 767px) {
    .banner-video-bg iframe {
        display: none;
    }
}

/* ---------- 19. Sekcja "Nasze produkty" — layout 2×2 ---------- */

.nasze-produkty .elementor-widget-services_noxiy {
    width: calc(50% - 24px) !important;
    max-width: calc(50% - 24px) !important;
    margin-bottom: 20px;
}

.nasze-produkty .services__one-item-image > img {
    min-height: 280px;
    object-fit: cover;
}

.nasze-produkty .services__one-item-content {
    padding: 30px 30px 25px;
}

.nasze-produkty .services__one-item-content h4 {
    font-size: 22px;
    margin-bottom: 10px;
}

.nasze-produkty .services__one-item-content p {
    font-size: 15px;
    line-height: 1.6;
}

.nasze-produkty .services__one-item-content-icon {
    width: 70px;
    height: 70px;
    top: -45px;
}

.nasze-produkty .services__one-item {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

@media (max-width: 767px) {
    .nasze-produkty .elementor-widget-services_noxiy {
        width: 100% !important;
    }
}

/* ---------- 20. Formularz — biały przycisk Wyślij ---------- */

.hf-form .btn-one {
    background: #fff;
    color: #000;
}

.hf-form .btn-one::before,
.hf-form .btn-one::after {
    background: #d8d8d8 !important;
}

.hf-form .btn-one:hover {
    color: #000;
}

.hf-form input[type="text"],
.hf-form input[type="email"],
.hf-form textarea {
    border-radius: 0;
}

/* ---------- 21. Formularz kontaktowy — ścięte narożniki ---------- */

.elementor-70 .elementor-element-9267e2a > .elementor-element-populated,
.elementor-70 .elementor-element-9267e2a > .elementor-element-populated > .elementor-background-overlay {
    border-radius: 0 !important;
}

.elementor-70 .elementor-element-9267e2a > .elementor-element-populated {
    -webkit-clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
            clip-path: polygon(25px 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%, 0 25px);
}

/* ---------- 22. Mobile: nagłówek (niższa belka + ukryte social) ---------- */
/* W układzie hamburgera (≤1050px, próg MeanMenu) belkę zawyżały: wymuszone
   min-height: 90px na .header__area-menubar oraz martwy padding kontenera po
   ukrytym menu desktopowym. Zdejmujemy oba — belka hugguje logo (pełny rozmiar).
   Dodatkowo chowamy kolumnę z ikonami social w górnym pasku. Desktop bez zmian. */

@media (max-width: 1050px) {
    /* Główna przyczyna: .header__area-menubar ma min-height: 90px (_units.scss),
       wymuszone niezależnie od zawartości. Na mobile zdejmujemy je. */
    .header__area-menubar {
        min-height: 0;
    }
    /* pusty kontener po ukrytym menu desktopowym zostawiał 72px martwej wysokości */
    .header__area-menubar-center {
        padding: 0;
    }
    /* logo: pełny rozmiar jest za duży, więc ograniczamy wysokość (regulowane jedną liczbą) */
    .header__area-menubar-left-logo img {
        max-height: 68px;
        width: auto;
    }
    /* ukryj sekcję social w górnym pasku nagłówka — tylko mobile.
       Chowamy całą kolumnę Elementora (e91afe1), nie sam widget,
       żeby nie został pusty odstęp. Stopka (2055909) bez zmian. */
    .elementor-element-e91afe1 {
        display: none !important;
    }
}

/* ---------- 23. Mobile: nakładka menu hamburgera = wysokość ekranu ---------- */
/* .menu__bar-popup ma height:100%, co na fixed liczy się do layout-viewport
   (z obszarem pod paskiem adresu), więc nakładka jest nieco wyższa niż widoczny
   ekran telefonu i lekko się przewija. Używamy dynamicznej wysokości (dvh),
   a długie menu nadal przewija się wewnątrz .menu__bar-popup-left. */

@media (max-width: 1050px) {
    .menu__bar-popup,
    .menu__bar-popup.show {
        height: 100dvh;
        max-height: 100dvh;
    }
}

/* ---------- 24. Mobile: 3 bloki pod bannerem nie na całą szerokość ---------- */
/* Trzy kolumny icon-box (.elementor-col-33) układają się w pionie ≤767px i
   rozciągają na 100%. Ograniczamy je procentowo (px byłby szerszy niż ekran
   telefonu i nic by nie dał) i wyśrodkowujemy. Powyżej 767px bez zmian.
   Wartość szerokości do regulacji. */

@media (max-width: 767px) {
    .top-section-under-slider .elementor-column {
        max-width: 85%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ---------- 25. Mobile: "Nasze produkty" — jedna kolumna ---------- */
/* 4 karty to widgety services_noxiy (na tej stronie tylko te 4). W kontenerze
   flex Elementor pinuje je do max-width: calc(50% - gap) → 2 kolumny. Decyduje
   max-width/flex (nie width). Mocny selektor (bije specyficzność Elementora)
   wymusza pełną szerokość do ≤1024px → 1 kolumna. Desktop (>1024px) bez zmian. */

@media (max-width: 1024px) {
    .elementor-widget-wrap > .elementor-element.elementor-widget.elementor-widget-services_noxiy {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* ---------- 26. Mobile: karty services — domyślnie styl jak hover ---------- */
/* Na desktopie: białe tło + ciemny tekst, a na hover odwrotnie (czarne tło,
   biały tekst). Na mobile chcemy domyślnie stan "hover". Odtwarzamy dokładnie
   te same deklaracje co reguły :hover z motywu, ale jako stan spoczynkowy.
   Desktop (>1024px) i jego hover bez zmian. */

@media (max-width: 1024px) {
    /* czarne tło (rozwinięty overlay ::before) */
    .services__one-item::before {
        height: 100%;
    }
    /* tekst na biało */
    .services__one-item .services__one-item-content > a,
    .services__one-item .services__one-item-content p,
    .services__one-item .services__one-item-content h4 {
        color: var(--text-white);
    }
    /* linia działowa pod opisem */
    .services__one-item .services__one-item-content p {
        border-color: var(--color-11);
    }
    .services__one-item .services__one-item-content p::before {
        background: var(--text-white);
        opacity: 0.25;
    }
    /* kafelek ikony: białe tło (::after) + ciemna ikona */
    .services__one-item .services__one-item-content-icon::after {
        transform: scale(1);
    }
    .services__one-item .services__one-item-content-icon i {
        color: var(--primary-color-4);
    }
}


/* ---------- 27. "Nasze produkty" — własne ikony liniowe (SVG) ---------- */
/* Widget services_noxiy renderuje ikonę jako <i class="flaticon-..."></i> i
   przyjmuje tylko klasę fontu — SVG z wybornika Elementora tu nie przejdzie
   (upload SVG jest w Pro). Dlatego podmieniamy glyf na własny SVG przez CSS mask,
   per widget (ID Elementora). background-color: currentColor => ikona dziedziczy
   kolor motywu i stan :hover (białe -> kolor marki). Rozmiar niżej (54px),
   kontener ma 70px. Pliki źródłowe: /svg/*.svg */

/* wspólne: chowamy glyf fontu i zamieniamy <i> w kafelek maskowany SVG */
.nasze-produkty .services__one-item-content-icon i::before { content: none; }
.nasze-produkty .services__one-item-content-icon i {
  display: inline-block;
  width: 54px;
  height: 54px;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* Łodzie typu RIB */
.nasze-produkty .elementor-element-c48d5cf .services__one-item-content-icon i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M7%2034%20H45%20Q53%2034%2057%2028%20Q53%2042%2045%2044%20H15%20Q9%2043%207%2034%20Z%22%2F%3E%20%3Cpath%20d%3D%22M12%2034%20H43%20Q48%2034%2050%2030%22%2F%3E%20%3Cpath%20d%3D%22M26%2034%20V27%20Q26%2025%2028%2025%20H37%20L40%2030%20V34%20Z%22%2F%3E%20%3Cline%20x1%3D%2229%22%20y1%3D%2229.5%22%20x2%3D%2234%22%20y2%3D%2229.5%22%2F%3E%20%3Cpath%20d%3D%22M4%2051%20q5.5%20-3.4%2011%200%20t11%200%20t11%200%20t11%200%22%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M7%2034%20H45%20Q53%2034%2057%2028%20Q53%2042%2045%2044%20H15%20Q9%2043%207%2034%20Z%22%2F%3E%20%3Cpath%20d%3D%22M12%2034%20H43%20Q48%2034%2050%2030%22%2F%3E%20%3Cpath%20d%3D%22M26%2034%20V27%20Q26%2025%2028%2025%20H37%20L40%2030%20V34%20Z%22%2F%3E%20%3Cline%20x1%3D%2229%22%20y1%3D%2229.5%22%20x2%3D%2234%22%20y2%3D%2229.5%22%2F%3E%20%3Cpath%20d%3D%22M4%2051%20q5.5%20-3.4%2011%200%20t11%200%20t11%200%20t11%200%22%2F%3E%20%3C%2Fsvg%3E");
}

/* Nadmuchiwane pontony typu RIB */
.nasze-produkty .elementor-element-a9a6eec .services__one-item-content-icon i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M20%2046%20V29%20L32%2013%20L44%2029%20V46%22%2F%3E%20%3Cpath%20d%3D%22M26%2044%20V31%20L32%2021%20L38%2031%20V44%22%2F%3E%20%3Cline%20x1%3D%2220%22%20y1%3D%2246%22%20x2%3D%2226%22%20y2%3D%2244%22%2F%3E%20%3Cline%20x1%3D%2244%22%20y1%3D%2246%22%20x2%3D%2238%22%20y2%3D%2244%22%2F%3E%20%3Cline%20x1%3D%2222.6%22%20y1%3D%2233%22%20x2%3D%2226.8%22%20y2%3D%2233%22%2F%3E%20%3Cline%20x1%3D%2241.4%22%20y1%3D%2233%22%20x2%3D%2237.2%22%20y2%3D%2233%22%2F%3E%20%3Crect%20x%3D%2228%22%20y%3D%2246%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M20%2046%20V29%20L32%2013%20L44%2029%20V46%22%2F%3E%20%3Cpath%20d%3D%22M26%2044%20V31%20L32%2021%20L38%2031%20V44%22%2F%3E%20%3Cline%20x1%3D%2220%22%20y1%3D%2246%22%20x2%3D%2226%22%20y2%3D%2244%22%2F%3E%20%3Cline%20x1%3D%2244%22%20y1%3D%2246%22%20x2%3D%2238%22%20y2%3D%2244%22%2F%3E%20%3Cline%20x1%3D%2222.6%22%20y1%3D%2233%22%20x2%3D%2226.8%22%20y2%3D%2233%22%2F%3E%20%3Cline%20x1%3D%2241.4%22%20y1%3D%2233%22%20x2%3D%2237.2%22%20y2%3D%2233%22%2F%3E%20%3Crect%20x%3D%2228%22%20y%3D%2246%22%20width%3D%228%22%20height%3D%226%22%20rx%3D%221.5%22%2F%3E%20%3C%2Fsvg%3E");
}

/* Przyczepy do łodzi */
.nasze-produkty .elementor-element-6996313 .services__one-item-content-icon i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M12%2024%20H41%20Q49%2024%2053%2018%20Q49%2031%2041%2033%20H16%20Q11%2032%2012%2024%20Z%22%2F%3E%20%3Cpath%20d%3D%22M16%2024%20H39%20Q43%2024%2045%2021%22%2F%3E%20%3Cpath%20d%3D%22M27%2024%20V18%20Q27%2016%2029%2016%20H33%20L36%2021%20V24%20Z%22%2F%3E%20%3Cline%20x1%3D%229%22%20y1%3D%2241%22%20x2%3D%2251%22%20y2%3D%2241%22%2F%3E%20%3Cpath%20d%3D%22M9%2041%20L2%2045%20H7%22%2F%3E%20%3Cpath%20d%3D%22M14%2041%20a6.5%206.5%200%200%201%2013%200%22%2F%3E%20%3Cpath%20d%3D%22M34%2041%20a6.5%206.5%200%200%201%2013%200%22%2F%3E%20%3Ccircle%20cx%3D%2220.5%22%20cy%3D%2245%22%20r%3D%224.5%22%2F%3E%20%3Ccircle%20cx%3D%2240.5%22%20cy%3D%2245%22%20r%3D%224.5%22%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M12%2024%20H41%20Q49%2024%2053%2018%20Q49%2031%2041%2033%20H16%20Q11%2032%2012%2024%20Z%22%2F%3E%20%3Cpath%20d%3D%22M16%2024%20H39%20Q43%2024%2045%2021%22%2F%3E%20%3Cpath%20d%3D%22M27%2024%20V18%20Q27%2016%2029%2016%20H33%20L36%2021%20V24%20Z%22%2F%3E%20%3Cline%20x1%3D%229%22%20y1%3D%2241%22%20x2%3D%2251%22%20y2%3D%2241%22%2F%3E%20%3Cpath%20d%3D%22M9%2041%20L2%2045%20H7%22%2F%3E%20%3Cpath%20d%3D%22M14%2041%20a6.5%206.5%200%200%201%2013%200%22%2F%3E%20%3Cpath%20d%3D%22M34%2041%20a6.5%206.5%200%200%201%2013%200%22%2F%3E%20%3Ccircle%20cx%3D%2220.5%22%20cy%3D%2245%22%20r%3D%224.5%22%2F%3E%20%3Ccircle%20cx%3D%2240.5%22%20cy%3D%2245%22%20r%3D%224.5%22%2F%3E%20%3C%2Fsvg%3E");
}

/* Inne przyczepy */
.nasze-produkty .elementor-element-e62e69b .services__one-item-content-icon i {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M15%2025%20H47%20V39%20H15%20Z%22%2F%3E%20%3Cline%20x1%3D%2221.4%22%20y1%3D%2225%22%20x2%3D%2221.4%22%20y2%3D%2239%22%2F%3E%20%3Cline%20x1%3D%2227.8%22%20y1%3D%2225%22%20x2%3D%2227.8%22%20y2%3D%2239%22%2F%3E%20%3Cline%20x1%3D%2234.2%22%20y1%3D%2225%22%20x2%3D%2234.2%22%20y2%3D%2239%22%2F%3E%20%3Cline%20x1%3D%2240.6%22%20y1%3D%2225%22%20x2%3D%2240.6%22%20y2%3D%2239%22%2F%3E%20%3Cpath%20d%3D%22M15%2042%20H55%22%2F%3E%20%3Cpath%20d%3D%22M15%2042%20L15%2039%22%2F%3E%20%3Cpath%20d%3D%22M15%2042%20L6%2046%22%2F%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%2246%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2246%22%20r%3D%224%22%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3Cpath%20d%3D%22M15%2025%20H47%20V39%20H15%20Z%22%2F%3E%20%3Cline%20x1%3D%2221.4%22%20y1%3D%2225%22%20x2%3D%2221.4%22%20y2%3D%2239%22%2F%3E%20%3Cline%20x1%3D%2227.8%22%20y1%3D%2225%22%20x2%3D%2227.8%22%20y2%3D%2239%22%2F%3E%20%3Cline%20x1%3D%2234.2%22%20y1%3D%2225%22%20x2%3D%2234.2%22%20y2%3D%2239%22%2F%3E%20%3Cline%20x1%3D%2240.6%22%20y1%3D%2225%22%20x2%3D%2240.6%22%20y2%3D%2239%22%2F%3E%20%3Cpath%20d%3D%22M15%2042%20H55%22%2F%3E%20%3Cpath%20d%3D%22M15%2042%20L15%2039%22%2F%3E%20%3Cpath%20d%3D%22M15%2042%20L6%2046%22%2F%3E%20%3Ccircle%20cx%3D%2226%22%20cy%3D%2246%22%20r%3D%224%22%2F%3E%20%3Ccircle%20cx%3D%2245%22%20cy%3D%2246%22%20r%3D%224%22%2F%3E%20%3C%2Fsvg%3E");
}