@charset "UTF-8";
/***!  /templates/shaper_helixultimate/css/custom.css  !***/

.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
  }
  
  .header-sticky .logo img {
  transform:scale(0.8);
  transition:transform .3s ease-in-out
  }
  
  #sp-header {
  background:rgb(43, 87, 142);
  height:80px;
  width:100%;
  position:relative;
  z-index:99;
  animation:spFadeIn .5s
  }
  
  #sp-header.header-sticky {
  position:fixed;
  z-index:9999;
  top:0;
  left:0;
  width:100%;
  animation:spFadeInDown .5s;
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  background: rgb(43, 87, 142, 0.5)
  }
  
  #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;
  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;
  text-decoration:none
  }
  
  .sp-contact-phone {
  background-color:#3498db
  }
  
  .sp-contact-mobile {
  background-color:#2ecc71
  }
  
  .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:#27ae60
  }
  
  .sp-contact-email {
  background-color:#c0392b
  }
  }
  
  .sp-contact-info li a:focus {
  outline:2px solid #fff;
  outline-offset:2px
  }
  
  .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
  }
  
  .img-clip {
  --border-size:70px;
  --border-offset:-7px;
  --border-color:#fff;
  --border-width:2px;
  position:relative;
  display:inline-block
  }
  
  .img-clip img {
  display:block;
  clip-path:polygon(0 0,69% 0,100% 26%,100% 100%,29% 100%,0 73%);
  -webkit-clip-path:polygon(0 0,69% 0,100% 26%,100% 100%,29% 100%,0 73%)
  }
  
  .img-clip::before,.img-clip::after {
  content:"";
  position:absolute;
  width:var(--border-size);
  height:var(--border-size);
  opacity:0;
  animation:border-appear 2s forwards;
  animation-delay:1s
  }
  
  .img-clip::before {
  top:var(--border-offset);
  left:var(--border-offset);
  border-top:var(--border-width) solid var(--border-color);
  border-left:var(--border-width) solid var(--border-color)
  }
  
  .img-clip::after {
  bottom:var(--border-offset);
  right:var(--border-offset);
  border-bottom:var(--border-width) solid var(--border-color);
  border-right:var(--border-width) solid var(--border-color)
  }
  
  @keyframes border-appear {
  0% {
  opacity:0;
  width:0;
  height:0
  }
  
  100% {
  opacity:1;
  width:var(--border-size);
  height:var(--border-size)
  }
  }
  
  .img-reflex {
  position:relative;
  overflow:hidden;
  display:inline-block
  }
  
  .img-reflex::before {
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,#ffffff4d,transparent);
  animation:shine-effect 3s infinite linear;
  transform:skewX(-15deg);
  z-index:1
  }
  
  @keyframes shine-effect {
  from {
  transform:translateX(100%) skewX(-15deg)
  }
  
  to {
  transform:translateX(-100%) skewX(-15deg)
  }
  }
  
  @media screen and (max-width: 575px) {
  .image-slide,.sp-slider_current_number,.sp-dots {
  display:none
  }
  }
  
  .sppb-addon-article-layout-content {
  position:relative;
  display:inline-block;
  overflow:hidden;
  transform:translateZ(0)
  }
  
  .sppb-addon-article-layout-content img {
  display:block;
  width:100%;
  transition:transform .5s ease,opacity .5s ease;
  backface-visibility:hidden;
  transform-origin:center center
  }
  
  .sppb-addon-article-layout-content::before {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:0;
  height:0;
  background:#fff3;
  border-radius:50%;
  transform:translate(-50%,-50%);
  opacity:0;
  pointer-events:none;
  z-index:2;
  will-change:width,height,opacity
  }
  
  .sppb-addon-article-layout-content:hover::before {
  animation:circle .75s
  }
  
  @keyframes circle {
  0% {
  width:0;
  height:0;
  opacity:1
  }
  
  40% {
  opacity:1
  }
  
  100% {
  width:200%;
  height:200%;
  opacity:0
  }
  }
  
  .sppb-addon-article-layout-content:hover img {
  transform:scale(1.05);
  opacity:.8
  }
/* box-menu */

.border-news {
	border: solid 1px #e0e0e0;
	border-image: linear-gradient(to bottom, #d2d2d2, rgba(0, 0, 0, 0)) 1 15%;
}
.divider-4 {
  position:relative;
  height:2px;
  max-width:800px;
  margin:5px auto;
  background-color:var(--gray-light);
  overflow:hidden
  }
  
  .divider-4::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:30%;
  background-color:var(--orange-dark);
  animation:expand 2.5s ease-in-out infinite
  }
  
  @keyframes expand {
  0%,100% {
  left:0;
  width:0
  }
  
  50% {
  left:35%;
  width:30%
  }
  
  100% {
  left:100%;
  width:0
  }
  }
  
  .divider-7 {
  position:relative;
  height:6px;
  max-width:800px;
  margin:5px auto;
  background-color:var(--gray-light);
  overflow:hidden;
  border-radius:3px
  }
  
  .divider-7::before,.divider-7::after {
  content:"";
  position:absolute;
  height:2px;
  width:40%;
  animation-duration:2.5s;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite
  }
  
  .divider-7::before {
  top:1px;
  background-color:var(--orange-dark);
  animation-name:slideRight
  }
  
  .divider-7::after {
  bottom:1px;
  background-color:var(--gray-dark);
  animation-name:slideLeft
  }
  
  @keyframes slideRight {
  0%,100% {
  left:-40%
  }
  
  50% {
  left:100%
  }
  }
  
  @keyframes slideLeft {
  0%,100% {
  right:-40%
  }
  
  50% {
  right:100%
  }
  }
  
  .divider-8 {
  position:relative;
  height:2px;
  max-width:800px;
  margin:5px auto;
  background-color:var(--gray-light);
  overflow:visible
  }
  
  .divider-8::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:8px;
  height:8px;
  background-color:var(--orange-dark);
  border-radius:50%;
  animation:pulse-scale 2s ease-in-out infinite
  }
  
  @keyframes pulse-scale {
  0%,100% {
  transform:translate(-50%,-50%) scale(1);
  box-shadow:0 0 0 0 #ff5722b3
  }
  
  50% {
  transform:translate(-50%,-50%) scale(1.5);
  box-shadow:0 0 0 10px #ff572200
  }
  }
  
  .divider-9 {
  position:relative;
  height:2px;
  max-width:800px;
  margin:5px auto;
  background-color:var(--gray-light);
  overflow:hidden
  }
  
  .divider-9::before,.divider-9::after {
  content:"";
  position:absolute;
  top:0;
  height:100%;
  width:0;
  background-color:var(--orange-medium);
  animation:expandFromCenter 2.5s ease-in-out infinite
  }
  
  .divider-9::before {
  right:50%
  }
  
  .divider-9::after {
  left:50%
  }
  
  @keyframes expandFromCenter {
  0%,100% {
  width:0
  }
  
  50% {
  width:50%
  }
  }
  
  .divider-10 {
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:400px;
  height:2px;
  margin:15px auto;
  gap:4px
  }
  
  .divider-10 span {
  flex-grow:1;
  height:100%;
  background-color:var(--gray-medium);
  animation:fadeInOut 2s ease-in-out infinite
  }
  
  .divider-10 span:nth-child(2n) {
  background-color:var(--orange-medium)
  }
  
  .divider-10 span:nth-child(1) {
  animation-delay:0s
  }
  
  .divider-10 span:nth-child(2) {
  animation-delay:.1s
  }
  
  .divider-10 span:nth-child(3) {
  animation-delay:.2s
  }
  
  .divider-10 span:nth-child(4) {
  animation-delay:.3s
  }
  
  .divider-10 span:nth-child(5) {
  animation-delay:.4s
  }
  
  .divider-10 span:nth-child(6) {
  animation-delay:.5s
  }
  
  .divider-10 span:nth-child(7) {
  animation-delay:.6s
  }
  
  .divider-10 span:nth-child(8) {
  animation-delay:.7s
  }
  
  .divider-10 span:nth-child(9) {
  animation-delay:.8s
  }
  
  .divider-10 span:nth-child(10) {
  animation-delay:.9s
  }
  
  @keyframes fadeInOut {
  0%,100% {
  opacity:.3
  }
  
  50% {
  opacity:1
  }
  }
  
  .divider-11 {
  position:relative;
  height:3px;
  max-width:400px;
  margin:15px auto;
  background-color:var(--gray-light);
  overflow:hidden
  }
  
  .divider-11::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:var(--orange-dark);
  animation:wave 2.5s ease-in-out infinite;
  transform-origin:0 50%
  }
  
  @keyframes wave {
  0%,100% {
  transform:scaleX(0)
  }
  
  40%,60% {
  transform:scaleX(1)
  }
  }
  
  .divider-12 {
  position:relative;
  height:2px;
  max-width:400px;
  margin:15px auto;
  background-color:var(--gray-light);
  overflow:hidden
  }
  
  .divider-12::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background-color:var(--orange-medium);
  transform-origin:0 50%;
  transform:scaleX(0);
  animation:typewriter 3s steps(40) infinite
  }
  
  @keyframes typewriter {
  0% {
  transform:scaleX(0)
  }
  
  40% {
  transform:scaleX(1)
  }
  
  60% {
  transform:scaleX(1)
  }
  
  100% {
  transform:scaleX(0)
  }
  }
  
  .underline-sek {
  position:relative;
  padding-bottom:10px;
  margin-bottom:10px
  }
  
  .underline-sek::after {
  content:"";
  position:absolute;
  width:80%;
  height:1px;
  bottom:0;
  left:5%;
  right:5%;
  background:linear-gradient(to right,transparent,#747474 50%,transparent);
  transition:all .3s ease
  }
  
  .underline-sek-gray {
  position:relative;
  padding-bottom:10px;
  margin-bottom:10px
  }
  
  .underline-sek-gray::after {
  content:"";
  position:absolute;
  width:70%;
  height:1px;
  bottom:0;
  left:15%;
  background:linear-gradient(to right,transparent,#d8d8d8 50%,transparent);
  transition:all .3s ease
  }
  
  .divider1 {
  display:flex;
  justify-content:center;
  align-items:center
  }
  
  .divider1::before,.divider1::after {
  content:"";
  display:block;
  height:.09em;
  min-width:8vw
  }
  
  .divider1::before {
  background:linear-gradient(to right,#f0f0f000,#06f);
  margin-right:4vh
  }
  
  .divider1::after {
  background:linear-gradient(to left,#f0f0f000,red);
  margin-left:4vh
  }
  
  .boxli li {
  list-style:none;
  position:relative;
  padding-left:30px
  }
  
  .boxli li::before {
  content:"•";
  position:absolute;
  left:0;
  font-size:30px;
  top:50%;
  transform:translateY(-50%);
  line-height:0
  }
  
  .boxli li:nth-child(odd)::before {
  color:#ff9100
  }
  
  .boxli li:nth-child(even)::before {
  color:#04f
  }
.grey{
color:#1C476C;
}
.orange {
    background: linear-gradient(90deg, orange, orange 45%, white 50%, orange 55%, orange 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: shinet 3s infinite 
linear, pulse 3s infinite 
ease-in-out;
    display: inline-block;
}
@keyframes shinet {
  from {
  background-position:100% center
  }
  
  to {
  background-position:-100% center
  }
  }
  
  @keyframes shinet {
  from {
  background-position:100% center
  }
  
  to {
  background-position:-100% center
  }
  }
  
  @keyframes pulse {
  0%,100% {
  transform:scale(1)
  }
  
  50% {
  transform:scale(1.02)
  }
  }
  
  @keyframes pulse {
  0%,100% {
  transform:scale(1)
  }
  
  50% {
  transform:scale(1.02)
  }
  }

/* menu */  
  .vmenu {
  background-color:#2c3e50;
  color:#ecf0f1;
  padding:5px 0;
  box-shadow:2px 0 10px #0000001a
  }
  
  .vmenu ul {
  list-style:none;
  padding:0;
  margin:0
  }
  
  .vmenu li {
  position:relative;
  margin:0;
  perspective:800px
  }
  
  .vmenu a {
  color:#ecf0f1;
  text-decoration:none;
  padding:4px 10px 4px 15px;
  display:block;
  transition:all .3s ease;
  font-size:15px;
  border-bottom:1px solid #ffffff0d;
  position:relative;
  transform-origin:left center
  }
  
  .vmenu a::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:0;
  background-color:#e74c3c;
  transition:height .3s ease
  }
  
  .vmenu a:hover::after {
  height:100%;
  animation:borderGrow .3s ease-out forwards
  }
  
  @keyframes borderGrow {
  0% {
  height:0;
  top:50%
  }
  
  50% {
  height:50%;
  top:25%
  }
  
  100% {
  height:100%;
  top:0
  }
  }
  
  .vmenu a::before {
  content:"›";
  position:absolute;
  left:6px;
  opacity:.7;
  font-size:14px;
  transition:all .3s ease
  }
  
  .vmenu a:hover::before {
  opacity:1;
  transform:translateX(2px);
  color:#e74c3c
  }
  
  @keyframes tiltRight {
  0% {
  transform:translateX(0) rotate3d(0,1,0,0deg)
  }
  
  50% {
  transform:translateX(3px) rotate3d(0,1,0,2deg)
  }
  
  100% {
  transform:translateX(0) rotate3d(0,1,0,0deg)
  }
  }
  
  .vmenu a:hover {
  animation:tiltRight .8s ease-in-out;
  background-color:#ffffff0d
  }
  
  .vmenu a.active {
  background-color:#e74c3c33;
  font-weight:500
  }
  
  .vmenu a.active::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:3px;
  height:100%;
  background-color:#e74c3c
  }
  
  .vmenu a.active::before {
  opacity:1;
  color:#e74c3c
  }
  
  .vmenu i {
  width:24px;
  margin-right:8px;
  text-align:center;
  font-size:16px;
  margin-left:10px
  }
  
  .vmenu li:hover .submenu {
  max-height:500px
  }
  
  .vmenu .submenu {
  padding-left:15px;
  max-height:0;
  overflow:hidden;
  transition:max-height .3s ease;
  background-color:#00000026
  }
  
  .vmenu .submenu a {
  padding:6px 20px 6px 35px;
  font-size:14px;
  color:#fffc
  }
  
  .vmenu .submenu a::before {
  left:20px;
  font-size:12px
  }
  
  .vmenu .has-submenu:after {
  content:"▾";
  position:absolute;
  right:20px;
  top:8px;
  transition:transform .3s ease
  }
  
  .vmenu li:hover .has-submenu:after {
  transform:rotate(180deg)
  }
  
  :root {
  --primary-color:#b7681e;
  --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:0;
  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
  }
  }
  
/* date */

.published,
.sppb-meta-date {
	font-size: 28px;
	font-weight: none;
	color: #fff;
	--r: 0.8em;
	position: relative;
	left: 20px;
	top: calc(-1 * var(--r));
	border-inline: 0.5em solid #0000;
	padding: 0.5em 0.2em calc(var(--r) + 0.2em);
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		calc(100% - 0.5em) calc(100% - var(--r)),
		50% 100%,
		0.5em calc(100% - var(--r)),
		0 100%
	);
	background: radial-gradient(50% 0.2em at top, #000a, #0000) border-box, #0d81cf padding-box;
	width: fit-content;
	white-space: nowrap;
	z-index: 999;
}

.article-info > span + span::before {
	display: inline-block;
	padding-right: 0px;
	padding-left: 0px;
	content: '';
}

.sppb-article-meta .sppb-meta-date-unmodified {
	color: #fff !important;
}
/* image effect */
/* Shine */
.article-intro-image,
.flash {
	position: relative;
	display: inline-block; /* Ensure the ::before pseudo-element has a size */
}

.article-intro-image::before,
.flash::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
}

.article-intro-image:hover::before,
.flash:hover::before {
	-webkit-animation: shine 0.75s;
	animation: shine 0.75s;
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

@keyframes shine {
	100% {
		left: 125%;
	}
}

/* image blog effect hoome */
.sppb-addon-article-layout-content {
	position: relative;
	display: inline-block; /* Ensure the wrapper does not extend beyond the image */
	overflow: hidden; /* Hide overflow to keep the effect within the bounds */
}

.sppb-addon-article-layout-content img {
	display: block;
}

.sppb-addon-article-layout-content::before {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255, 255, 255, 0.2);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
	pointer-events: none; /* Ensure the effect does not interfere with link clicks */
}

.sppb-addon-article-layout-content:hover::before {
	-webkit-animation: circle 0.75s;
	animation: circle 0.75s;
}

@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

/* slider */
/* Styl podstawowy dla klas animacja minaturek na slider + js */
.sp-dot-0,
.sp-dot-1,
.sp-dot-2,
.sp-dot-3,
.sp-dot-4,
.sp-dot-5 {
	display: inline-block;
	width: 100px;
	height: 100px;
	margin: 5px;
	border-radius: 50%;
	position: relative;
	background-color: #000;
}

.sp-dot-0::before,
.sp-dot-1::before,
.sp-dot-2::before,
.sp-dot-3::before,
.sp-dot-4::before,
.sp-dot-5::before {
	content: '';
	position: absolute;
	top: -5px;
	left: -5px;
	right: -5px;
	bottom: -5px;
	border: 2px dashed transparent;
	border-radius: 50%;
	pointer-events: none;
	transition: border-color 0.5s, transform 0.5s;
}

.sp-dot-0:hover::before,
.sp-dot-1:hover::before,
.sp-dot-2:hover::before,
.sp-dot-3:hover::before,
.sp-dot-4:hover::before,
.sp-dot-5:hover::before {
	border-color: white;
	animation: rotate-border 2s linear infinite, move-border 0.5s forwards;
}

.sp-dot-0.active::before,
.sp-dot-1.active::before,
.sp-dot-2.active::before,
.sp-dot-3.active::before,
.sp-dot-4.active::before,
.sp-dot-5.active::before {
	border-color: white;
	animation: rotate-border 2s linear infinite, move-border 0.5s forwards;
}

.sp-dot-0.hide-border::before,
.sp-dot-1.hide-border::before,
.sp-dot-2.hide-border::before,
.sp-dot-3.hide-border::before,
.sp-dot-4.hide-border::before,
.sp-dot-5.hide-border::before {
	border-color: transparent;
	animation: none;
}

@keyframes rotate-border {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

@keyframes move-border {
	0% {
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
	}
	100% {
		top: -8px;
		left: -8px;
		right: -8px;
		bottom: -8px;
	}
}

/* informacje slider */
#sppb-addon-1716548898982 .sp-slider-content-align-left {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-end;
	padding-right: 50px;
}
/* button orange */

.sppb-sp-slider-button {
	background-color: #00adeea6;
	border: none;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-family: 'BenchNine', Arial, sans-serif;

	font-size: 15px;
	line-height: 0.7em;
	margin: 10.5px 18px;
	outline: none;
	padding: 10px 10px;
	position: relative;
	text-transform: uppercase;
	font-weight: 700;
}

.sppb-sp-slider-button:before,
.sppb-sp-slider-button:after {
	border-color: transparent;
	-webkit-transition: all 0.25s;
	transition: all 0.25s;
	border-style: solid;
	border-width: 0;
	content: '';
	height: 16.8px;
	position: absolute;
	width: 16.8px;
}

.sppb-sp-slider-button:before {
	border-color: #fff;
	border-left-width: 1.4px;
	border-top-width: 1.4px;
	left: -3.5px;
	top: -3.5px;
}

.sppb-sp-slider-button:after {
	border-bottom-width: 1.4px;
	border-color: #fff;
	border-right-width: 1.4px;
	bottom: -3.5px;
	right: -3.5px;
}

.sppb-sp-slider-button:hover,
.sppb-sp-slider-button.hover {
	background-color: #00adee;
}

.sppb-sp-slider-button:hover:before,
.sppb-sp-slider-button.hover:before,
.sppb-sp-slider-button:hover:after,
.sppb-sp-slider-button.hover:after {
	height: 100%;
	width: 100%;
}
/* slide content */
/*animation bottom border */
.slide-title {
	position: relative;
	display: inline-block;
	padding-bottom: 5px;
}

.slide-title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 0;
	height: 2px;
	background-color: currentColor;
	animation: underline-animation 2s forwards;
	animation-delay: 2s;
}

@keyframes underline-animation {
	0% {
		width: 0;
		left: 50%;
	}
	50% {
		width: 100%;
		left: 0;
	}
	100% {
		width: 100%;
		left: 0;
	}
}

/* slide arrow */
#sppb-addon-1716548898982 .sp-slider .sp-nav-control .nav-control {
	margin-left: -140px;
}

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
	#sppb-addon-1716548898982 .sp-slider .sp-nav-control .nav-control {
		margin-left: -140px;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
	#sppb-addon-1716548898982 .sp-slider .sp-nav-control .nav-control {
		margin-left: -140px;
	}
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
	#sppb-addon-1716548898982 .sp-slider .sp-nav-control .nav-control {
		margin-left: -140px;
	}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
	#sppb-addon-1716548898982 .sp-slider .sp-nav-control .nav-control {
		margin-left: -140px;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#sppb-addon-1716548898982 .sp-slider .sp-nav-control .nav-control {
		margin-left: -40px;
	}
}

.next-control,
.prev-control {
	background-color: #c47135;
	border: none;
	color: #ffffff;
	cursor: pointer;
	display: inline-block;
	font-family: 'BenchNine', Arial, sans-serif;

	font-size: 22px;
	line-height: 1em;
	margin: 15px 40px;
	margin-left: 20px; /* Left margin of 20px */
	outline: none;
	padding: 12px 40px 10px;
	position: relative;
	text-transform: uppercase;
	font-weight: 700;
}

.next-control:before,
.next-control:after,
.prev-control:before,
.prev-control:after {
	border-color: transparent;
	-webkit-transition: all 0.25s;
	transition: all 0.25s;
	border-style: solid;
	border-width: 0;
	content: '';
	height: 24px;
	position: absolute;
	width: 24px;
}

.next-control:before,
.prev-control:before {
	border-color: #ffffff;
	border-left-width: 2px;
	border-top-width: 2px;
	left: -5px;
	top: -5px;
}

.next-control:after,
.prev-control:after {
	border-bottom-width: 2px;
	border-color: #ffffff;
	border-right-width: 2px;
	bottom: -5px;
	right: -5px;
}

.next-control:hover,
.next-control.hover,
.prev-control:hover,
.prev-control.hover {
	background-color: #fff;
}

.next-control:hover:before,
.next-control.hover:before,
.next-control:hover:after,
.next-control.hover:after,
.prev-control:hover:before,
.prev-control.hover:before,
.prev-control:hover:after,
.prev-control.hover:after {
	height: 100%;
	width: 100%;
}
  
  #offcanvas-toggler {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background-color:#e67e22;
  border-radius:50%;
  box-shadow:0 2px 3px #0000001a;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
  text-decoration:none;
  outline:none
  }
  
  #offcanvas-toggler:hover {
  background-color:#d35400;
  transform:scale(1.05)
  }
  
  #offcanvas-toggler .burger-icon {
  width:16px;
  height:13px;
  position:relative;
  margin:0 auto
  }
  
  #offcanvas-toggler .burger-icon span {
  display:block;
  position:absolute;
  height:2px;
  width:100%;
  background:#fff;
  border-radius:2px;
  opacity:1;
  left:0;
  transform:rotate(0deg);
  transition:.25s ease-in-out;
  right:0;
  margin:0 auto
  }
  
  #offcanvas-toggler .burger-icon span:nth-child(1) {
  top:0
  }
  
  #offcanvas-toggler .burger-icon span:nth-child(2) {
  top:5.5px
  }
  
  #offcanvas-toggler .burger-icon span:nth-child(3) {
  top:11px
  }
  
  #offcanvas-toggler:focus .burger-icon span:nth-child(1) {
  top:5.5px;
  transform:rotate(45deg)
  }
  
  #offcanvas-toggler:focus .burger-icon span:nth-child(2) {
  opacity:0;
  transform:translateX(-16px)
  }
  
  #offcanvas-toggler:focus .burger-icon span:nth-child(3) {
  top:5.5px;
  transform:rotate(-45deg)
  }
  
  .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:#e6f3ff
  }
  
  .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-in-out
  }
  
  .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:#007bff
  }
  
  .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:#6c757d
  }
  
  .offcanvas-menu .offcanvas-inner ul.menu > li::before {
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:4px;
  height:100%;
  background-color:#007bff;
  transform:scaleY(0);
  transition:transform .3s cubic-bezier(0.4,0,0.2,1)
  }
  
  .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:#f8f9fa;
  transition:all .3s ease-in-out
  }
  
  .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;
  animation:slideDown .3s ease-in-out
  }
  
  .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:#495057;
  text-decoration:none;
  transition:color .3s ease-in-out
  }
  
  .offcanvas-menu .offcanvas-inner ul.menu ul > li:hover > a {
  color:#007bff
  }
  
  .offcanvas-menu .offcanvas-inner ul.menu ul > li::before {
  content:"▸";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  color:#6c757d;
  font-size:.8em;
  transition:color .3s ease-in-out
  }
  
  .offcanvas-menu .offcanvas-inner ul.menu ul > li:hover::before {
  color:#007bff
  }
  
  @keyframes slideDown {
  from {
  opacity:0;
  transform:translateY(-10px)
  }
  
  to {
  opacity:1;
  transform:translateY(0)
  }
  }

/* Keyframes for the pulsing animation */
@keyframes pulse {
	0% {
		transform: scale(1) translateY(-50%);
	}
	50% {
		transform: scale(1.5) translateY(-50%);
	}
	100% {
		transform: scale(1) translateY(-50%);
	}
}

/* ABOUTS */
.arrow ul {
	list-style-type: none;
	padding: 0;
}

.arrow li {
	position: relative;
	padding-left: 30px;
	margin-bottom: 10px;
}

.arrow li:before {
	content: '➤';
	position: absolute;
	left: 0;
	color: #f15a29;
}
/* scroll up drop/kropla*/

.sp-scroll-up {
	display: none;
	background: #1e5eb7;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	position: fixed;
	bottom: 30px;
	right: 50px;
	color: #ffffff;
	text-align: center;
	box-shadow: 0 5px 10px rgba(30, 96, 170, 0.2);
	transition: background 0.3s ease, box-shadow 0.3s ease; /* Dodane płynne przejście */
	z-index: 1000;
}

.sp-scroll-up:before {
	content: '';
	position: absolute;
	top: -81%;
	left: 50%;
	border: 21px solid transparent;
	border-bottom: 31px solid #1e5eb7;
	transform: translateX(-50%);
	transition: border-bottom-color 0.3s ease; /* Dodane płynne przejście */
}

.sp-scroll-up i {
	font-size: 12px;
	position: relative;
	top: 15px;
	color: #ffffff;
}

.sp-scroll-up:hover {
	background: #418fde;
	box-shadow: 0 5px 10px rgba(65, 143, 222, 0.3); /* Dodany efekt cienia */
}

.sp-scroll-up:hover:before {
	border-bottom-color: #418fde;
}

.sp-scroll-up.show {
	display: inline-block;
}


/* map column up animation */
.up {
	transition: transform 0.3s ease-in-out;
}

.up:hover {
	transform: translateY(-50px);
}

/* contact */
/* animation car */

@keyframes shake {
	0% {
		transform: translateY(2px);
	}
	50% {
		transform: translateY(-2px);
	}
	100% {
		transform: translateY(0);
	}
}

.car {
	animation: shake 0.5s ease-in-out infinite;
}
@keyframes pulse {
	0% {
		opacity: 1;
	}
	50% {
		opacity: 0.5;
	}
	100% {
		opacity: 1;
	}
}

.emergency span {
	animation: pulse 1s infinite;
}

/* animation boorder icons*/
.rot {
	position: relative;
	display: inline-block;
}

.rot::before {
	content: '';
	position: absolute;
	top: calc(50% - 31px);
	left: 50%;
	width: 168px;
	height: 168px;
	border: 2px dotted #0c4c93;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
	box-sizing: border-box;
}

.up:hover .rot::before {
	opacity: 1;
	animation: rotate-border1 1s linear infinite;
}

@keyframes rotate-border1 {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

 .dark-box {
    background-color: #2c3e50;
    color: #fff;
    border-radius: 6px;
    padding: 30px;
    box-shadow: 0 10px 30px #00000026;
    margin: 25px 0;
    border-left: 5px solid #e74c3c;
    position: relative;
    overflow: hidden;
}
  
  .dark-box h2 {
  margin-top:0;
  margin-bottom:20px;
  font-size:32px;
  text-transform:uppercase;
  font-weight:600;
  padding-bottom:15px;
  border-bottom:1px solid #ffffff1a;
  position:relative
  }
  
  .dark-box h2:after {
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:80px;
  height:3px;
  background-color:#e74c3c
  }
  
  .dark-box p {
  line-height:1.6;
  margin-bottom:15px
  }
  
  .dark-box strong {
  font-weight:600
  }
  
  .dark-box a {
  color:#3498db;
  text-decoration:none;
  transition:color .3s ease
  }
  
  .dark-box a:hover {
  color:#2980b9;
  text-decoration:underline
  }
  
  .dark-box ul,.dark-box ol {
  padding-left:20px;
  margin-bottom:15px;
  color:#bdc3c7
  }
  
  .dark-box li {
  margin-bottom:4px!important
  }
  
  .dark-box.blue {
  border-left-color:#3498db
  }
  
  .dark-box.blue h2:after {
  background-color:#3498db
  }
  
  .dark-box.green {
  border-left-color:#2ecc71
  }
  
  .dark-box.green h2:after {
  background-color:#2ecc71
  }
  
  .dark-box.orange1 {
  border-left-color:#f39c12
  }
  
  .dark-box.orange1 h2:after {
  background-color:#f39c12
  }
  

  
  /* box-1 */
.box-1 {
  background-color: #1a1a1a;
  color: white;
  padding: 20px;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.box-1:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

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

.box-1 h3 {
  color: #ff5722; /* HouseSmart orange color */
  margin-top: 0;
  font-size: 24px;
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 10px 0;
  padding-left: 15px;
  transition: text-shadow 0.3s ease;
}

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

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

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

.box-1 p {
  position: relative;
  z-index: 1;
}

@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 rgba(255, 87, 34, 0.5); }
  50% { text-shadow: 0 0 20px rgba(255, 87, 34, 0.8); }
}

@keyframes expandLine {
  0% { height: 0; }
  100% { height: 100%; }
}

/* box 2 */
.box-2 {
  background-color: #fff; /* Ciemny szary kolor tła */
 
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.box-2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, #e74c3c, #f39c12, #2ecc71, #3498db);
  transform: translateY(-100%);
  transition: transform 0.3s ease;
}

.box-2:hover::before {
  transform: translateY(0);
}

.box-2:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.box-2 h3 {
  color: #f39c12; /* Jaskrawy pomarańczowy dla tytułu */
  font-size: 28px;
  margin-bottom: 20px;
  position: relative;
  padding-bottom: 10px;
  transition: color 0.3s ease;
}

.box-2 h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background-color: #1C476C;
  transition: width 0.3s ease;
}

.box-2:hover h3::after {
  width: 100px;
}

.box-2 p {
  line-height: 1.6;
  margin-bottom: 0;
  transition: transform 0.3s ease;
}

.box-2:hover p {
  transform: scale(1.05);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.box-2:hover::before {
  animation: gradientShift 3s ease infinite;
  background-size: 300% 300%;
}
  
  /* box-3 */
.box-3 {
  background-color: none;
  color: white;
  padding: 20px;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.box-3::before,
.box-3::after {
  content: '';
  position: absolute;
  width: 15%;
  height: 15%;
  transition: all 0.3s ease;
}

.box-3::before {
  top: 0;
  left: 0;
  border-top: 2px solid #ff5722;
  border-left: 2px solid #ff5722;
}

.box-3::after {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #ff5722;
  border-right: 2px solid #ff5722;
}

.box-3:hover::before,
.box-3:hover::after {
  width: 100%;
  height: 100%;
}

.box-3:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.box-3 h3 {
  color: #ff5722;
  margin-top: 0;
  font-size: 24px;
  position: relative;
  z-index: 1;
  text-align: left;
  padding: 10px 0;
  padding-left: 15px;
  transition: text-shadow 0.3s ease;
}

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

.box-3:hover h3::before {
  height: 100%;
}

.box-3:hover h3 {
  text-shadow: 0 0 8px rgba(255, 87, 34, 0.8);
}

.box-3 p {
  position: relative;
  z-index: 1;
}

/* box-4 */
.box-4 {
  background-color: #f5f5f5; /* Jasny szary kolor tła */
  color: #333; /* Ciemny szary kolor tekstu */
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.box-4::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #bbb, #999, #777, #555);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.box-4:hover::before {
  transform: scaleX(1);
}

.box-4:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.box-4 h3 {
  color: #444; /* Ciemniejszy szary dla tytułu */
  font-size: 24px;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 10px;
  transition: color 0.3s ease;
}

.box-4 h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background-color: #777;
  transition: width 0.3s ease, background-color 0.3s ease;
}

.box-4:hover h3::after {
  width: 80px;
  background-color: #555;
}

.box-4 p {
  line-height: 1.5;
  margin-bottom: 0;
  transition: transform 0.3s ease;
}

.box-4:hover p {
  transform: translateX(5px);
}

.box-4::after {
  content: '';
  position: absolute;
  bottom: -50px;
  right: -50px;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #e0e0e0 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.box-4:hover::after {
  opacity: 1;
  transform: scale(1.2);
}

@keyframes pulseGradient {
  0% { opacity: 0.7; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

.box-4:hover::before {
  animation: pulseGradient 2s ease-in-out infinite;
}
/* box-5 */
.box-5 {
  background:#fff;
  color: #2c3e50;
  padding: 30px;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.box-5::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.box-5:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.box-5:hover::before {
  opacity: 1;
  animation: shine 1.5s infinite;
}

.box-5 h3, box-5 h1 {
  font-size: 24px;
  margin-bottom: 15px;
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.box-5:hover h3, .box-5:hover h1 {
  transform: scale(1.05);
}

.box-5 h3::after, .box-5 h1::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  transition: width 0.3s ease;
}

.box-5:hover h3::after, .box-5:hover h1::after {
  width: 100%;
}



.box-5::after {
  content: '→';
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 24px;
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.3s ease;
}

.box-5:hover::after {
  opacity: 1;
  transform: translateX(0);
}

@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 8px rgba(255, 87, 34, 0.5); }
  50% { text-shadow: 0 0 20px rgba(255, 87, 34, 0.8); }
}
  
   #sppb-content1-1,#sppb-content1-2,#sppb-content1-3,#sppb-content1-4 {
  background-color:#f60;
  position:relative;
  overflow:visible;
  transition:background-color .3s ease
  }
  
  #sppb-content1-4 {
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%)
  }
  
  #sppb-content1-1::before,#sppb-content1-2::before,#sppb-content1-3::before,#sppb-content1-4::before {
  content:"";
  position:absolute;
  bottom:100%;
  left:0;
  width:100%;
  height:0;
  background-color:#f60;
  transition:height .3s ease-in-out;
  z-index:1
  }
  
  #sppb-content1-1:hover::before,#sppb-content1-2:hover::before,#sppb-content1-3:hover::before,#sppb-content1-4:hover::before {
  height:4px
  }
  
  #sppb-content1-1::after,#sppb-content1-2::after,#sppb-content1-3::after,#sppb-content1-4::after {
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%) scale(0) translateY(4px);
  width:0;
  height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:16px solid #fff;
  opacity:0;
  transition:transform .3s ease,opacity .3s ease;
  z-index:2
  }
  
  #sppb-content1-1:hover::after,#sppb-content1-2:hover::after,#sppb-content1-3:hover::after,#sppb-content1-4:hover::after {
  transform:translateX(-50%) scale(1) translateY(4px);
  opacity:1
  }
   .border-transparent {
  position:relative;
  padding:130px
  }
  
  .border-transparent::before,.border-transparent::after {
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:1px;
  background-image:linear-gradient(to bottom,transparent 0%,#adadad 15%,#d1d1d1 85%,transparent 100%)
  }
  
  .border-transparent::before {
  left:0
  }
  
  .border-transparent::after {
  right:0
  }
  
  .list ul,.list ol {
  margin-left:0;
  padding-left:0;
  list-style-type:none
  }
  
  .list li {
  position:relative;
  margin-bottom:15px;
  padding-left:30px;
  transition:all .3s ease
  }
  
  .list li:hover {
  transform:translateX(5px)
  }
  
  .list ul li::before {
  content:"•";
  color:#ff9800;
  font-size:1.5em;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  transition:all .3s ease
  }
  
  .list ul li:hover::before {
  color:#1a237e;
  transform:translateY(-50%) scale(1.2)
  }
  
  .list ol {
  counter-reset:li-counter
  }
  
  .list ol li::before {
  content:counter(li-counter);
  counter-increment:li-counter;
  color:#fff;
  background-color:#ff9800;
  font-weight:700;
  font-size:.8em;
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:22px;
  height:22px;
  border-radius:50%;
  text-align:center;
  line-height:22px;
  transition:all .3s ease
  }
  
  .list ol li:hover::before {
  background-color:#1a237e;
  box-shadow:0 0 5px #1a237e80;
  transform:translateY(-50%) scale(1.1)
  }
  
  .list ul ul,.list ol ul,.list ul ol,.list ol ol {
  margin-top:10px;
  margin-left:20px
  }
/* footer module header */
.footer-header {
	color: #f15a29;
	margin-bottom: 25px;
	font-size: 20px;
	position: relative;
	padding-bottom: 5px;
	text-align: center; /* Wycentrowanie tekstu */
}

.footer-header::after {
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 50%; /* Ustawienie pseudo-elementu na środku */
	transform: translateX(-50%); /* Przesunięcie pseudo-elementu w lewo o 50% jego szerokości, aby był wycentrowany */
	width: 100%; /* Możesz dostosować szerokość do swoich potrzeb */
	height: 2px;
	background: linear-gradient(to right, transparent, #f15a29, transparent);
}