/* ----------------------------------------------------------------
    Colors

    Replace the HEX Code with your Desired Color HEX
-----------------------------------------------------------------*/


::selection { background: #2c2c2c; }

::-moz-selection { background: #2c2c2c; }

::-webkit-selection { background: #2c2c2c; }


a,
h1 > span:not(.nocolor),
h2 > span:not(.nocolor),
h3 > span:not(.nocolor),
h4 > span:not(.nocolor),
h5 > span:not(.nocolor),
h6 > span:not(.nocolor),
.header-extras li .he-text span,
#primary-menu > ul > li:hover a,
#primary-menu > ul > li.current a,
#primary-menu > div > ul > li:hover a,
#primary-menu > div > ul > li.current a,
#top-cart a:hover,
.top-cart-action span.top-checkout-price,
.breadcrumb a:hover,
#portfolio-filter li a:hover,
.portfolio-desc h3 a:hover,
.portfolio-overlay a:hover,
#portfolio-navigation a:hover,
.entry-title h2 a:hover,
.entry-meta li a:hover,
.post-timeline .entry:hover .entry-timeline,
.post-timeline .entry:hover .timeline-divider,
.ipost .entry-title h3 a:hover,
.ipost .entry-title h4 a:hover,
.spost .entry-title h4 a:hover,
.mpost .entry-title h4 a:hover,
.comment-content .comment-author a:hover,
.product-title h3 a:hover,
.single-product .product-title h2 a:hover,
.product-price ins,
.single-product .product-price,
.feature-box.fbox-border .fbox-icon i,
.feature-box.fbox-border .fbox-icon img,
.feature-box.fbox-plain .fbox-icon i,
.feature-box.fbox-plain .fbox-icon img,
.process-steps li.active h5,
.process-steps li.ui-tabs-active h5,
.team-title span,
.pricing-box.best-price .pricing-price,
.btn-link,
.dark .post-timeline .entry:hover .entry-timeline,
.dark .post-timeline .entry:hover .timeline-divider { color: #57eb91; }

.color,
#primary-menu ul ul li:hover > a,
#primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title > a:hover,
.top-cart-item-desc a:hover,
.faqlist li a:hover,
.tagcloud a:hover,
.dark .top-cart-item-desc a:hover,
.iconlist-color li i,
.dark.overlay-menu #header-wrap:not(.not-dark) #primary-menu > ul > li:hover > a,
.dark.overlay-menu #header-wrap:not(.not-dark) #primary-menu > ul > li.current > a,
.overlay-menu #primary-menu.dark > ul > li:hover > a,
.overlay-menu #primary-menu.dark > ul > li.current > a { color: #57eb91 !important; }

#primary-menu.style-3 > ul > li.current > a,
#primary-menu.sub-title > ul > li:hover > a,
#primary-menu.sub-title > ul > li.current > a,
#primary-menu.sub-title > div > ul > li:hover > a,
#primary-menu.sub-title > div > ul > li.current > a,
#top-cart > a > span,
#page-menu-wrap,
#page-menu.dots-menu nav li.current a,
#page-menu.dots-menu nav li .dots-menu-caption,
#portfolio-filter li.activeFilter a,
#portfolio-shuffle:hover,
.entry-link:hover,
.sale-flash,
.button:not(.button-white):not(.button-dark):not(.button-border):not(.button-black):not(.button-red):not(.button-teal):not(.button-yellow):not(.button-green):not(.button-brown):not(.button-aqua):not(.button-purple):not(.button-leaf):not(.button-pink):not(.button-blue):not(.button-dirtygreen):not(.button-amber):not(.button-lime),
.button.button-dark:hover,
.promo.promo-flat,
.feature-box .fbox-icon i,
.feature-box .fbox-icon img,
.fbox-effect.fbox-dark .fbox-icon i:hover,
.fbox-effect.fbox-dark:hover .fbox-icon i,
.fbox-border.fbox-effect.fbox-dark .fbox-icon i:after,
.i-rounded:hover,
.i-circled:hover,
ul.tab-nav.tab-nav2 li.ui-state-active a,
.testimonial .flex-control-nav li a,
.skills li .progress,
.owl-theme .owl-dots .owl-dot span,
#gotoTop:hover,
.dark .button-dark:hover,
.dark .fbox-effect.fbox-dark .fbox-icon i:hover,
.dark .fbox-effect.fbox-dark:hover .fbox-icon i,
.dark .fbox-border.fbox-effect.fbox-dark .fbox-icon i:after,
.dark .i-rounded:hover,
.dark .i-circled:hover,
.dark ul.tab-nav.tab-nav2 li.ui-state-active a,
.dark .tagcloud a:hover,
.ei-slider-thumbs li.ei-slider-element { background-color: #57eb91; }

.bgcolor,
.button.button-3d:not(.button-white):not(.button-dark):not(.button-border):not(.button-black):not(.button-red):not(.button-teal):not(.button-yellow):not(.button-green):not(.button-brown):not(.button-aqua):not(.button-purple):not(.button-leaf):not(.button-pink):not(.button-blue):not(.button-dirtygreen):not(.button-amber):not(.button-lime):hover,
.process-steps li.active a,
.process-steps li.ui-tabs-active a,
.sidenav > .ui-tabs-active > a,
.sidenav > .ui-tabs-active > a:hover,
.owl-theme .owl-controls .owl-nav [class*=owl-]:hover,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { background-color: #57eb91 !important; }

#primary-menu.style-4 > ul > li:hover > a,
#primary-menu.style-4 > ul > li.current > a,
.top-cart-item-image:hover,
.post-timeline .entry:hover .entry-timeline,
.post-timeline .entry:hover .timeline-divider,
.cart-product-thumbnail img:hover,
.feature-box.fbox-outline .fbox-icon,
.feature-box.fbox-border .fbox-icon,
.dark .top-cart-item-image:hover,
.dark .post-timeline .entry:hover .entry-timeline,
.dark .post-timeline .entry:hover .timeline-divider,
.dark .cart-product-thumbnail img:hover,
.heading-block.border-color:after { border-color: #57eb91; }

.top-links ul ul,
.top-links ul div.top-link-section,
#primary-menu ul ul,
#primary-menu ul li .mega-menu-content,
#primary-menu.style-6 > ul > li > a:after,
#primary-menu.style-6 > ul > li.current > a:after,
#top-cart .top-cart-content,
.fancy-title.title-border-color:before,
.dark #primary-menu:not(.not-dark) ul ul,
.dark #primary-menu:not(.not-dark) ul li .mega-menu-content,
#primary-menu.dark ul ul,
#primary-menu.dark ul li .mega-menu-content,
.dark #primary-menu:not(.not-dark) ul li .mega-menu-content.style-2,
#primary-menu.dark ul li .mega-menu-content.style-2,
.dark #top-cart .top-cart-content { border-top-color: #57eb91; }

#page-menu.dots-menu nav li .dots-menu-caption:after,
.title-block { border-left-color: #57eb91; }

.title-block-right { border-right-color: #57eb91; }

.fancy-title.title-bottom-border h1,
.fancy-title.title-bottom-border h2,
.fancy-title.title-bottom-border h3,
.fancy-title.title-bottom-border h4,
.fancy-title.title-bottom-border h5,
.fancy-title.title-bottom-border h6,
.more-link { border-bottom-color: #57eb91; }

.border-color,
.process-steps li.active a,
.process-steps li.ui-tabs-active a,
.tagcloud a:hover,
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus { border-color: #57eb91 !important; }

.fbox-effect.fbox-dark .fbox-icon i:after,
.dark .fbox-effect.fbox-dark .fbox-icon i:after { box-shadow: 0 0 0 2px #57eb91; }

.fbox-border.fbox-effect.fbox-dark .fbox-icon i:hover,
.fbox-border.fbox-effect.fbox-dark:hover .fbox-icon i,
.dark .fbox-border.fbox-effect.fbox-dark .fbox-icon i:hover,
.dark .fbox-border.fbox-effect.fbox-dark:hover .fbox-icon i { box-shadow: 0 0 0 1px #57eb91; }


@media only screen and (max-width: 991px) {

    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > ul > li:hover a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > ul > li.current a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > div > ul > li:hover a,
    body:not(.dark) #header:not(.dark) #header-wrap:not(.dark) #primary-menu > div > ul > li.current a,
    #primary-menu ul ul li:hover > a,
    #primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title:hover > a,
    #primary-menu ul li .mega-menu-content.style-2 > ul > li.mega-menu-title > a:hover { color: #57eb91 !important; }

    #page-menu nav { background-color: #57eb91; }

}


@media only screen and (max-width: 767px) {

    #portfolio-filter li a:hover { color: #57eb91; }

}
html, body {
  background-color: #2c2c2c !important;
}

#wrapper,
#content,
.section {
  background-color: #2c2c2c !important;
}
body.dark,
.dark #wrapper,
.dark #content,
.dark .section {
  background-color: #2c2c2c !important;
}
#wrapper,
#content,
#content > .content-wrap,
.section,
.section > .container,
.section > .container-fluid {
  background: #2c2c2c !important;
}
.section {
  background-image: none !important;
  background-color: #2c2c2c !important;
}
html, body {
  background-color: #2c2c2c !important;
}
/* === RESPONSIVE VIDEO + CURSOR PLAY (FINAL FIX) === */

/* slider i slide muszą mieć pełną wysokość */
#slider,
#slider .swiper-container,
#slider .swiper-wrapper,
#slider .swiper-slide {
  height: 100vh;
  min-height: 100vh;
}

/* slide z video */
.video-slide {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: none; /* normalny kursor znika TYLKO nad filmem */
}

/* video jako prawdziwe tło */
.video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      /* KLUCZ DO RESPONSYWNOŚCI */
  object-position: center;
  z-index: 1;
}

/* content nad video */
.video-slide .container {
  position: relative;
  z-index: 3;
}

/* ikona PLAY podążająca za myszką */
.cursor-play {
  position: absolute;
  top: 0;
  left: 0;
  width: 72px;
  height: 72px;
  margin-left: -36px;
  margin-top: -36px;
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  transition: opacity 0.2s ease, transform 0.12s ease;

  /* SVG PLAY – PEWNE, BEZ FONTÓW */
  background: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'>\
<circle cx='32' cy='32' r='30' fill='none' stroke='white' stroke-width='4'/>\
<polygon points='26,20 26,44 46,32' fill='white'/>\
</svg>") center / contain no-repeat;
}

/* widoczna tylko nad filmem */
.cursor-play.active {
  opacity: 1;
}
/* === DARK BACKGROUND – TEXT & HEADINGS COLORS === */

/* zwykły tekst na ciemnym tle */
body,
.dark,
.dark p,
.dark span,
.dark li,
.dark div,
#slider,
.video-slide,
#content {
  color: #ffffff;
}

/* nagłówki */
h1, h2, h3, h4, h5, h6,
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: #57EB91;
}

/* teksty pomocnicze */
p,
li,
span,
small {
  color: inherit;
}

/* linki */
a {
  color: #57EB91;
}

a:hover {
  color: #ffffff;
}

/* slider */
.slider-caption h2 {
  color: #57EB91;
}

.slider-caption p {
  color: #ffffff;
}
/* === ONLY H1 GREEN ON DARK BACKGROUNDS === */

.dark h1,
#slider h1 {
  color: #57EB91 !important;
}
/* === ONLY H1 COLOR OVERRIDE (CANVAS FIX) === */

body.dark h1,
.dark h1,
#slider h1,
#slider .slider-caption h1 {
    color: #57EB91 !important;
}
/* === HERO H1 COLOR FIX === */

.hero-title {
    color: #57eb91 !important;
    opacity: 1 !important;
    position: relative;
    z-index: 20;
}
.section-title-text {
    font-family: 'Raleway', sans-serif !important;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff !important;
    line-height: 1.5;
    opacity: 1 !important;
    position: relative;
    z-index: 20;
}


/* === VIDEO LOOP LIKE GIF === */

.video-mockup {
    width: 100%;
    overflow: hidden;
    border-radius: 16px;
}

.video-mockup video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}
.accordion .acctitle {
    color: #57eb91 !important;
    font-weight: 600;
}
.accordion .acctitle i {
    color: #57eb91 !important;
}
/* === SKILLS LABELS – WHITE TEXT === */

.skills li > span {
    color: #ffffff !important;
    font-weight: 600;
    opacity: 1;
}
.parallax-section {
    position: relative;
    width: 100%;
    height: 240px;        /* mało miejsca na stronie */
    overflow: hidden;
}

.parallax-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 140%;         /* 🔥 TO JEST KLUCZ */
    object-fit: cover;
    transform: translateY(0);
    will-change: transform;
}
.team-desc.team-desc-bg {
    background-color: #1a1a1a !important;
}
.team-desc h4,
.team-desc span {
    color: #ffffff !important;
}
.team-title span {
    color: #57eb91 !important;
}
#oc-clients {
    background-color: #ffffff;
    padding: 40px 0;
}
#oc-services .oc-item {
    display: flex;
}

.service-box {
    background: #111;              /* spokojniejsza czerń */
    border-radius: 18px;
    padding: 40px 30px;
    text-align: left;

    width: 100%;
    min-height: 380px;             /* 🔥 STAŁA WYSOKOŚĆ */
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* równomierne rozłożenie */
}
.service-box p {
    color: #57eb91;          /* Twój brandowy */
    font-size: 15px;        /* mniejsze */
    line-height: 1.6;
    font-weight: 400;
}
.video-link {
    display: block;
    cursor: pointer;
}
.product-link {
    text-decoration: none;
    color: #ffffff;
    transition: color 0.2s ease;
}

.product-link:hover {
    color: #57eb91;
}
/* HOVER – sekcja "Zadzwoń do nas!" */
a.button.button-dark:hover {
    background-color: #57eb91 !important;
}

/* tekst w środku */
a.button.button-dark:hover,
a.button.button-dark:hover strong,
a.button.button-dark:hover i {
    color: #2c2c2c !important;
}
/* ===== UKŁAD 5 W RZĘDZIE ===== */

.team-wrapper {
    display: flex;
    justify-content: space-between;
}

.team-wrapper > div {
    width: 19%;
}


/* ===== ZDJĘCIA ===== */

.team-image {
    height: 320px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.team-image img {
    max-height: 100%;
    width: auto;
}


/* ===== CZARNY BLOK ===== */

.team-desc {
    background: #111;
    padding: 25px 20px;
    height: 200px;        /* mniejszy blok */
    text-align: center;
}


/* ===== SOCIAL MEDIA — JEDEN RZĄD POD STANOWISKIEM ===== */

.team-desc .social-icon {
    display: inline-block;
    margin: 15px 8px 0 8px;   /* ODSTĘP OD STANOWISKA */
}


/* ===== RESPONSYWNOŚĆ ===== */

@media (max-width: 992px) {
    .team-wrapper {
        flex-wrap: wrap;
    }

    .team-wrapper > div {
        width: 48%;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .team-wrapper > div {
        width: 100%;
    }
}
.heading-block {
    margin-bottom: 0 !important;
}
/* Główny zielony kolor w footer */
#footer.dark,
#footer.dark h4,
#footer.dark a,
#footer.dark .color {
    color: #57eb91 !important;
}

/* Ikony */
#footer.dark i {
    color: #57eb91 !important;
}

/* Social icons hover */
#footer.dark .social-icon:hover {
    background-color: #57eb91 !important;
    border-color: #57eb91 !important;
}

/* Link hover */
#footer.dark a:hover {
    color: #57eb91 !important;
}
.heading-block.center .hero-subtitle {
    color: #ffffff !important;
}
.hero-title a {
    color: #ffffff !important;
}
#portfolio-filter li a {
    color: #ffffff !important;
}

#portfolio-filter li a:hover {
    color: #ffffff !important;
}

#portfolio-filter .activeFilter a {
    color: #ffffff !important;
}
.hero-title .subtitle {
    color: #ffffff !important;
}
#section-specs span {
    color: #ffffff !important;
}
.heading-block.center span {
    color: #ffffff !important;
}
.heading-block > span {
    color: #ffffff !important;
}
/* === VIDEO YOUTUBE HOVER === */

.video-youtube-wrapper {
    position: relative;
    display: block;
    width: 70%;
    margin: 0 auto;
    cursor: pointer;
}

.business-video {
    width: 100%;
    height: auto;
    display: block;
}

/* overlay */
.youtube-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* ikona */
.youtube-overlay i {
    font-size: 64px;
    color: #ff0000;
    transition: transform 0.2s ease;
}

/* hover */
.video-youtube-wrapper:hover .youtube-overlay {
    opacity: 1;
}

.video-youtube-wrapper:hover .youtube-overlay i {
    transform: scale(1.1);
}
/* HR section – white text */

.iconlist li,
.iconlist li i,
p {
    color: #ffffff !important;
}
/* === PORTFOLIO 3 W RZĘDZIE – FINAL FIX === */

#portfolio .portfolio-item {
    width: 33.3333% !important;
    float: left !important;
    padding: 0 15px;
}

/* zachowanie proporcji zdjęć */
#portfolio .portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* clearfix */
#portfolio::after {
    content: "";
    display: block;
    clear: both;
}

/* TABLET */
@media (max-width: 992px) {
    #portfolio .portfolio-item {
        width: 50% !important;
    }
}

/* MOBILE */
@media (max-width: 600px) {
    #portfolio .portfolio-item {
        width: 100% !important;
    }
}
.not-dark,
.not-dark * {
    color: #000 !important;
}
h4.uppercase.center {
    color: #fff !important;
}
.button-full {
    color: #000 !important;
}

.button-full strong {
    color: #000 !important;
}
.feature-box p {
    color: #000 !important;
}
.heading-block.center span.divcenter {
    color: #000 !important;
}
.my-green-button {
    display: inline-block;
    background-color: #57eb91; /* zielony */
    color: #000; /* czarny tekst */
    padding: 12px 25px;
    border-radius: 5px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.my-green-button:hover {
    background-color: #57eb91; /* ciemniejszy zielony */
    color: #000;
}
#clients-carousel {
    display: flex;
    overflow: hidden;
    gap: 30px;
    align-items: center;
}

.client-item {
    min-width: 180px;
    flex-shrink: 0;

    background: #fff;              /* biały prostokąt */
    padding: 15px;
    border-radius: 8px;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0.8;
    transition: 0.3s;
}

.client-item img {
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
}

.client-item:hover {
    opacity: 1;
    transform: translateY(-3px);
}
a.section.button.button-full {
    color: #fff !important;
}

a.section.button.button-full strong {
    color: #fff !important;
}

a.section.button.button-full i {
    color: #fff !important;
}
#content .feature-box p,
#content .feature-box p a {
    color: #fff !important;
}
.button.button-green {
    background: #57eb91 !important;
    background-color: #57eb91!important;
    color: #000 !important;
    border: none !important;
}

.button.button-green:hover {
    background: #57eb91 !important;
    background-color: #57eb91 !important;
}
#section-specs {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#oc-clients .oc-item {
    padding-top: 20px;
    padding-bottom: 20px;
}
.events-meta {
    color: #fff;
}

.events-meta li,
.events-meta span,
.events-meta i {
    color: #fff !important;
}
.si-share .social-icon {
    color: #fff !important;       /* ikony białe */
}

.si-share .social-icon i {
    color: #fff !important;
}

/* zachowujemy efekt hover, ale nie psujemy koloru ikon */
.si-share .social-icon:hover {
    color: #fff !important;
}
/* BANER */
.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #111;
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
}

.cookie-banner button {
    margin-left: 10px;
    padding: 8px 14px;
    border: none;
    cursor: pointer;
}

#accept-cookies {
    background: #28a745; /* zielony */
    color: #fff;
}

#accept-cookies:hover {
    background: #218838;
}

#show-policy {
    color: #28a745;
}

#show-policy:hover {
    color: #218838;
}

#reject-cookies {
    background: #444;
    color: #fff;
}


/* MODAL */
.cookie-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
}

.cookie-modal-content {
    background: #fff;
    margin: 5% auto;
    padding: 25px;
    width: 80%;
    max-width: 700px;
    max-height: 80vh;
    overflow-y: auto;
    position: relative;
}

.close-modal {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 28px;
    cursor: pointer;
}