:root {
  --zielony: #b2c619;
  --szary-ciemny: #333;
  --szary-jasny: #f4f4f4;
  --czerwony: #c40000;
}

body { margin: 0; font-family:'Inter',sans-serif; padding-top: 70px;  }

.zielony_napis { color:var(--zielony); }
.pogrubiony {font-weight: bold; }

/* BELKA GÓRNA */
.navbar {
  background-color: #fff;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.navbar-container {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

/* LOGO */
.brand { text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.logo { color: var(--czerwony); font-size: 30px; font-weight: bold;  }
.sub-logo { color: #666; font-size: 14px; font-weight: bold;  }

/* --- STYLIZACJA NOWEGO LOGO --- */

.logo-container {
    display: flex;
    align-items: center; /* Centruje grafikę i tekst w pionie względem siebie */
    gap: 12px;           /* Odstęp między obrazkiem a tekstem */
    text-decoration: none;
}

.logo-img {
    height: 45px;        /* Dopasuj wysokość do wysokości paska menu */
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column; /* Ustawia napis jeden pod drugim */
    justify-content: center;
}

.brand-name {
    font-size: 24px;
    font-weight: bold;
    color: var(--czerwony); /* Lub biały, jeśli pasek jest ciemny */
    line-height: 1;      /* Usuwa zbędne odstępy między liniami */
    letter-spacing: 1px;
}

.brand-slogan {
    font-size: 11px;     /* Mała, elegancka czcionka */
    color: var(--szary-ciemny); /* Twoja zieleń jako akcent */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 3px;     /* Delikatny odstęp od nazwy głównej */
}

/* Responsywność: mniejsze logo na telefonach */
@media (max-width: 768px) {
    .logo-img { height: 35px; }
    .brand-name { font-size: 20px; }
    .brand-slogan { font-size: 9px; }
}




/* MENU STACJONARNE */
.menu { list-style: none; display: flex; margin: 0; padding: 0; }
.menu > li { position: relative; }

.menu > li > a {
  color: var(--szary-ciemny);
  text-decoration: none;
  padding: 15px 18px;
  display: block;
  font-weight: 500;
  transition: 0.3s;
}

.arrow {
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--szary-ciemny);
  transition: 0.3s;
}

/* EFEKTY HOVER NA DESKTOP */
@media (min-width: 993px) {
  .menu > li > a::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: 5px; left: 50%;
    background-color: var(--zielony);
    transition: all 0.3s;
    transform: translateX(-50%);
  }

  .menu > li:hover > a { color: var(--zielony); }
  .menu > li:hover > a::after { width: 70%; }
  .menu > li:hover .arrow { border-top-color: var(--zielony); transform: rotate(180deg); }

  /* PODMENU */
  .submenu {
    position: absolute;
    top: 100%; left: 0;
    background-color: var(--szary-jasny);
    min-width: 240px;
    list-style: none;
    padding: 0;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: 0.3s ease-in-out;
  }

  .menu > li:hover .submenu {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
}

/* STYL PODMENU (WSPÓLNY) */
.submenu a {
  color: var(--szary-ciemny);
  text-decoration: none;
  padding: 12px 20px;
  display: block;
  border-left: 4px solid transparent;
  transition: 0.2s;
}

.submenu a:hover {
  color: var(--zielony);
  background-color: #fff;
  border-left-color: var(--zielony);
}

/* MOBILE */
.hamburger { display: none; font-size: 28px; background: none; border: none; cursor: pointer; color: var(--szary-ciemny); }

@media (max-width: 992px) {
  .hamburger { display: block; }
  .menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; width: 100%;
    background: #fff;
    border-top: 1px solid #eee;
  }
  .menu.active { display: flex; }

  /* Na komórce: zielony pasek zamiast podkreślenia */
  .menu > li > a {
    border-left: 5px solid transparent;
  }
  .menu > li > a:active, .menu > li > a:hover {
    color: var(--zielony);
    border-left-color: var(--zielony);
    background-color: #fafafa;
  }

  .submenu {
    display: none;
    background-color: var(--szary-jasny);
    list-style: none;
    padding: 0;
  }
  
  /* Proste rozwijanie na klik w wersji mobilnej */
  .has-dropdown.open .submenu { display: block; }
  .has-dropdown.open .arrow { transform: rotate(180deg); }
}
.menu-link.active {
    color: var(--zielony);
    border-bottom: 2px solid var(--zielony);
    cursor: default;
    pointer-events: none; /* Blokuje klikalność */
    font-weight: bold; /* Opcjonalnie, by mocniej wyróżnić */
}

/* -------GLOWNA CZESC STRONY  ------------------ */



/* --- 1. DEFINICJA ANIMACJI --- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0); /* Przesunięcie 20px w dół na starcie */
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0); /* Powrót do pierwotnej pozycji */
    }
}


/* --- HERO SECTION --- */
.hero-section {
    max-height: 460px;
    height: 460px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
	margin-bottom: 10px;
	
    width: 100%;
    position: relative;
	
}

.hero-section2 { /*naglowek strony głównej */
    max-height: 560px;
    height: 560px;
    
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
	margin-bottom: 10px;
	
    width: 100%;
    position: relative;
	
}

.hero-overlay {
    background: rgba(0, 0, 0, 0.5);
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    justify-content: center; align-items: center;
    padding: 10px;
}

/* Wariancje wielkości czcionek (clamp() dla responsywności) */
.hero-overlay h1 { font-size: clamp(20px, 5vw, 44px); margin: 0 0 20px 0; }
.hero-overlay p { font-size: clamp(18px, 3vw, 28px); margin: 0 0 30px 0; }

/* PRZYCISK (DOPASOWANY DO TVOJEGO ZIELONEGO) */
.hero-btn {
    padding: 8px 20px;
    background-color: var(--zielony);
    color: #000000;
    text-decoration: none;
    font-weight: normal;
    border-radius: 4px;
    transition: 0.3s;
}

/* --- 3. PRZYPISANIE ANIMACJI DO ELEMENTÓW W HERO --- */

/* Główny napis pojawia się najszybciej */
.hero-overlay h1 {
    animation: fadeInUp 1s ease-out forwards; /* Czas: 1s, forwards trzyma stan końcowy */
}

/* Podtytuł pojawia się z lekkim opóźnieniem */
.hero-overlay p {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.3s; /* Opóźnienie 0.3 sekundy */
    opacity: 0; /* Stan początkowy przed animacją */
}

/* Przycisk pojawia się jako ostatni */
.hero-overlay .hero-btn {
    animation: fadeInUp 1s ease-out forwards;
    animation-delay: 0.6s; /* Opóźnienie 0.6 sekundy */
    opacity: 0; /* Stan początkowy */
}

/* --- SEKCJE GŁÓWNE --- */
.page-section { padding-top: 30px; 
	font-size: 110%; 
    /* Dodanie cieniutkiego paska na dole każdej sekcji */
    border-bottom: 1px solid #bbbbbb; 
    margin-bottom: 30px; /* Odstęp, aby cień był widoczny pod sekcją */
    background-color: #fff;
    /* Delikatny, rozproszony cień skierowany w dół */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12); 
    position: relative;
    z-index: 1; /* Upewnia się, że cień wyświetla się nad sekcją poniżej */

}

/* Tytuły wypośrodkowane */
.section-header-center {
    max-width: 1100px;
    margin: 0 auto 60px auto;
    text-align: center;
    padding: 0 20px;
	line-height: 1.8; 
}

.section-title { font-size: 160%; color: var(--szary-ciemny); 

    margin-bottom: 25px; /* Zwiększony margines, by zrobić miejsce na linię */
    position: relative;
    display: inline-block; /* Ważne: pozwala wycentrować linię względem tekstu */

}
.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--czerwony);
    margin: 10px 0 0 0; /* Kluczowa zmiana: 0 zamiast auto przesuwa linię na początek */
}

.section-subtitle { color: #666; max-width: 900px; margin: 0 auto; font-weight: normal; font-size: 100%;}

/* UKŁAD 50/50 NA CAŁĄ SZEROKOŚĆ */
.split-container {
    display: flex;
    width: 100vw; /* Cała szerokość okna */
    min-height: 400px;
	
}

.split-container.reverse { flex-direction: row-reverse; }

.split-text-box {
    flex: 1; /* Zajmuje dokładnie 50% */
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
    background-color: #f2f0ed;
}

/* Wnętrze tekstu, aby nie był rozciągnięty do krawędzi */
.inner-content { max-width: 600px; line-height: 1.8; color: #444; }

.split-image-box {
    flex: 1; /* Zajmuje dokładnie 50% */
    background-size: cover;
    background-position: center;
}

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 992px) {
    .split-container, .split-container.reverse {
        flex-direction: column; /* Jeden pod drugim */
        width: 100%;
    }
    
    .split-text-box {
        padding: 40px 20px;
        text-align: center;
    }

    .split-image-box {
        width: 100%;
        /* Zamiast height: 250px używamy proporcji */
        aspect-ratio: 16 / 9; 
        min-height: 280px; /* Gwarantuje, że nie będzie wąskim paskiem */
        background-size: cover;
        background-position: center;
    }
}


/* SEKCJA ikonki i podpisy */
.process-section {
    padding: 60px 0;
    background-color: #ffffff;
}

.process-grid {
    display: grid;
    /* Twoja ulubiona linijka - inteligentna siatka */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px;
    margin-top: 40px;
}

.process-item {
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

.process-item:hover {
    transform: translateY(-10px); /* Delikatne uniesienie po najechaniu */
}

/* STYL DLA IKONY */
.process-icon {
    width: 100px;
    height: 100px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
   
}

.process-icon img {
    width: 100px;
    height: auto;
}

/* NAGŁÓWKI H3 (niepogrubione zgodnie z życzeniem) */
.process-item h3 {
    font-weight: normal;
    color: var(--szary-ciemny);
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.process-item p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #666;
}


/* wylistowanie oferowanych usług - 2 kolumny */
.services-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    margin-top: 40px;
}

.service-category {
    padding: 0px 20px 0px 20px;
    background: transparent; /* Usunęliśmy tło i linię dla lżejszego efektu */
    transition: 0.3s;
}

.service-category h3 {
    margin-bottom: 25px;
    color: var(--szary-ciemny);
    font-size: 1.5rem;
    font-weight: normal;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee; /* Subtelna linia pod tytułem kategorii */
}

.service-category ul {
    list-style: none;
    padding: 0;
}

.service-category ul li {
    font-size: 1.05rem;
    padding: 12px 0 12px 35px; /* Więcej miejsca po lewej na ptaszka */
    border-bottom: 1px solid #f9f9f9;
    position: relative;
    color: #444;
}

/* ZIELONY PTASZEK ZAMIAST KROPKI */
.service-category ul li::before {
    content: '✓'; /* Symbol ptaszka */
    color: var(--zielony);
    position: absolute;
    left: 0;
    font-weight: bold;
    font-size: 1.2rem;
    top: 50%;
    transform: translateY(-50%); /* Idealne centrowanie w pionie */
}

.service-category ul li:last-child {
    border-bottom: none;
}

/* Efekt najechania - subtelne podkreślenie tekstu */
.service-category ul li:hover {
    color: #000;
    padding-left: 40px; /* Delikatne przesunięcie przy najechaniu */
    transition: 0.2s;
}

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


/* formularz kontaktowy na podstronie KONTAKT  */

.contact-form {
    max-width: 600px;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--szary-ciemny);
}

.form-group input, 
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: inherit;
    font-size: 1rem;
}

.form-group input:focus, 
.form-group textarea:focus {
    border-color: var(--zielony);
    outline: none;
    box-shadow: 0 0 5px rgba(0, 128, 0, 0.2);
}

.submit-btn {
    background-color: var(--czerwony); /* Twoje czerwone podkreślenie jako kolor akcji */
    color: white;
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.1rem;
    transition: 0.3s;
    width: 100%;
}

.submit-btn:hover {
    filter: brightness(1.1); /* Delikatne rozjaśnienie przy najechaniu */
}

.success-msg {
    color: #28a745; /* Zielony sukces */
    background: #e9f7ef;
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
    border: 1px solid #28a745;
    text-align: center;
}

.error-msg {
    color: #dc3545; /* Czerwony błąd */
    background: #fdf2f2;
    padding: 15px;
    margin-top: 20px;
    border-radius: 4px;
    border: 1px solid #dc3545;
    text-align: center;
}
/* koniec formularza kontaktowego */



/* ---- KONIEC GLOWNEJ CZESCI STRONY ------- */

/* wspolpraca */
.box ul{line-height:2.2; padding-left:25px;}
.box li {     
			list-style: none;}

.box li::before {
            content: '✓';
            padding-right: 0.5rem;
            color: var(--zielony);
            font-weight: bold;		
        }



/* --- STOPKA --- */

.main-footer {
    width: 100%;
    
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* SEKCJA 1: Jasnobeżowoszara */
.footer-cta {
    background-color: #ffffff;
    padding: 60px 0;
    text-align: center;
}

.footer-cta h2 {
    color: #666666;
    font-size: 24px;
    margin-bottom: 15px;
}

.footer-cta p {
    color: #777777;
    font-size: 20px;
    
}

.footer-cta a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s;
}

/* SEKCJA 2: Ciemnoszara z 3 kolumnami */
.footer-info {
    background-color: #333;
    color: #eee;
    padding: 60px 0 20px 0;
}

.footer-flex {
    display: flex;
    justify-content: flex-start; /* Zmienione z space-between dla lepszej kontroli marginesem */
    gap: 40px;
    flex-wrap: wrap;
}

.footer-col {
    flex: 1;
    min-width: 250px;
    margin-bottom: 30px;
}

.footer-info h3 {
    font-size: 16px;
    margin-bottom: 25px;
    letter-spacing: 1.5px;
    color: var(--zielony);
    font-weight: bold;
}

.footer-col p {
    font-size: 14px;
    line-height: 1.8;
    color: #ccc;
}

/* --- POPRAWIONE LINKI ZE STRZAŁKAMI --- */

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-link-list li {
    margin-bottom: 12px;
}

.footer-link-list a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
    display: inline-flex; /* Zmienione na inline-flex dla lepszej kontroli */
    align-items: center;
    gap: 10px; /* Stały odstęp między strzałką a tekstem */
}

/* TWORZENIE MAŁEJ STRZAŁECZKI */
.footer-link-list a::before {
    content: '›'; 
    color: #666; 
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    transition: all 0.3s ease;
    /* Usunęliśmy position: absolute, strzałka jest teraz naturalnym elementem przed tekstem */
}

/* EFEKT NA NAJECHANIE */
.footer-link-list a:hover {
    color: var(--zielony) !important;
    transform: translateX(8px); /* Cały zestaw (strzałka + tekst) przesuwa się w prawo */
}

.footer-link-list a:hover::before {
    color: var(--zielony);
    /* Strzałka już nie nachodzi na tekst, bo gap: 10px ją trzyma w ryzach */
}

/* RESPONSYWNOŚĆ */
@media (max-width: 768px) {
    .footer-link-list a {
        justify-content: center;
    }
}

/* DOLNY PASEK */
.footer-bottom {
    border-top: 1px solid #444;
    margin-top: 30px;
    padding-top: 20px;
    text-align: center;
    font-size: 12px;
    color: #777;
}
.link_stopka { color: #ffffff; }
.link_stopka:hover { color:var(--zielony); }

/* RESPONSYWNOŚĆ */
/* Responsywność dla mobile - resetujemy margines, by wszystko było równo */
@media (max-width: 992px) {
    .footer-about {
        margin-right: 0;
    }
    .footer-flex {
        gap: 30px;
    }
}

/* Powiększony odstęp po lewej kolumnie tylko na komputerach */
@media (min-width: 993px) {
    .footer-about {
        flex: 1.5; /* Pierwsza kolumna może być nieco szersza */
        margin-right: 200px; /* To tworzy dużą pustą przestrzeń między O NAS a resztą */
    }
}

@media (max-width: 768px) {
    .footer-flex {
        flex-direction: column;
        text-align: center;
    }
    .footer-col p {
        margin: 0 auto;
    }
    .footer-cta h2 { font-size: 20px; }
}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.95);display:none;align-items:center;justify-content:center;flex-direction:column;z-index:2000;transition:.4s}
.lightbox.active{display:flex}
.lightbox img{max-width:85%;max-height:75vh;border-radius:16px;animation:zoom .5s ease}
@keyframes zoom{from{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}
.lb-controls{position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;padding:0 60px;transform:translateY(-50%)}
.lb-arrow{font-size:3.8rem;color:#fff;cursor:pointer;transition:.3s}
.lb-arrow:hover{color:var(--accent)}
.lb-close{position:absolute;top:30px;right:50px;font-size:2.2rem;color:#fff;cursor:pointer}
.lb-close:hover{color:var(--accent)}
.lb-thumbs{margin-top:30px;display:flex;gap:15px;overflow-x:auto;padding:12px}
.lb-thumbs img{height:80px;border-radius:10px;cursor:pointer;opacity:.5;transition:.3s}
.lb-thumbs img.active{opacity:1;transform:scale(1.1);border:2px solid var(--red)}

@media(max-width:900px){#about .about-container{grid-template-columns:1fr} header h1{font-size:3.5rem} header h2{font-size:1.6rem} header p{font-size:1rem}}


/* REALIZACJE */
#realizacje{background:var(--light); padding-left: 100px; padding-right: 100px; padding-bottom: 60px;}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;}
.gallery img{width:100%;border-radius:16px;cursor:pointer;transition:transform .5s ease, box-shadow .5s ease;box-shadow:0 10px 30px rgba(0,0,0,.08); }
.gallery img:hover{transform:scale(1.07);box-shadow:0 25px 60px rgba(0,0,0,.15)}