/* =========================================================
   KC FINAL – GLOBAL CONFIG
   ========================================================= */

:root {
  /* 1. GŁÓWNE KOLORY */
  --kc-teal: #008080;        /* Twój główny Turkus */
  --kc-teal-hover: #006666;
  --kc-navy: #0b1b2b;
  
  /* 2. ZMIENNE SYSTEMOWE */
  --kc-bg-main: #000000;     /* Głęboka czerń dla tła */
  --kc-text-white: #ffffff;  /* Czysta biel dla tekstów */
  --kc-primary: #008080;     /* Alias: Primary to też Turkus */
}

/* =========================================================
   KC GLOBAL PAGE TEMPLATE (DARK MODE CORE)
   ========================================================= */

/* 1. Domyślne tło i tekst całej strony */
body {
    background-color: var(--kc-bg-main) !important;
    color: #b0b0b0 !important; /* Srebrny tekst */
    font-family: 'Nunito Sans', sans-serif;
}

/* 2. Wszystkie nagłówki (H1-H6) białe */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--kc-text-white) !important;
    font-weight: 700;
}

/* 3. Nadpisanie klasy .bg-light na ciemny grafit */
.bg-light {
    background-color: #111111 !important; 
}

/* 4. Pola formularzy (inputy) */
.form-control {
    background: #1a1a1a !important;
    border: 1px solid #333 !important;
    color: #fff !important;
}

.form-control:focus {
    border-color: var(--kc-teal) !important;
    box-shadow: none !important;
}

/* 5. Linie podziału */
hr {
    border-top: 1px solid #222 !important;
}

/* =========================================================
   KC NAV CONTROL & HEADER
   ========================================================= */

/* 1. Tło nawigacji */
.kc-navbar-dark {
    background-color: var(--kc-bg-main) !important;
    padding: 0;
}

.kc-navbar-dark.scrolled {
    background-color: var(--kc-bg-main) !important;
    border-bottom: 1px solid #222;
}

/* 2. Linki w menu */
.kc-navbar-dark .navbar-nav .nav-item .nav-link {
    color: var(--kc-text-white);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.kc-navbar-dark .navbar-nav .nav-item .nav-link:hover,
.kc-navbar-dark .navbar-nav .nav-item.active .nav-link,
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
.ftco-navbar-light .navbar-nav > .nav-item.active > a {
    color: var(--kc-primary) !important;
}

/* =========================================================
   KC HERO & SLIDER - PARALLAX FIX (PEŁNY EKRAN)
   ========================================================= */

/* 1. Hero: Pełna wysokość ekranu na desktopie */
@media (min-width: 992px){
  .home-slider .slider-item,
  .home-slider .slider-item .slider-text,
  .hero-wrap {
    height: 100vh !important;      /* Zmienione z 72vh na 100vh (cały ekran) */
    min-height: 700px !important;  /* Zabezpieczenie, żeby nie było za małe */
    max-height: none !important;   /* Usuwamy blokadę wysokości */
    padding: 0 !important;
  }
}

/* 2. Pozycjonowanie tła hero - EFEKT PARALLAX */
.home-slider .slider-item {
  background-size: cover !important;
  background-attachment: fixed !important;   /* KLUCZ: To robi efekt "Smoka" (tło stoi) */
  background-position: center center !important; /* Środek zdjęcia */
  background-repeat: no-repeat !important;
}

/* 3. Wyśrodkowanie treści (Tekst idealnie na środku ekranu) */
.home-slider .slider-item .slider-text {
  display: flex !important;
  align-items: center !important;  /* Pionowo */
  justify-content: center !important; /* Poziomo (jeśli kontener pozwoli) */
}

/* 4. Overlay (Zostawiamy Twój gradient, jest OK) */
.home-slider .slider-item .overlay {
  background: linear-gradient(
    90deg,
    rgba(11,27,43,0.88) 0%,
    rgba(11,27,43,0.62) 42%,
    rgba(11,27,43,0.22) 72%,
    rgba(11,27,43,0.00) 100%
  ) !important;
  /* Dodajemy z-index, żeby overlay na pewno był nad zdjęciem */
  z-index: 1 !important; 
}

/* 5. Typografia Hero (Zostawiamy bez zmian) */
.slider-text .subheading {
    color: var(--kc-teal) !important;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
}

.slider-text h1 {
    font-weight: 900 !important;
    font-size: 60px !important;
    line-height: 1.1;
    color: #ffffff;
    text-shadow: 0 5px 15px rgba(0,0,0,0.8); 
    position: relative; 
    z-index: 2; /* Tekst nad overlayem */
}

.slider-text p {
    font-size: 18px;
    color: #d0d0d0;
    font-weight: 400;
    max-width: 600px;
    position: relative; 
    z-index: 2;
}

.slider-text .btn {
    margin-top: 20px;
    position: relative; 
    z-index: 2;
}

/* =========================================================
   KC BUTTONS (Global CTA)
   ========================================================= */
.btn.btn-primary,
a.btn.btn-primary,
button.btn.btn-primary,
input.btn.btn-primary {
  background: var(--kc-teal) !important;
  border: 2px solid var(--kc-teal) !important;
  color: #fff !important;
  border-radius: 30px !important;
  font-weight: 600;
  transition: all .25s ease-in-out;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
a.btn.btn-primary:hover,
a.btn.btn-primary:focus,
button.btn.btn-primary:hover,
button.btn.btn-primary:focus {
  background: #fff !important;
  color: var(--kc-teal) !important;
  border-color: var(--kc-teal) !important;
  box-shadow: 0 5px 15px rgba(0,128,128,0.25) !important;
  text-decoration: none !important;
}

/* =========================================================
   KC ABOUT & PROCESS (Sekcja "Jak pracuję")
   ========================================================= */
#about {
    background-color: #000000 !important;
}

/* Prawa kolumna "Krótko i konkretnie" */
.wrap-about-border {
    border: 2px solid var(--kc-teal) !important;
    padding: 40px;
    border-radius: 4px;
    background: #0b0b0b;
    position: relative;
}

.wrap-about-border .text h3 {
    color: #ffffff !important;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 24px;
}

/* Główny opis sekcji */
.wrap-about h2 {
    color: #ffffff !important;
    font-weight: 800;
    font-size: 40px;
}

.wrap-about p {
    color: #b0b0b0 !important;
    font-size: 16px;
}

/* =========================================================
   KC LIVING DATA CARDS (Usługi / Proces)
   ========================================================= */
.services {
    background: #111111;
    padding: 30px 20px;
    border-radius: 8px;
    border: 1px solid #222;
    margin-bottom: 30px;
    height: 100%; /* Równa wysokość */
    
    /* Animacja */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
}

/* --- HOVER EFFECT --- */
.services:hover {
    background: #0b1b2b !important; 
    border-color: var(--kc-teal) !important;
    transform: translateY(-10px);
    box-shadow: 0 15px 30px -10px rgba(0, 128, 128, 0.2);
}

.services .icon {
    margin-bottom: 20px;
}

.services .icon span {
    color: var(--kc-teal) !important;
    font-size: 48px;
    transition: transform 0.3s ease;
}

.services:hover .icon span {
    transform: scale(1.1);
}

.services .media-body h3 {
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.services .media-body p {
    color: #b0b0b0 !important;
    font-size: 14px;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.services:hover p {
    color: #ffffff !important; 
}

/* =========================================================
   KC COUNTER (Licznik)
   ========================================================= */
.ftco-counter {
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
}

.block-18 .number {
    font-weight: 800 !important;
    font-size: 48px;
    color: #ffffff;
    line-height: 1;
    display: inline-block;
}

.kc-symbol {
    font-weight: 700;
    font-size: 40px;
    color: var(--kc-teal);
    line-height: 1;
}

.kc-label {
    display: block;
    margin-top: 15px;
    font-size: 15px;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

/* =========================================================
   KC CASES (Realizacje - SCALONE)
   ========================================================= */
.project-wrap {
    background: #111111; /* Default: Ciemny grafit */
    border: 1px solid #222;
    border-radius: 4px;
    margin-bottom: 30px;
    
    /* Layout Flexbox dla równej wysokości */
    height: 100%; 
    display: flex;
    flex-direction: column;
    
    /* Animacja */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* HOVER */
.project-wrap:hover {
    background: var(--kc-navy) !important; 
    transform: translateY(-10px);
    border-color: var(--kc-teal) !important;
    box-shadow: 0 15px 30px -10px rgba(0, 128, 128, 0.2);
}

/* Image */
.project-wrap .img {
    height: 250px;
    display: block;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    position: relative;
    filter: brightness(0.8) grayscale(20%);
    transition: all 0.3s ease;
}

.project-wrap:hover .img {
    filter: brightness(1) grayscale(0%);
}

.project-wrap .img .price {
    background: var(--kc-teal);
    color: #fff;
    padding: 5px 15px;
    position: absolute;
    bottom: 0;
    left: 0;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Content Layout */
.project-wrap .text {
    flex-grow: 1; /* Wypełnia przestrzeń */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.project-wrap .text h3.title a {
    color: #fff !important;
    font-weight: 700;
    font-size: 20px;
    transition: color 0.3s ease;
}

.project-wrap .text .advisor {
    color: var(--kc-teal);
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 15px;
}

.project-wrap .text p,
.project-wrap .text .list-unstyled {
    color: #b0b0b0;
    transition: color 0.3s ease;
}

.project-wrap:hover .text p,
.project-wrap:hover .text .list-unstyled {
    color: #ffffff !important;
}

.project-wrap .text .list-unstyled li span {
    color: var(--kc-teal);
}

/* =========================================================
   KC CONTACT FORM
   ========================================================= */
.kc-contact-box {
    background: #111111;
    border: 1px solid #222;
    border-radius: 4px;
}

.kc-contact-box .form-control {
    background: #000000 !important;
    border: 1px solid #333 !important;
    color: #fff !important;
    font-size: 15px;
}

.kc-contact-box .form-control::placeholder {
    color: #555 !important;
}

.kc-contact-box .form-control:focus {
    border-color: var(--kc-teal) !important;
    box-shadow: 0 0 10px rgba(0, 128, 128, 0.2) !important;
    background: #050505 !important;
}

.kc-contact-box label {
    margin-bottom: 5px;
    letter-spacing: 1px;
}

/* =========================================================
   KC FOOTER V2 - FINALNA WERSJA (Layout + Styl Menu)
   ========================================================= */

/* 1. KONTENER (ZOSTAWIAMY - To jest istotne dla układu) */
.kc-footer {
    background-color: #000000 !important;
    padding-top: 3em !important;
    padding-bottom: 1.5em !important;
    border-top: 1px solid #222;
}

/* 2. NAGŁÓWKI (ZOSTAWIAMY - Styl tytułów np. KONTAKT) */
.kc-footer h2.ftco-heading-2 {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
}

/* 3. IKONY (ZOSTAWIAMY - Turkusowe ikony) */
.kc-footer .block-23 ul li .icon {
    color: var(--kc-teal) !important;
    font-size: 18px;
}

/* 4. LINKI - TU JEST ZMIANA (Nadajemy styl z MENU GÓRNEGO) */
/* Dotyczy: Linków w menu, informacji oraz tekstów w kontakcie */
.kc-footer .block-23 ul li .text, 
.kc-footer .block-23 ul li a,
.kc-footer ul.list-unstyled li a,
.kc-footer .legal-links li a {
    color: #ffffff !important;            /* ZMIANA: Biały zamiast szarego */
    font-size: 16px !important;           /* ZMIANA: Większe (było 14px) */
    font-weight: 700 !important;          /* ZMIANA: Pogrubienie (Bold) */
    text-transform: uppercase !important; /* ZMIANA: Drukowane litery */
    letter-spacing: 1px;                  /* ZMIANA: Odstępy */
    
    opacity: 1 !important;                /* Pełna widoczność */
    transition: all 0.3s ease;
    text-decoration: none !important;
    display: inline-block;                /* Naprawia ułożenie */
    margin-bottom: 5px;                   /* Odstęp między wierszami */
}

/* 5. HOVER (Efekt najechania) */
.kc-footer ul.list-unstyled li a:hover,
.kc-footer .legal-links li a:hover,
.kc-footer .block-23 ul li a:hover {
    color: var(--kc-teal) !important;
    padding-left: 5px;
    text-decoration: none;
}

/* 6. COPYRIGHT (ZOSTAWIAMY - Mały szary druk na dole) */
.kc-footer .copyright-text {
    color: #666 !important;
    font-size: 13px;
    margin-top: 10px;
}


/* =========================================================
   KC RESPONSIVE (RWD)
   ========================================================= */

/* --- TABLETY I TELEFONY (Ekran węższy niż 992px) --- */
@media (max-width: 991.98px) {
    
    /* Nagłówki */
    h1 {
        font-size: 32px !important;
        line-height: 1.3 !important;
    }
    
    p {
        font-size: 16px !important;
    }
    
    .slider-text h1 {
        font-size: 36px !important;
    }
    
    .block-18 .number { font-size: 36px; }
    .kc-symbol { font-size: 30px; }
    .counter-wrap { margin-bottom: 40px; }

    /* MENU i NAGŁÓWEK - odklejamy fixed na mobile */
    header {
        position: relative !important; 
    }
    
    body {
        padding-top: 0 !important;
    }
    
    /* Ukrywamy elementy toppera na mobile */
    .topper .text,
    .topper .icon {
        display: none !important;
    }
    
    .btn.topper {
        padding: 5px 15px !important;
        font-size: 12px !important;
    }
}

/* --- MAŁE TELEFONY (Pionowo < 576px) --- */
@media (max-width: 576px) {
    h1 {
        font-size: 28px !important;
    }
    
    .ftco-section {
        padding: 80px 0 !important;
    }
}
/* =========================================================
   KC MOBILE FIX (NAPRAWA NAGŁÓWKA NA TELEFONIE)
   ========================================================= */

@media (max-width: 991.98px) {
    
    /* 1. UKRYWAMY "KLOCKI" KONTAKTOWE (Email, Telefon, Przycisk) */
    /* Zostawiamy tylko Logo. Reszta znika, żeby nie zasłaniać ekranu. */
    .bg-top .col-lg-9 {
        display: none !important;
    }

    /* 2. USTAWIENIE LOGO */
    /* Centrujemy logo na pasku i dajemy mu trochę luzu */
    .bg-top .col-lg-3 {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        display: flex;
        justify-content: center; /* Wyśrodkowanie poziome */
    }
    
    /* Zmniejszamy logo, żeby było zgrabne */
    .bg-top .navbar-brand img {
        height: 40px !important; /* Mniejsze logo */
        width: auto;
    }

    /* 3. BELKA MENU */
    /* Przyklejamy pasek menu pod logo */
    .kc-navbar-dark {
        padding: 10px 0 !important;
    }
    
    /* 4. NAPRAWA HERO (TEKSTÓW NA TLE) */
    /* Odsuwamy treść od góry, bo nagłówek jest teraz mniejszy */
    /* Ale uwaga: Ponieważ header nie jest fixed na mobile (wg poprzedniego kodu),
       musimy zadbać o padding wewnątrz sekcji */
    .hero-wrap .slider-text {
        padding-top: 0 !important; /* Resetujemy dziwne odstępy */
        justify-content: center !important; /* Centrujemy treść pionowo */
        height: 100vh; /* Na mobile niech zajmuje cały ekran */
    }
    
    /* Zmniejszamy gigantyczny napis */
    .slider-text h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        margin-bottom: 20px;
    }
    
    /* Zmniejszamy przyciski w Hero */
    .slider-text .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
}
/* =========================================================
   KC FOOTER ICONS FIX V2 (Wersja Pancerna)
   ========================================================= */

/* 1. Ustawienie kontenera (działa zarówno na LI jak i na link A w środku) */
.kc-footer .block-23 ul li, 
.kc-footer .block-23 ul li > a {
    display: flex !important;              /* Układ elastyczny (obok siebie) */
    align-items: center !important;        /* Wyrównanie do środka w pionie */
    position: relative !important;         /* Reset pozycjonowania */
    margin-bottom: 10px !important;        /* Odstęp pod spodem */
    width: 100%;                           /* Pełna szerokość */
    text-decoration: none !important;      /* Kasuje podkreślenie linków */
}

/* Jeśli link jest wewnątrz LI, usuwamy margines z LI, żeby się nie dublował */
.kc-footer .block-23 ul li > a {
    margin-bottom: 0 !important;
}

/* 2. Ikona - Resetujemy jej "latanie" po ekranie */
.kc-footer .block-23 ul li .icon {
    position: static !important;           /* Wyłączamy 'absolute' z szablonu - to klucz! */
    width: 30px !important;                /* Sztywna szerokość */
    min-width: 30px !important;            /* Żeby się nie zgniotła */
    font-size: 18px !important;            /* Rozmiar ikonki */
    color: var(--kc-teal) !important;      /* Twój turkus */
    margin-right: 15px !important;         /* Twardy odstęp od tekstu */
    display: flex;
    justify-content: center;               /* Centrowanie ikony w jej polu */
    align-items: center;
    margin-top: 0 !important;              /* Reset */
    background: transparent !important;    /* Bez tła */
}

/* 3. Tekst - Niech zajmie resztę miejsca */
.kc-footer .block-23 ul li .text {
    flex: 1;                               /* Wypełnij dostępną przestrzeń */
    line-height: 1.4 !important;
    display: block !important;
    margin: 0 !important;                  /* Reset marginesów */
    color: #b0b0b0 !important;             /* Srebrny kolor */
}
/* =========================================================
   KC FOOTER ICONS - RESPONSIVE (DUŻE PC / MAŁE MOBILE)
   ========================================================= */

/* 1. BAZA (Wersja na PC - Domyślna) */
/* Tutaj ustawiamy duże, masywne ikony */
.kc-footer .block-23 ul li .icon {
    width: 60px !important;              /* Szerokość pola ikony */
    height: 60px !important;             /* Wysokość pola ikony */
    font-size: 28px !important;          /* Wielkość samej ikonki w środku */
    background: rgba(0, 128, 128, 0.1) !important; /* Lekkie turkusowe tło pod ikoną */
    border: 1px solid var(--kc-teal) !important;   /* Turkusowa ramka */
    border-radius: 50% !important;       /* Idealne kółko */
    
    color: var(--kc-teal) !important;
    margin-right: 20px !important;       /* Większy odstęp od tekstu */
    
    /* Centrowanie */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    
    /* Reset pozycji */
    position: static !important;
    margin-top: 0 !important;
    transition: all 0.3s ease;
}
.kc-article-card__image {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
}

.kc-article-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.55));
  pointer-events: none;
}

.kc-article-card__image img {
  display: block;
  width: 100%;
  height: auto;
}
.kc-content-section{
  background:#000;
  padding: 50px 0 70px;
}

.kc-content-col{
  max-width: 980px;
}

.kc-image-break{
  position: relative;
  min-height: 320px;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 10px 0;
}

.kc-image-break::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0.35) 0%,
    rgba(0,0,0,0.55) 50%,
    rgba(0,0,0,0.72) 100%
  );
}

.kc-image-break__inner{
  position: relative;
  z-index: 2;
  min-height: 320px;
  display: flex;
  align-items: center;
}

.kc-image-break__box{
  width: 100%;
  max-width: 900px;
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.28);
}

.kc-image-break__title{
  color:#fff;
  font-weight:800;
  margin-bottom: 12px;
}

.kc-image-break__text{
  color:#d8d8d8;
  margin-bottom: 0;
}

@media (max-width: 991px){
  .kc-image-break,
  .kc-image-break__inner{
    min-height: 240px;
  }
}