:root{
--ctjl-bg: #2B6B9C !important;
--ctjl-accent: #F2E4C9 !important;
--ctjl-arrow: #74A31F !important;
--ctjl-hover-bg: #357DB3 !important;
}
.elementor-nav-menu--dropdown {
opacity: 0;
transform: translateY(-10px);
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, transform 0.35s ease;
background-color: var(--ctjl-bg);
border-radius: 8px;
padding: 6px 0;
box-shadow: 0 12px 25px rgba(0,0,0,0.3);
position: absolute !important;
z-index: 999999;
min-width: 220px;
backface-visibility: hidden;
overflow: hidden;
}
.elementor-nav-menu > li:hover > .elementor-nav-menu--dropdown {
opacity: 1;
transform: translateY(0);
visibility: visible;
pointer-events: auto;
}
.elementor-nav-menu--dropdown li {
transition: background-color 0.25s ease;
}
.elementor-nav-menu--dropdown li:hover {
background-color: var(--ctjl-hover-bg);
}
.elementor-nav-menu--dropdown a {
position: relative;
display: block;
padding: 10px 22px;
color: #fff;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.3px;
text-decoration: none;
transition: color 0.25s ease, transform 0.25s ease;
transform: translateX(0);
}
.elementor-nav-menu--dropdown li:hover > a {
transform: translateX(6px);
color: var(--ctjl-accent);
}
.elementor-nav-menu--dropdown a::after {
content: "";
position: absolute;
bottom: 8px;
left: 22px;
width: calc(100% - 44px);
height: 2px;
background-color: var(--ctjl-accent);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.35s ease;
opacity: 0.95;
}
.elementor-nav-menu--dropdown a:hover::after {
transform: scaleX(1);
}
.elementor-nav-menu .menu-item-has-children > a .sub-arrow svg {
width: 1.25em;
height: 1.25em;
fill: var(--ctjl-arrow) !important;
transition: transform 0.35s ease;
transform: rotate(-90deg);
margin-left: 8px;
vertical-align: middle;
}
.elementor-nav-menu .menu-item-has-children:hover > a .sub-arrow svg,
.elementor-nav-menu .menu-item-has-children.focus > a .sub-arrow svg {
transform: rotate(0deg);
}
@media (max-width: 1024px) {
.elementor-nav-menu--dropdown {
position: relative !important;
opacity: 1; visibility: visible; transform: none;
box-shadow: none; background: none; padding: 0;
}
.elementor-nav-menu--dropdown li { background: none; }
.elementor-nav-menu--dropdown a {
padding: 10px 15px; color: var(--ctjl-bg);
transform: none;
}
.elementor-nav-menu--dropdown a::after { display: none; }
}
.elementor-nav-menu--dropdown li,
.elementor-nav-menu--dropdown a.elementor-sub-item {
background-color: transparent !important;
}
.elementor-nav-menu--dropdown li:hover,
.elementor-nav-menu--dropdown a.elementor-sub-item:hover {
background-color: var(--ctjl-hover-bg) !important;
}
ul {
list-style-type: disc;
padding-left: 1.5em;
}
ul li::marker {
color: #2B6B9C; 
}
:root{
--ctjl-bg:#2B6B9C;
--ctjl-accent:#039DD9;
--ctjl-hover-bg:#1E4E7F;
--ctjl-dot:#2B6B9C;
} .cz-features{
max-width:1200px;
margin:0 auto;
padding: clamp(0px, 0vw, 32px);
}
.cz-features .czf-grid{
list-style:none;
display:grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: clamp(24px, 2.4vw, 64px);
margin:0; padding:0;
}
@media (max-width:640px){
.cz-features .czf-grid{ grid-template-columns:1fr; }
}
.cz-features .czf-item{
position:relative;
display:flex; align-items:center; gap:12px;
padding:18px 18px 18px 44px;
border-radius:14px;
background: linear-gradient(135deg, rgba(3,157,217,.08), rgba(27,64,109,.08));
outline:1px solid rgba(3,157,217,.18);
box-shadow:0 6px 20px rgba(23,64,109,.08);
transition: transform .35s ease, outline-color .35s ease, background .35s ease, box-shadow .35s ease;
opacity:0; transform: translateY(14px);
}
.cz-features .czf-item h3{
margin:0;
font-size: 18px;
font-weight:700; line-height:1.25;
color:#2b6b9c;
}
.cz-features .czf-dot{
position:absolute; left:16px; width:10px; height:10px; border-radius:50%;
background: var(--ctjl-dot);
box-shadow: 0 0 0 4px rgba(43,107,156,.14), 0 0 18px rgba(3,157,217,.35);
flex:0 0 auto;
}
.cz-features .czf-item:hover,
.cz-features .czf-item:focus-within{
transform: translateY(-2px);
outline-color: rgba(3,157,217,.38);
background: linear-gradient(135deg, rgba(3,157,217,.12), rgba(27,64,109,.12));
box-shadow:0 10px 26px rgba(23,64,109,.14);
} .cz-features .czf-item.czf-inview{
animation: czfFadeUp .6s cubic-bezier(.2,.8,.2,1) forwards;
}
.cz-features .czf-item:nth-child(1).czf-inview{ animation-delay:.05s; }
.cz-features .czf-item:nth-child(2).czf-inview{ animation-delay:.18s; }
.cz-features .czf-item:nth-child(3).czf-inview{ animation-delay:.31s; }
.cz-features .czf-item:nth-child(4).czf-inview{ animation-delay:.44s; }
@keyframes czfFadeUp{
from{ opacity:0; transform: translateY(14px) scale(.98); filter:saturate(.9); }
to  { opacity:1; transform: translateY(0)   scale(1);    filter:saturate(1); }
}
@media (prefers-reduced-motion:reduce){
.cz-features .czf-item{ transition:none; opacity:1; transform:none; animation:none !important; }
} .cz-industries{ background:transparent; color:#fff; max-width:1200px; margin:0 auto; padding: clamp(0px, 4vw, 0px); } .cz-industries *{ color:inherit; } .cz-industries .czi-grid{ list-style:none; display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(30px, 4vw, 60px); margin:0; padding:0; } @media (max-width:780px){ .cz-industries .czi-grid{ grid-template-columns:1fr; } } .cz-industries .czi-item{ position:relative; display:flex; align-items:center; gap: clamp(16px, 2vw, 28px); padding: clamp(18px, 2.4vw, 28px); background:transparent; box-shadow:none; outline:none; border-radius:18px; will-change: transform, opacity; opacity:0; transform: translateY(18px); } .cz-industries .czi-ico{ width:150px; height:150px; object-fit:contain; flex:0 0 150px; filter: drop-shadow(0 10px 24px rgba(0,0,0,.25)); } .cz-industries .czi-text h3{ margin:0 0 6px 0; font-weight:800; font-size: 22px; line-height:1.2; color: #F2E4C9; } .cz-industries .czi-text p{ margin:0; font-size: 18px; line-height:1.45; opacity:.92; } .cz-industries .czi-item{ position: relative; overflow: hidden; border-radius: 18px; transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .35s ease, outline-color .35s ease, backdrop-filter .35s ease; background: rgba(255,255,255,.00); outline: 1px solid rgba(255,255,255,.00); backdrop-filter: blur(0px) saturate(100%); -webkit-backdrop-filter: blur(0px) saturate(100%); will-change: transform, backdrop-filter, box-shadow, background; } .cz-industries .czi-item::after{ content:""; position: absolute; inset: -30%; background: linear-gradient( 105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.18) 45%, rgba(255,255,255,.38) 50%, rgba(255,255,255,.18) 55%, rgba(255,255,255,0) 100% ); transform: translateX(-120%) rotate(12deg); pointer-events: none; opacity: 0; transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .25s ease; } .cz-industries .czi-item:hover, .cz-industries .czi-item:focus-within{ transform: translateY(-4px) scale(1.02); background: rgba(255,255,255,.08); outline-color: rgba(255,255,255,.18); backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); box-shadow: 0 10px 28px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06) inset; } .cz-industries .czi-item:hover::after, .cz-industries .czi-item:focus-within::after{ transform: translateX(120%) rotate(12deg); opacity: 1; } .cz-industries .czi-ico, .cz-industries .czi-text{ transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; } .cz-industries .czi-item:hover .czi-ico, .cz-industries .czi-item:focus-within .czi-ico{ transform: translateY(-2px); } .cz-industries .czi-item:hover .czi-text, .cz-industries .czi-item:focus-within .czi-text{ transform: translateY(-1px); opacity: .98; } @media (prefers-reduced-motion: reduce){ .cz-industries .czi-item, .cz-industries .czi-ico, .cz-industries .czi-text{ transition: none; } .cz-industries .czi-item:hover, .cz-industries .czi-item:focus-within{ transform: none; } .cz-industries .czi-item::after{ display:none; } } .cz-industries .czi-item.czi-inview{ animation: cziFadeUp .7s cubic-bezier(.2,.8,.2,1) forwards; } .cz-industries .czi-item:nth-child(1).czi-inview{ animation-delay:.05s; } .cz-industries .czi-item:nth-child(2).czi-inview{ animation-delay:.2s; } .cz-industries .czi-item:nth-child(3).czi-inview{ animation-delay:.35s; } .cz-industries .czi-item:nth-child(4).czi-inview{ animation-delay:.5s; } @keyframes cziFadeUp{ from{ opacity:0; transform: translateY(18px) scale(.97); filter:saturate(.9); } to { opacity:1; transform: translateY(0) scale(1); filter:saturate(1); } } @media (prefers-reduced-motion:reduce){ .cz-industries .czi-item{ transition:none; transform:none; opacity:1; animation:none !important; } } @media (max-width:520px){ .cz-industries .czi-grid{ gap:22px; } .cz-industries .czi-item{ flex-direction:column; align-items:center; text-align:center; gap:14px; padding:16px 12px; transform: translateY(16px); } .cz-industries .czi-ico{ width:min(150px,55vw); height:auto; flex:0 0 auto; filter: drop-shadow(0 8px 18px rgba(0,0,0,.22)); } .cz-industries .czi-text h3{ font-size: 22p; margin-bottom:6px; } .cz-industries .czi-text p{ font-size:18px !important; line-height:1.45; opacity:.95; } .cz-industries .czi-item:hover, .cz-industries .czi-item:focus-within{ transform: translateY(-2px); } }
:root{
--ctjl-corner-a:#327BB0; --ctjl-corner-b:#74A31F; --ctjl-corner-w:32px;
--ctjl-corner-h:16px;
--ctjl-corner-thickness:3px;
} .special-header{
position: relative !important;
display: inline-block;
overflow: visible !important;
padding: 16px 0;
line-height: 1.2;
} .special-header::before{
content:"";
position:absolute;
left:0;
top:-12px;
width:var(--ctjl-corner-w);
height:var(--ctjl-corner-h);
border-top:var(--ctjl-corner-thickness) solid var(--ctjl-corner-a) !important;
border-left:var(--ctjl-corner-thickness) solid var(--ctjl-corner-a) !important;
pointer-events:none;
z-index:1;
} .special-header::after{
content:"";
position:absolute;
right:0;
bottom:-12px;
width:var(--ctjl-corner-w);
height:var(--ctjl-corner-h);
border-bottom:var(--ctjl-corner-thickness) solid var(--ctjl-corner-b) !important;
border-right:var(--ctjl-corner-thickness) solid var(--ctjl-corner-b) !important;
pointer-events:none;
z-index:1;
} @media (max-width: 767px){
:root{
--ctjl-corner-w:24px;
--ctjl-corner-h:12px;
}
.special-header{
padding:12px 0;
}
} .cz-twoCol{
--gap: 36px;
--dot: #2B6B9C;
--text: #2B6B9C; --bg1: rgba(3,157,217,.08);
--bg2: rgba(27,64,109,.08);
max-width:800px;
margin:0 auto;
padding: 20px 0px;
}
.cz-twoCol .cz-wrap{
display:flex;
justify-content:center;
}
.cz-twoCol .col-text{
width:100%;
}
.cz-twoCol .cz-list{
list-style:none;
margin:0;
padding:0;
display:grid;
grid-template-columns:1fr;
gap:32px;
} .cz-twoCol .czf-item{
position:relative;
display:flex;
align-items:center;
gap:32px;
padding:18px 18px 18px 44px;
border-radius:14px;
background: linear-gradient(135deg, var(--bg1), var(--bg2));
outline:1px solid rgba(3,157,217,.18);
box-shadow:0 6px 20px rgba(23,64,109,.08);
transition: transform .35s ease, outline-color .35s ease, background .35s ease, box-shadow .35s ease;
}
.cz-twoCol .czf-item h3{
margin:0;
font-size:18px;
font-weight:700;
line-height:1.4;
color: var(--text); }
.cz-twoCol .czf-dot{
position:absolute;
left:16px;
width:10px;
height:10px;
border-radius:50%;
background: var(--dot);
box-shadow: 0 0 0 4px rgba(43,107,156,.14), 0 0 18px rgba(3,157,217,.35);
flex:0 0 auto;
} .cz-twoCol .czf-item:hover,
.cz-twoCol .czf-item:focus-within{
transform: translateY(-2px);
outline-color: rgba(3,157,217,.38);
background: linear-gradient(135deg, rgba(3,157,217,.12), rgba(27,64,109,.12));
box-shadow:0 10px 26px rgba(23,64,109,.14);
}
@media (max-width:600px){
.cz-twoCol{ padding: 10px; }
.cz-twoCol .czf-item{ padding:14px 14px 14px 40px; }
.cz-twoCol .czf-item h3{ font-size:16px; }
} .contact-card-ctjl-1,
.contact-card-ctjl-2,
.contact-card-ctjl-3,
.contact-card-ctjl-4{ position: relative;
display: grid;
gap: 12px;
padding: clamp(18px, 2.4vw, 28px);
border-radius: 18px;
color: #fff;
background: rgba(255,255,255,.08);
outline: 1px solid rgba(255,255,255,.18);
box-shadow:
0 10px 28px rgba(0,0,0,.22),
0 0 0 1px rgba(255,255,255,.06) inset; overflow: hidden;
contain: paint; isolation: isolate; } .contact-card-ctjl-1{ --delay:.05s; }
.contact-card-ctjl-2{ --delay:.20s; }
.contact-card-ctjl-3{ --delay:.35s; }
.contact-card-ctjl-4{ --delay:.50s; } .js .contact-card-ctjl-1,
.js .contact-card-ctjl-2,
.js .contact-card-ctjl-3,
.js .contact-card-ctjl-4{ background: rgba(255,255,255,0.00);
outline-color: rgba(255,255,255,0.00);
box-shadow: none;
backdrop-filter: blur(0px) saturate(100%);
-webkit-backdrop-filter: blur(0px) saturate(100%);
transform: translateY(16px) scale(.98);
opacity: 0;
transition:
transform .5s cubic-bezier(.2,.8,.2,1),
opacity .5s ease,
background .35s ease,
outline-color .35s ease,
box-shadow .35s ease,
backdrop-filter .35s ease;
transition-delay: var(--delay, 0s);
} .js .contact-card-ctjl-1.is-inview,
.js .contact-card-ctjl-2.is-inview,
.js .contact-card-ctjl-3.is-inview,
.js .contact-card-ctjl-4.is-inview{
opacity: 1;
transform: translateY(0) scale(1);
background: rgba(255,255,255,.08);
outline-color: rgba(255,255,255,.18);
box-shadow:
0 10px 28px rgba(0,0,0,.22),
0 0 0 1px rgba(255,255,255,.06) inset;
backdrop-filter: blur(10px) saturate(120%);
-webkit-backdrop-filter: blur(10px) saturate(120%);
} .contact-card-ctjl-1::after,
.contact-card-ctjl-2::after,
.contact-card-ctjl-3::after,
.contact-card-ctjl-4::after{
content:"";
position:absolute; left:-30%; top:-30%; width:160%; height:160%;
z-index: 0; background: linear-gradient(105deg,
rgba(255,255,255,0) 0%,
rgba(255,255,255,.18) 45%,
rgba(255,255,255,.38) 50%,
rgba(255,255,255,.18) 55%,
rgba(255,255,255,0) 100%);
transform: translateX(-120%) rotate(12deg);
opacity: 0;
pointer-events: none;
transition: transform .9s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
} .contact-card-ctjl-1:hover::after,
.contact-card-ctjl-1:focus-within::after,
.contact-card-ctjl-2:hover::after,
.contact-card-ctjl-2:focus-within::after,
.contact-card-ctjl-3:hover::after,
.contact-card-ctjl-3:focus-within::after,
.contact-card-ctjl-4:hover::after,
.contact-card-ctjl-4:focus-within::after{
transform: translateX(120%) rotate(12deg);
opacity: .9;
} .js .contact-card-ctjl-1:hover,
.js .contact-card-ctjl-1:focus-within,
.js .contact-card-ctjl-2:hover,
.js .contact-card-ctjl-2:focus-within,
.js .contact-card-ctjl-3:hover,
.js .contact-card-ctjl-3:focus-within,
.js .contact-card-ctjl-4:hover,
.js .contact-card-ctjl-4:focus-within{
transform: translateY(-3px) scale(1.01);
box-shadow:
0 14px 34px rgba(0,0,0,.26),
0 0 0 1px rgba(255,255,255,.08) inset;
} .contact-card-ctjl-1 h3,
.contact-card-ctjl-2 h3,
.contact-card-ctjl-3 h3,
.contact-card-ctjl-4 h3{
margin:0 0 6px;
font-weight:800;
font-size:22px;
line-height:1.2;
color:#F2E4C9;
}
.contact-card-ctjl-1 p,
.contact-card-ctjl-2 p,
.contact-card-ctjl-3 p,
.contact-card-ctjl-4 p{
margin:0;
font-size:18px;
line-height:1.45;
opacity:.95;
} @media (max-width:520px){
.contact-card-ctjl-1,
.contact-card-ctjl-2,
.contact-card-ctjl-3,
.contact-card-ctjl-4{
border-radius:16px;
padding:16px 12px;
width:100%; box-sizing:border-box; }
.contact-card-ctjl-1 h3,
.contact-card-ctjl-2 h3,
.contact-card-ctjl-3 h3,
.contact-card-ctjl-4 h3{
font-size:20px;
}
.contact-card-ctjl-1 p,
.contact-card-ctjl-2 p,
.contact-card-ctjl-3 p,
.contact-card-ctjl-4 p{
font-size:16px;
}
} @media (prefers-reduced-motion: reduce){
.js .contact-card-ctjl-1,
.js .contact-card-ctjl-2,
.js .contact-card-ctjl-3,
.js .contact-card-ctjl-4,
.contact-card-ctjl-1::after,
.contact-card-ctjl-2::after,
.contact-card-ctjl-3::after,
.contact-card-ctjl-4::after{
transition:none !important;
}
.js .contact-card-ctjl-1,
.js .contact-card-ctjl-2,
.js .contact-card-ctjl-3,
.js .contact-card-ctjl-4{
opacity:1;
transform:none;
}
} .usluga { position: relative; overflow: hidden; } .usluga::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0); transition: background 0.3s ease; z-index: 0; } .usluga:hover::before { background: rgba(0, 0, 0, 0.5); } .usluga:hover .tytul { bottom: 150px; transition: bottom 0.3s ease; } .usluga:hover .przycisk { bottom: -10px; transition: all 0.3s ease; opacity: 1; z-index: 1; } .usluga .tytul, .usluga .przycisk { position: relative; z-index: 1; } .tytul { position: relative; bottom: -60px; transition: .3s ease all; } .przycisk { bottom: -32px; transition: .3s ease all; opacity: 0; z-index: 1; }