/* contact */

  #sp-top-bar {
  position:relative;
  background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%)!important;
  padding:10px 20px;
  overflow:hidden;
  }
  
  #sp-top-bar::before {
  content:"";
  position:absolute;
  top:0;
  right:-10%;
  width:60%;
  height:100%;
  background:#ffffff1a!important;
  transform:skewX(-15deg);
  }
  
  .sp-contact-info {
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  }
  
  .sp-contact-info li {
  display:flex;
  align-items:center;
  padding:8px 20px 8px 15px;
  font-size:15px;
  font-weight:600;
  color:#fff!important;
  transform:skewX(-15deg);
  transition:all .3s ease;
  position:relative;
  margin:0;
  border-radius:0
  }
  
  .sp-contact-info li > * {
  transform:skewX(15deg)
  }
  
  .sp-contact-info li span.fas,.sp-contact-info li span.far {
  margin-right:8px;
  font-size:16px
  }
  
  .sp-contact-info li a {
  color:#fff!important;
  text-decoration:none;
  }
  
  .sp-contact-phone {
  background-color:#3498db;
  }
  
  .sp-contact-mobile {
  background-color:#275dae;
  }
  
  .sp-contact-email {
  background-color:#e74c3c;
  }
  
  .sp-contact-phone .fas.fa-phone {
  animation:vibrate 1s infinite;
  animation-delay:2s;
  animation-duration:.8s;
  }
  
  @keyframes vibrate {
  0%,100% {
  transform:rotate(0) skewX(15deg);
  }
  
  20% {
  transform:rotate(-5deg) skewX(15deg);
  }
  
  40% {
  transform:rotate(5deg) skewX(15deg);
  }
  
  60% {
  transform:rotate(-3deg) skewX(15deg);
  }
  
  80% {
  transform:rotate(3deg) skewX(15deg)
  }
  }
  
  .sp-contact-info li:hover {
  filter:brightness(110%);
  z-index:1;
  }
  
  @media screen and (min-width: 768px) {
  .sp-contact-info {
  justify-content:flex-start;
  }
  }
  
  @media screen and (max-width: 767px) {
  .sp-contact-info {
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  }
  
  .sp-contact-info li {
  padding:10px 15px;
  transform:skewX(0);
  border-radius:25px;
  margin-bottom:5px;
  }
  
  .sp-contact-info li > * {
  transform:skewX(0);
  }
  
  @keyframes vibrateResponsive {
  0%,100% {
  transform:rotate(0);
  }
  
  20% {
  transform:rotate(-5deg);
  }
  
  40% {
  transform:rotate(5deg)
  }
  
  60% {
  transform:rotate(-3deg)
  }
  
  80% {
  transform:rotate(3deg)
  }
  }
  
  .sp-contact-phone .fas.fa-phone {
  animation-name:vibrateResponsive
  }
  }
  
  @media (prefers-color-scheme: dark) {
  .sp-contact-phone {
  background-color:#2980b9;
  }
  
  .sp-contact-mobile {
  background-color:#275dae;
  }
  
  .sp-contact-email {
  background-color:#003780;
  }
  }
  
  .sp-contact-info li a:focus {
  outline:2px solid #fff;
  outline-offset:2px
  }

:root {
--primary-color:#1e5eb7;
--secondary-color:#f1f3f5;
--border-color:#e0e0e0;
--transition-speed:.3s
}

.icon {
margin-right:4px;
font-size:12px;
color:#f60
}

.mod-finder {
position:relative;
display:flex;
align-items:center;
justify-content:flex-end
}

.search-wrapper {
position:relative;
display:inline-block
}

.js-finder-search-query {
width:140px;
padding:4px 10px;
border:1px solid #ddd;
background:#fff;
transition:all .3s ease-in-out;
outline:none;
border-radius:0;
font-size:14px
}

.js-finder-search-query:focus,.js-finder-search-query:not(:placeholder-shown) {
width:227px;
border-color:#ddd
}

.search-button {
display:none
}

.visually-hidden {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0
}

.offcanvas-menu .offcanvas-inner ul.menu {
position:relative;
padding:.25rem 0
}

.offcanvas-menu .offcanvas-inner ul.menu::before {
content:'';
position:absolute;
left:0;
top:0;
bottom:0;
width:4px;
background-color:#f0f0f0
}

.offcanvas-menu .offcanvas-inner ul.menu>li {
position:relative
}

.offcanvas-menu .offcanvas-inner ul.menu>li>a,.offcanvas-menu .offcanvas-inner ul.menu>li>div {
display:block;
padding:.5rem 1rem;
color:#333;
text-decoration:none;
transition:color .3s ease
}

.offcanvas-menu .offcanvas-inner ul.menu>li:hover>a,.offcanvas-menu .offcanvas-inner ul.menu>li:hover>div,.offcanvas-menu .offcanvas-inner ul.menu>li.active>a {
color:#F60
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>div {
display:flex;
justify-content:space-between;
align-items:center;
cursor:pointer
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent>div>span:last-child {
color:#888
}

.offcanvas-menu .offcanvas-inner ul.menu>li::before {
content:'';
position:absolute;
left:0;
top:0;
width:4px;
height:100%;
background-color:#F60;
transform:scaleY(0);
transition:transform .2s ease-in-out
}

.offcanvas-menu .offcanvas-inner ul.menu>li:hover::before,.offcanvas-menu .offcanvas-inner ul.menu>li.active::before {
transform:scaleY(1)
}

.offcanvas-menu .offcanvas-inner ul.menu ul {
display:none;
padding-left:1rem;
background-color:#f9f9f9
}

.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent:hover>ul,.offcanvas-menu .offcanvas-inner ul.menu>li.menu-parent:focus-within>ul {
display:block
}

.offcanvas-menu .offcanvas-inner ul.menu ul>li {
position:relative;
padding-left:12px
}

.offcanvas-menu .offcanvas-inner ul.menu ul>li>a {
display:block;
padding:.25rem .5rem;
color:#555;
text-decoration:none;
transition:color .3s ease
}

.offcanvas-menu .offcanvas-inner ul.menu ul>li:hover>a {
color:#F60
}

.offcanvas-menu .offcanvas-inner ul.menu ul>li::before {
content:'▸';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
color:#888;
font-size:.8em
}

.offcanvas-menu .offcanvas-inner ul.menu ul>li:hover::before {
color:#F60
}
:root {
  --primary-color:#2980B9;
  --secondary-color:#f1f3f5;
  --border-color:#e0e0e0;
  --transition-speed:.3s;
  --spring-transition:.5s cubic-bezier(0.175,0.885,0.32,1.275)
  }
  
  #sp-menu > .sp-column,#sp-menu .sp-megamenu-wrapper {
  justify-content:flex-start!important
  }
  
  .sp-megamenu-parent {
  display:flex;
  justify-content:center;
  list-style-type:none;
  margin:0;
  padding:0
  }
  
  .sp-megamenu-parent > li {
  position:relative;
  margin:0 5px
  }
  
  .sp-megamenu-parent > li > a {
  text-decoration:none;
  padding:0 4px;
  display:inline-block;
  transition:color var(--transition-speed) ease
  }
  
  .sp-megamenu-parent > li::before {
  content:"";
  position:absolute;
  width:100%;
  height:2px;
  bottom:-21px;
  left:0;
  background-color:var(--primary-color);
  transform:scaleX(0);
  transition:transform var(--spring-transition);
  transform-origin:center
  }
  
  .sp-megamenu-parent > li:hover::before {
  transform:scaleX(1)
  }
  
  .sp-megamenu-parent > li.active > a,.sp-megamenu-parent > li.active:hover > a {
  font-weight:700
  }
  
  .sp-megamenu-parent > li.sp-has-child > a::after {
  content:"\25BC";
  font-size:10px;
  margin-left:5px;
  opacity:.7;
  transition:transform var(--spring-transition)
  }
  
  .sp-megamenu-parent > li.sp-has-child:hover > a::after {
  transform:rotate(180deg)
  }
  
  .sp-megamenu-parent .sp-dropdown {
  position:absolute;
  top:100%;
  left:0;
  z-index:100;
  display:none;
  transform-origin:top center
  }
  
  .sp-megamenu-parent > li:hover .sp-dropdown {
  display:block
  }
  
  .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background-color:#fff;
  box-shadow:0 3px 10px #0000001a;
  padding:8px;
  border:1px solid var(--border-color);
  border-bottom:2px solid var(--primary-color);
  margin-top:15px;
  border-radius:4px;
  animation:springDropDown .6s cubic-bezier(0.68,-0.55,0.265,1.55);
  transform-origin:top center
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item {
  position:relative;
  opacity:0;
  transform:translateY(-10px);
  animation:springItemsIn .4s forwards;
  animation-delay:calc(0.05s * var(--item-index,0))
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a {
  display:block;
  padding:15px 15px 8px 45px;
  cursor:pointer;
  font-size:13px;
  transition:all var(--spring-transition);
  position:relative;
  border-bottom:1px solid var(--border-color);
  background-color:transparent;
  z-index:2
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a::before {
  content:"\2192";
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  transition:transform var(--spring-transition),color .6s ease;
  z-index:3
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item::after {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:0;
  height:100%;
  background-color:var(--secondary-color);
  transition:width .6s cubic-bezier(0.68,-0.6,0.32,1.6);
  z-index:1
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a {
  color:var(--primary-color)
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a::before {
  transform:translateX(5px) translateY(-50%);
  color:var(--primary-color);
  animation:arrowBounce .5s cubic-bezier(0.175,0.885,0.32,1.275)
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover::after {
  width:100%
  }
  
  @keyframes springDropDown {
  0% {
  transform:scaleY(0);
  opacity:0
  }
  
  70% {
  transform:scaleY(1.1);
  opacity:1
  }
  
  85% {
  transform:scaleY(0.95)
  }
  
  100% {
  transform:scaleY(1)
  }
  }
  
  @keyframes springItemsIn {
  0% {
  opacity:0;
  transform:translateY(-15px)
  }
  
  70% {
  opacity:1;
  transform:translateY(5px)
  }
  
  100% {
  opacity:1;
  transform:translateY(0)
  }
  }
  
  @keyframes arrowBounce {
  0% {
  transform:translateX(0) translateY(-50%)
  }
  
  50% {
  transform:translateX(10px) translateY(-50%)
  }
  
  75% {
  transform:translateX(3px) translateY(-50%)
  }
  
  100% {
  transform:translateX(5px) translateY(-50%)
  }
  }
  
  @keyframes borderFade {
  from {
  border-bottom-color:var(--border-color)
  }
  
  to {
  border-bottom-color:var(--primary-color)
  }
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:hover > a {
  animation:borderFade var(--transition-speed) ease forwards
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(1) {
  --item-index:1
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(2) {
  --item-index:2
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(3) {
  --item-index:3
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(4) {
  --item-index:4
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(5) {
  --item-index:5
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(6) {
  --item-index:6
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(7) {
  --item-index:7
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(8) {
  --item-index:8
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(9) {
  --item-index:9
  }
  
  .sp-megamenu-parent .sp-dropdown li.sp-menu-item:nth-child(10) {
  --item-index:10
  }
  
  @media (max-width: 1024px) {
  .sp-megamenu-parent li a {
  font-size:1rem
  }
  }

.but2 {
display:inline-block;
padding:12px 24px;
background:linear-gradient(135deg,#06c,#004080);
color:#fff;
border:none;
border-radius:25px;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:600;
text-decoration:none;
cursor:pointer;
transition:all var(--transition-speed) ease;
box-shadow:0 4px 6px #0000001a
}

.but2:hover {
background:linear-gradient(135deg,#004080,#06c);
transform:translateY(-2px);
box-shadow:0 6px 8px #00000026
}

.but2:active {
transform:translateY(0);
box-shadow:0 2px 4px #0000001a
}

.but2:focus {
outline:none;
box-shadow:0 0 0 3px #0066cc80 0 4px 6px #0000001a
}

.sppb-btn-custom {
padding:12px 24px;
background:linear-gradient(135deg,#06c,#004080);
color:#fff;
border:none;
border-radius:25px;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:600;
text-decoration:none;
cursor:pointer;
transition:all var(--transition-speed) ease;
box-shadow:0 4px 6px #0000001a
}

.sppb-btn-custom:hover {
background:linear-gradient(135deg,#004080,#06c);
transform:translateY(-2px);
box-shadow:0 6px 8px #00000026
}

.sppb-btn-custom:active {
transform:translateY(0);
box-shadow:0 2px 4px #0000001a
}

.sppb-btn-custom:focus {
outline:none;
box-shadow:0 0 0 3px #0066cc80 0 4px 6px #0000001a
}

@keyframes delayedAppear {
0%,99% {
opacity:0;
transform:translateY(20px)
}

100% {
opacity:1;
transform:translateY(0)
}
}

@keyframes reflectMove {
0% {
transform:translate(-50%,-50%) scale(0);
opacity:0
}

50% {
opacity:1
}

100% {
transform:translate(50%,50%) scale(2);
opacity:0
}
}

.but3 {
position:relative;
display:inline-block;
padding:12px 24px;
background:linear-gradient(135deg,#ff8c00,#ff4500);
color:#fff;
border:1px solid #fffc;
border-radius:25px;
font-family:Arial,sans-serif;
font-size:16px;
font-weight:600;
text-decoration:none;
cursor:pointer;
overflow:hidden;
transition:all .3s ease;
box-shadow:0 4px 6px #ff8c004d;
animation:delayedAppear .5s ease-out;
animation-delay:1.2s;
animation-fill-mode:backwards
}

.but3::before {
content:'';
position:absolute;
width:100px;
height:100px;
background:radial-gradient(circle,#ffffff4d 0%,#fff0 70%);
border-radius:50%;
top:50%;
left:50%;
transform:translate(-50%,-50%) scale(0);
opacity:0;
pointer-events:none
}

.but3:hover {
background:linear-gradient(135deg,#ff4500,#ff8c00);
transform:translateY(-3px);
box-shadow:0 6px 8px #ff8c0066
}

.but3:hover::before {
animation:reflectMove 1s ease-out
}

.but3:active {
transform:translateY(-1px);
box-shadow:0 2px 4px #ff8c0033
}

.but3:focus {
outline:none;
box-shadow:0 0 0 3px #ff8c0080 0 4px 6px #ff8c004d
}



.sekcja1 {
position:relative
}

.sekcja1::after {
content:'';
position:absolute;
bottom:-20px;
left:50%;
transform:translateX(-50%);
width:0;
height:0;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-top:20px solid #0f1d2e;
z-index:1
}

.orange {
color:orange;
display:inline-block;
animation:pulse-and-zoom 3s infinite ease-in-out
}

@keyframes pulse-and-zoom {
0%,100% {
opacity:1;
transform:scale(1)
}

50% {
opacity:.9;
transform:scale(1.03)
}
}

.imgc {
--s:220px;
--b:7px;
--c:#d4d4d4;
--bg:#575a6c;
--f:1;
width:var(--s);
aspect-ratio:1;
padding-top:calc(var(--s)/5);
cursor:pointer;
border-radius:0 0 999px 999px;
--_g:50%/calc(100%/var(--f)) 100% no-repeat content-box;
--_o:calc((1/var(--f) - 1)*var(--s)/2 - var(--b));
outline:var(--b) solid var(--c);
outline-offset:var(--_o);
background:radial-gradient(circle closest-side,var(--bg) calc(99% - var(--b)),var(--c) calc(100% - var(--b)) 99%,#0000) var(--_g);
-webkit-mask:linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
-moz-mask:linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
-ms-mask:linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
mask:linear-gradient(#000 0 0) no-repeat 50% calc(1px - var(--_o)) / calc(100%/var(--f) - 2*var(--b) - 2px) 50%,radial-gradient(circle closest-side,#000 99%,#0000) var(--_g);
transform:scale(var(--f));
transition:.5s
}

.go:hover .imgc {
--f:1.35
}

.imgc-1 {
--c:#fff;
--bg:#112131
}

.imgc-2 {
--c:#0f0;
--bg:#cfc
}

.imgc-3 {
--c:#00f;
--bg:#ccf
}

.kontener {
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
width:100%
}

.box-rowny {
background-color:#f0f0f0;
padding:20px;
border:1px solid #ddd;
text-align:center;
border-radius:5px
}

@media (max-width: 768px) {
.kontener {
grid-template-columns:1fr
}
}

.go h2 {
position:relative;
display:inline-block
}

.go h2::after {
content:'';
position:absolute;
width:100%;
height:2px;
bottom:-3px;
left:0;
background-color:#fff;
transform:scaleX(0);
transform-origin:bottom right;
transition:transform var(--transition-speed) ease-out
}

.go:hover h2::after {
transform:scaleX(1);
transform-origin:bottom left
}

.sppb-addon-article-layout-side-content {
border-radius:10px;
padding:15px;
transition:all .3s ease;
overflow:hidden
}

.sppb-addon-article-layout-side-content:hover {
box-shadow:0 4px 8px #0000001a
}

.sppb-addon-article-layout-side-content .sppb-img-responsive {
border-radius:10px;
transition:all .3s ease;
width:100%;
height:auto;
position:relative;
overflow:hidden
}

.sppb-addon-article-layout-side-content:hover .sppb-img-responsive {
transform:scale(1.05)
}

.sppb-addon-article-layout-side-content:hover .sppb-img-responsive::before {
left:125%
}

.sppb-addon-article-layout-side-content h3,.sppb-addon-article-layout-side-content a {
transition:all .3s ease
}

.sppb-addon-article-layout-side-content:hover h3 {
transform:translateY(-5px);
color:#007bff
}

.sppb-addon-article-layout-side-content:hover a {
color:#0050a7!important;
text-decoration:underline
}

.divider {
border-right:1px solid #3cc
}

@media (max-width: 768px) {
.divider {
border-right:0
}
}

.header-info {
position:relative;
display:inline-block;
overflow:hidden
}

.header-info::before,.header-info::after {
content:'';
position:absolute;
width:0;
height:1px;
background-color:#3cc;
transition:width .3s ease
}

.header-info::after {
bottom:0;
left:50%;
transform:translateX(-50%)
}

.header-info:hover::before,.header-info:hover::after {
width:100%
}

.header-info::before:hover,.header-info::after:hover {
width:100%
}

:root {
--brace-color:#112131
}

.brace {
width:100%;
min-width:35px;
padding-bottom:20px;
font-size:1em;
line-height:1em;
position:relative;
text-align:center!important;
vertical-align:middle;
margin:0 15px 35px;
border:none;
background-color:transparent;
background-image:radial-gradient(circle at 0 0,#00008000 14.5px,#112131 15.5px,#112131 19.5px,#00008000 20.5px),radial-gradient(circle at 35px 0,#00008000 14.5px,#112131 15.5px,#112131 19.5px,#00008000 20.5px);
background-size:35px 20px;
background-position:center bottom;
background-repeat:no-repeat;
font-style:italic;
filter:drop-shadow(0 1px 1px #00000026);
overflow:visible
}

.brace::before {
width:50%;
border-top:5px solid var(--brace-color);
border-left:1px solid transparent;
border-top-left-radius:20% 30px;
height:100%;
content:"";
position:absolute;
top:100%;
left:-15px;
box-sizing:border-box;
margin-top:-5px
}

.brace::after {
width:50%;
border-top:5px solid var(--brace-color);
border-right:1px solid transparent;
border-top-right-radius:20% 30px;
height:100%;
content:"";
position:absolute;
top:100%;
right:-15px;
box-sizing:border-box;
margin-top:-5px
}

.brace-container {
padding-left:65px;
position:relative;
font-family:Arial,sans-serif
}

.brace-container::before,.brace-container::after {
content:"";
position:absolute;
left:35px;
width:20px;
height:calc(50% + 15px);
border-left:5px solid var(--brace-color);
box-sizing:border-box
}

.brace-container::before {
top:-15px;
border-top:1px solid transparent;
border-top-left-radius:30px 20%
}

.brace-container::after {
bottom:-15px;
border-bottom:1px solid transparent;
border-bottom-left-radius:30px 20%
}

.brace-container::before,.brace-container::after {
background-image:radial-gradient(circle at 0 0,#00008000 14.5px,var(--brace-color) 15.5px,var(--brace-color) 19.5px,#00008000 20.5px);
background-size:20px 20px;
background-repeat:no-repeat;
filter:drop-shadow(1px 0 1px #00000026)
}

.brace-container::after {
background-image:radial-gradient(circle at 0 100%,#00008000 14.5px,var(--brace-color) 15.5px,var(--brace-color) 19.5px,#00008000 20.5px)
}

.typewriter {
font-size:12px;
overflow:hidden;
white-space:nowrap;
margin:0;
padding:0;
letter-spacing:.1em;
opacity:0;
position:relative
}

.typewriter.visible {
opacity:1;
animation:typing 2s steps(40,end)
}

.typewriter::after {
content:'|';
position:absolute;
right:-.2em;
animation:blink-caret .75s step-end infinite
}

.typewriter.finished::after {
display:none
}

@keyframes typing {
from {
width:0
}

to {
width:100%
}
}

@keyframes blink-caret {
from,to {
color:transparent
}

50% {
color:#000
}
}

.sppb-carousel-extended-item {
border-top:1px solid #0c4ea5;
position:relative;
padding:10px;
border-radius:10px;
overflow:hidden
}

.sppb-carousel-extended-item::before,.sppb-carousel-extended-item::after {
content:'';
position:absolute;
top:0;
bottom:0;
width:1px;
background:linear-gradient(to bottom,#0c4ea5 50%,transparent)
}

.sppb-carousel-extended-item::before {
left:0
}

.sppb-carousel-extended-item::after {
right:0
}

.sppb-testimonial-carousel-img-wrap img {
border:2px dotted #0c4ea5;
padding:6px
}

.sppb-testimonial-carousel-name-designation {
margin-left:40px
}

@keyframes diamondRotate {
0%,10%,100% {
transform:translateX(-50%) rotate(45deg)
}

5% {
transform:translateX(-50%) rotate(405deg)
}
}

.diamond h3 {
position:relative
}

.diamond h3::after {
content:'';
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:100%;
height:2px;
background:linear-gradient(to right,#0ff0,#00ffff80 40%,#0fff 50%,#00ffff80 60%,#0ff0)
}

.diamond h3::before {
content:'';
position:absolute;
bottom:-16px;
left:50%;
width:12px;
height:12px;
background-color:#0FF;
border:none;
animation:diamondRotate 5s linear infinite
}

.grey-divider h3 {
position:relative
}

.grey-divider h3::after {
content:'';
position:absolute;
bottom:-10px;
left:50%;
transform:translateX(-50%);
width:100%;
height:2px;
background:linear-gradient(to right,#13407400,#13407480 40%,#134074ff 50%,#13407480 60%,#13407400)
}

.grey-divider h3::before {
content:'';
position:absolute;
bottom:-16px;
left:50%;
transform:translateX(-50%) rotate(45deg);
width:12px;
height:12px;
background-color:#134074;
border:none
}

.sppb-popover-marker {
opacity:0;
animation:fadeIn .5s ease-in-out forwards;
position:absolute
}

@keyframes fadeIn {
from {
opacity:0
}

to {
opacity:1
}
}

.sppb-popover-marker:nth-of-type(1) {
animation-delay:1s
}

.sppb-popover-marker:nth-of-type(2) {
animation-delay:2s
}

.sppb-popover-marker:nth-of-type(3) {
animation-delay:3s
}

.sppb-popover-marker:nth-of-type(4) {
animation-delay:4s
}

.sppb-popover-marker:nth-of-type(5) {
animation-delay:5s
}

.sppb-popover-marker:nth-of-type(6) {
animation-delay:6s
}

.sppb-popover-marker:nth-of-type(7) {
animation-delay:7s
}

.sppb-popover-marker:nth-of-type(8) {
animation-delay:8s
}

.sppb-popover-marker:nth-of-type(9) {
animation-delay:9s
}

.sppb-popover-marker:nth-of-type(10) {
animation-delay:10s
}

.sppb-popover-marker svg {
width:17px;
height:17px
}

.box_jasny {
background-color:#fff;
box-shadow:0 4px 6px #0000001a 0 1px 3px #00000014;
padding:25px;
border:1px solid #e0e0e0;
transition:all .3s ease
}

.box_jasny:hover {
box-shadow:#00000073 0 25px 20px -20px;
transform:translateY(-3px)
}

.box_jasny h3 {
color:#333;
font-size:1.4em;
margin-top:0;
margin-bottom:15px;
border-bottom:1px solid #f60;
padding-bottom:10px
}

.box_jasny p {
color:#666;
line-height:1.6;
margin-bottom:0
}

.box-1 {
background-color:#183145;
color:#fff;
padding:20px;
border-radius:10px;
position:relative;
overflow:hidden;
margin-bottom:5px;
transition:transform .3s ease,box-shadow .3s ease;
z-index:1
}

.box-1::before {
content:'';
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border:1px solid transparent;
border-radius:10px;
pointer-events:none
}

.box-1:hover {
transform:translateY(-5px);
box-shadow:0 6px 12px #0003
}

.box-1:hover::before {
border-color:#017979;
animation:borderAnimation 1.5s linear forwards;
animation-fill-mode:forwards
}

.box-1 h3 {
color:#7fd4ff;
font-size:20px;
position:relative;
z-index:2;
text-align:left;
padding:10px 0;
padding-left:10px;
transition:text-shadow .3s ease
}

.box-1 h3::before {
content:'';
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
height:0;
width:1px;
background-color:#0ff;
transition:height .3s ease
}

.box-1:hover h3::before {
height:100%;
animation:expandLine .3s ease-out forwards
}

.box-1:hover h3 {
animation:glowPulse 2s infinite
}

.box-1 p {
position:relative;
z-index:2;
color:#fff
}

.footer-vmenu {
position:relative;
z-index:10
}

.footer-vmenu ul {
list-style-type:none;
padding:0;
margin:0
}

.footer-vmenu li {
margin-bottom:0
}

.footer-vmenu a {
color:#fff;
text-decoration:none;
font-size:16px;
display:flex;
align-items:center;
padding:1px 0;
overflow:hidden;
border-bottom:1px solid #1a3e5d;
position:relative
}

.footer-vmenu a::before {
content:'›';
color:#f60;
font-size:20px;
margin-right:10px
}

.footer-vmenu a::after {
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:1px;
background-color:#4498d9cc;
transform:translateX(-100%);
transition:transform .3s ease
}

.footer-vmenu a:hover::after {
transform:translateX(0)
}

@keyframes borderAnimation {
0% {
clip-path:inset(0 0 98% 0)
}

25% {
clip-path:inset(0 98% 0 0)
}

50% {
clip-path:inset(98% 0 0 0)
}

75% {
clip-path:inset(0 0 0 98%)
}

100% {
clip-path:inset(0 0 0 0)
}
}

@keyframes glowPulse {
0%,100% {
text-shadow:0 0 5px #22e5ff80
}

50% {
text-shadow:0 0 20px #3afff5cc
}
}

@keyframes expandLine {
0% {
height:0
}

100% {
height:100%
}
}

/* ============================================
   ARTICLE-LIST - Lista artykułów blogowych
   ============================================ */

/* Główny kontener listy */
.article-list {
    margin: 5px 0;
}

/* Pojedynczy artykuł - karta */
.article-list .article {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Hover na kartę artykułu */
.article-list .article:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: rgba(249, 115, 22, 0.3);
}

/* Kontener zdjęcia */
.article-list .article-intro-image {
    position: relative;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 0;
    background: #f5f5f5;
    float: none !important;
}

.article-list .article-intro-image a {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Zdjęcie artykułu */
.article-list .article-intro-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.6s ease, filter 0.4s ease;
}

/* Hover na zdjęcie - zoom + brightness */
.article-list .article:hover .article-intro-image img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

/* Gradient overlay na zdjęciu */
.article-list .article-intro-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 1;
}

.article-list .article:hover .article-intro-image::after {
    opacity: 1;
}

/* Treść artykułu */
.article-list .article-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Nagłówek H2 */
.article-list .page-header {
    margin: 0 0 15px 0;
    padding: 0 0 12px 0;
    border-bottom: 2px solid rgba(249, 115, 22, 0.15);
    position: relative;
}

.article-list .page-header h2 {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

.article-list .page-header h2 a {
    color: #333333;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.article-list .page-header h2 a:hover {
    color: #c60000;
}

/* Pomarańczowy akcent pod nagłówkiem */
.article-list .page-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #c60000, #a50000);
    transition: width 0.4s ease;
}

.article-list .article:hover .page-header::after {
    width: 60px;
}

/* Informacje o artykule */
.article-list .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    margin-bottom: 15px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.article-list .article-info span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.8rem;
    color: #666666;
    transition: color 0.3s ease;
}

.article-list .article-info span [class^="icon-"] {
    font-size: 0.85rem;
    color: #c60000;
}

.article-list .article-info a {
    color: #666666;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-list .article-info a:hover {
    color: #c60000;
}

/* Intro text */
.article-list .article-introtext {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-list .article-introtext p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #555555;
    margin: 0 0 15px 0;
}

/* Read more button */
.article-list .readmore {
    margin-top: auto;
    padding-top: 15px;
}

.article-list .readmore a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    background: transparent;
    color: #c60000;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid #c60000;
    border-radius: 6px;
    transition: all 0.3s ease;
    position: relative;
}

/* Strzałka */
.article-list .readmore a::after {
    content: '→';
    font-size: 1rem;
    transition: transform 0.3s ease;
}

/* Hover - wypełnienie kolorem */
.article-list .readmore a:hover {
    background: #c60000 ;
    color: #ffffff !important;
    border-color: #c60000 ;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.article-list .readmore a:hover::after {
    transform: translateX(4px);
}

/* Active/Click efekt */
.article-list .readmore a:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(249, 115, 22, 0.2);
}

/* Odstępy między kolumnami */
.article-list.cols-3 .col-lg-4 {
    margin-bottom: 30px;
}

/* Animacja wejścia dla kart */
.article-list .article {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.6s ease forwards;
}

.article-list .col-lg-4:nth-child(1) .article {
    animation-delay: 0.1s;
}

.article-list .col-lg-4:nth-child(2) .article {
    animation-delay: 0.2s;
}

.article-list .col-lg-4:nth-child(3) .article {
    animation-delay: 0.3s;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wariant z większym spacing */
.article-list.spacious .col-lg-4 {
    margin-bottom: 40px;
}

/* Wariant kompaktowy */
.article-list.compact .article-body {
    padding: 20px;
}

.article-list.compact .article-intro-image img {
    height: 200px;
}

.article-list.compact .page-header h2 {
    font-size: 1.15rem;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .article-list .article-intro-image img {
        height: 220px;
    }
    
    .article-list .article-body {
        padding: 22px;
    }
    
    .article-list .page-header h2 {
        font-size: 1.2rem;
    }
    
    .article-list .article-info {
        gap: 10px 14px;
    }
    
    .article-list .article-info span {
        font-size: 0.75rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .article-list {
        margin: 30px 0;
    }
    
    .article-list.cols-3 .col-lg-4 {
        margin-bottom: 25px;
    }
    
    .article-list .article:hover {
        transform: translateY(-4px);
    }
    
    .article-list .article-intro-image img {
        height: 200px;
    }
    
    .article-list .article-body {
        padding: 20px;
    }
    
    .article-list .page-header {
        margin-bottom: 12px;
        padding-bottom: 10px;
    }
    
    .article-list .page-header h2 {
        font-size: 1.1rem;
    }
    
    .article-list .article-info {
        gap: 8px 12px;
        padding: 10px 0;
        margin-bottom: 12px;
    }
    
    .article-list .article-info span {
        font-size: 0.7rem;
    }
    
    .article-list .article-introtext p {
        font-size: 0.9rem;
        margin-bottom: 12px;
    }
    
    .article-list .readmore {
        padding-top: 12px;
    }
    
    .article-list .readmore a {
        padding: 9px 18px;
        font-size: 0.85rem;
    }
}

/* Bardzo małe ekrany */
@media (max-width: 576px) {
    .article-list .article-intro-image img {
        height: 180px;
    }
    
    .article-list .article-body {
        padding: 18px;
    }
    
    .article-list .page-header h2 {
        font-size: 1rem;
    }
    
    .article-list .article-info {
        flex-direction: column;
        gap: 6px;
    }
    
    .article-list .article-introtext p {
        font-size: 0.85rem;
        line-height: 1.6;
    }
}

/* ============================================
   ARTICLE-DETAILS - Strona szczegółów artykułu
   ============================================ */

/* Główny kontener artykułu */
.article-details {
    background: #ffffff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 40px;
}

/* Zdjęcie główne artykułu */
.article-details .article-full-image {
    position: relative;
    width: 100%;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
    background: #f5f5f5;
    float: none !important;
}

.article-details .article-full-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    object-position: center;
    display: block;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px;
    transition: transform 0.6s ease, filter 0.4s ease;
}

.article-details .article-full-image:hover img {
    transform: scale(1.03);
    filter: brightness(1.05);
}

/* Nagłówek artykułu */
.article-details .article-header {
    margin: 0 0 25px 0;
    padding: 0 0 20px 0;
    border-bottom: 3px solid rgba(249, 115, 22, 0.2);
    position: relative;
}

.article-details .article-header h1 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #333333;
    margin: 0;
    line-height: 1.3;
    position: relative;
}

/* Pomarańczowy akcent pod nagłówkiem */
.article-details .article-header::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #c60000, #a50000);
    z-index: 1;
}

/* Informacje o artykule */
.article-details .article-info {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    margin-bottom: 30px;
    padding: 15px 20px;
    background: rgba(249, 115, 22, 0.05);
    border-radius: 8px;
    border-left: 4px solid #c60000;
}

.article-details .article-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    color: #666666;
    transition: color 0.3s ease;
}

.article-details .article-info span [class^="icon-"] {
    font-size: 1rem;
    color: #c60000;
}

.article-details .article-info a {
    color: #666666;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.article-details .article-info a:hover {
    color: #c60000;
}

/* Social Share - przyciski społecznościowe */
.article-details .article-ratings-social-share {
    margin-bottom: 30px;
    padding: 15px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.article-details .social-share-icon ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
}

.article-details .social-share-icon ul li {
    margin: 0;
}

.article-details .social-share-icon ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
}

/* Facebook - niebieski */
.article-details .social-share-icon ul li a.facebook {
    background: rgba(24, 119, 242, 0.1);
    color: #1877f2;
    border: 1px solid rgba(24, 119, 242, 0.3);
}

.article-details .social-share-icon ul li a.facebook:hover {
    background: #1877f2;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}

/* Twitter/X - czarny */
.article-details .social-share-icon ul li a.twitter {
    background: rgba(0, 0, 0, 0.08);
    color: #000000;
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.article-details .social-share-icon ul li a.twitter:hover {
    background: #000000;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* LinkedIn - niebieski */
.article-details .social-share-icon ul li a.linkedin {
    background: rgba(0, 119, 181, 0.1);
    color: #0077b5;
    border: 1px solid rgba(0, 119, 181, 0.3);
}

.article-details .social-share-icon ul li a.linkedin:hover {
    background: #0077b5;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);
}

/* Treść artykułu */
.article-details .com-content-article__body {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444444;
}

.article-details .com-content-article__body p {
    margin-bottom: 20px;
    text-align: justify;
}

/* Nagłówki H3 w treści */
.article-details .com-content-article__body h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333333;
    margin: 35px 0 15px 0;
    padding-left: 15px;
    position: relative;
    border-left: 4px solid #c60000;
}

/* Pomarańczowa linia po lewej */
.article-details .com-content-article__body h3::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #c60000, #a50000);
}

/* Pierwszy paragraf - większy i wyróżniony */
.article-details .com-content-article__body > p:first-of-type {
    font-size: 1.15rem;
    font-weight: 500;
    color: #333333;
    line-height: 1.7;
    padding: 20px;
    background: rgba(249, 115, 22, 0.05);
    border-left: 4px solid #c60000;
    border-radius: 8px;
    margin-bottom: 30px;
}

/* Listy w treści artykułu */
.article-details .com-content-article__body ul,
.article-details .com-content-article__body ol {
    margin: 20px 0 20px 25px;
    padding: 0;
}

.article-details .com-content-article__body ul li,
.article-details .com-content-article__body ol li {
    margin-bottom: 10px;
    line-height: 1.7;
}

.article-details .com-content-article__body ul li::marker {
    color: #c60000;
}

/* Cytaty */
.article-details .com-content-article__body blockquote {
    margin: 30px 0;
    padding: 20px 25px;
    background: #f9f9f9;
    border-left: 4px solid #c60000;
    border-radius: 8px;
    font-style: italic;
    color: #555555;
}

/* Linki w treści */
.article-details .com-content-article__body a {
    color: #c60000;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.article-details .com-content-article__body a:hover {
    color: #a50000;
    border-bottom-color: #a50000;
}

/* Kod w treści */
.article-details .com-content-article__body code {
    padding: 2px 6px;
    background: rgba(249, 115, 22, 0.1);
    border: 1px solid rgba(249, 115, 22, 0.2);
    border-radius: 4px;
    font-size: 0.9em;
    color: #c60000;
}

.article-details .com-content-article__body pre {
    padding: 15px;
    background: #f5f5f5;
    border-left: 4px solid #c60000;
    border-radius: 8px;
    overflow-x: auto;
    margin: 20px 0;
}

/* Obrazki w treści */
.article-details .com-content-article__body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Tabele w treści */
.article-details .com-content-article__body table {
    width: 100%;
    border-collapse: collapse;
    margin: 25px 0;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.article-details .com-content-article__body table th {
    background: linear-gradient(135deg, #c60000, #a50000);
    color: #ffffff;
    padding: 12px;
    text-align: left;
    font-weight: 600;
}

.article-details .com-content-article__body table td {
    padding: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.article-details .com-content-article__body table tr:hover td {
    background: rgba(249, 115, 22, 0.05);
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .article-details {
        padding: 35px;
    }
    
    .article-details .article-header h1 {
        font-size: 2rem;
    }
    
    .article-details .com-content-article__body {
        font-size: 1rem;
    }
    
    .article-details .com-content-article__body h3 {
        font-size: 1.4rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .article-details {
        padding: 25px;
        border-radius: 10px;
    }
    
    .article-details .article-full-image {
        margin: 0 0 20px 0 !important;
        border-radius: 10px;
    }
    
    .article-details .article-full-image img {
        max-height: 350px;
        border-radius: 10px;
    }
    
    .article-details .article-header {
        margin-bottom: 20px;
        padding-bottom: 15px;
    }
    
    .article-details .article-header h1 {
        font-size: 1.6rem;
    }
    
    .article-details .article-header::after {
        width: 60px;
    }
    
    .article-details .article-info {
        gap: 10px 15px;
        padding: 12px 15px;
    }
    
    .article-details .article-info span {
        font-size: 0.8rem;
    }
    
    .article-details .article-ratings-social-share {
        margin-bottom: 20px;
    }
    
    .article-details .social-share-icon ul {
        gap: 8px;
    }
    
    .article-details .social-share-icon ul li a {
        width: 36px;
        height: 36px;
    }
    
    .article-details .com-content-article__body {
        font-size: 0.95rem;
        line-height: 1.7;
    }
    
    .article-details .com-content-article__body p {
        margin-bottom: 18px;
        text-align: left;
    }
    
    .article-details .com-content-article__body > p:first-of-type {
        font-size: 1.05rem;
        padding: 15px;
    }
    
    .article-details .com-content-article__body h3 {
        font-size: 1.25rem;
        margin: 25px 0 12px 0;
        padding-left: 12px;
    }
}

/* Bardzo małe ekrany */
@media (max-width: 576px) {
    .article-details {
        padding: 20px;
    }
    
    .article-details .article-full-image img {
        max-height: 280px;
    }
    
    .article-details .article-header h1 {
        font-size: 1.4rem;
    }
    
    .article-details .article-info {
        flex-direction: column;
        gap: 8px;
        padding: 10px 12px;
    }
    
    .article-details .social-share-icon ul {
        gap: 6px;
    }
    
    .article-details .social-share-icon ul li a {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .article-details .com-content-article__body {
        font-size: 0.9rem;
    }
    
    .article-details .com-content-article__body > p:first-of-type {
        font-size: 1rem;
    }
    
    .article-details .com-content-article__body h3 {
        font-size: 1.15rem;
    }
}
/* ============================================
   PAGINATION - Nawigacja stron
   ============================================ */

/* Główny kontener paginacji */
.pagination-wrapper, .com-content-category-blog__pagination {
    margin-top: 40px;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0 0 40px 0 !important;
}

/* Pojedynczy element */
.pagination .page-item {
    margin: 0;
}

/* Linki i spany */
.pagination .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 42px;
    padding: 8px 12px;
    background: #ffffff;
    color: #333333;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Hover efekt */
.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: rgba(249, 115, 22, 0.1);
    color: #c60000;
    border-color: #c60000;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(249, 115, 22, 0.15);
}

/* Aktywna strona */
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #c60000, #a50000);
    color: #ffffff;
    border-color: #c60000;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.3);
    cursor: default;
}

/* Disabled (nieaktywne) */
.pagination .page-item.disabled .page-link {
    background: #f5f5f5;
    color: #cccccc;
    border-color: rgba(0, 0, 0, 0.05);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Ikonki (strzałki) */
.pagination .page-link [class^="icon-"] {
    font-size: 1rem;
}

/* Pierwsze i ostatnie przyciski (double arrows) - wyróżnione */
.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
    background: rgba(249, 115, 22, 0.05);
    border-color: rgba(249, 115, 22, 0.2);
    color: #c60000;
}

.pagination .page-item:first-child:not(.disabled) .page-link:hover,
.pagination .page-item:last-child:not(.disabled) .page-link:hover {
    background: rgba(249, 115, 22, 0.15);
    border-color: #c60000;
}

/* Disabled first/last */
.pagination .page-item:first-child.disabled .page-link,
.pagination .page-item:last-child.disabled .page-link {
    background: #f5f5f5;
    color: #cccccc;
}

/* Wariant kompaktowy */
.pagination.compact .page-link {
    min-width: 36px;
    height: 36px;
    padding: 6px 10px;
    font-size: 0.9rem;
}

/* Wariant rounded (pełne kółka) */
.pagination.rounded .page-link {
    border-radius: 50%;
    min-width: 42px;
    padding: 8px;
}

/* Responsive - Tablet */
@media (max-width: 1024px) {
    .pagination__wrapper {
        margin: 35px 0;
    }
    
    .pagination {
        gap: 6px;
        margin-bottom: 35px !important;
    }
    
    .pagination .page-link {
        min-width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .pagination__wrapper {
        margin: 30px 0;
    }
    
    .pagination {
        gap: 5px;
        margin-bottom: 30px !important;
    }
    
    .pagination .page-link {
        min-width: 38px;
        height: 38px;
        padding: 6px 10px;
        font-size: 0.85rem;
    }
    
    .pagination .page-link [class^="icon-"] {
        font-size: 0.9rem;
    }
}

/* Bardzo małe ekrany */
@media (max-width: 576px) {
    .pagination__wrapper {
        margin: 25px 0;
    }
    
    .pagination {
        gap: 4px;
        margin-bottom: 25px !important;
        justify-content: center;
    }
    
    .pagination .page-link {
        min-width: 36px;
        height: 36px;
        padding: 5px 8px;
        font-size: 0.8rem;
        border-radius: 6px;
    }
    
    .pagination .page-link [class^="icon-"] {
        font-size: 0.85rem;
    }
}

.bg-lines {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px #0000001a;
  background-image: linear-gradient(
    45deg,
    #fcfcfce6 0%,
    #fcfcfce6 25%,
    #f5f5f5e6 25%,
    #f5f5f5e6 50%,
    #fcfcfce6 50%,
    #fcfcfce6 75%,
    #f5f5f5e6 75%,
    #f5f5f5e6 100%
  );
  background-size: 60px 60px;
  animation: moveStripes 3s linear infinite;
  position: relative;
}