/* ================= ZMIENNE KOLORY ================= */
:root { /* :root = najwyższy poziom dokumentu (html), tu definiujemy zmienne globalne */
    --primary-color: #1f1f1f;        /* Tworzy zmienną koloru głównego (ciemne tło sekcji itp.) */
    --primary-color-hover: #333435;  /* Tworzy zmienną jaśniejszego koloru do efektu hover */
    --text-color: #ffffff;           /* Tworzy zmienną podstawowego koloru tekstu */
    --text-color-muted: #94a3b8;     /* Tworzy zmienną przygaszonego koloru tekstu */
    --secondary-color: #1a1a1a;      /* Tworzy zmienną tła kart / boxów */
    --branding-color: #22c55e;       /* Tworzy zmienną koloru akcentowego (branding) */
}
/* ================= GLOBAL RESET ================= */
* { /* * = selektor uniwersalny (wszystkie elementy) */
    margin: 0;              /* Ustawia margines zewnętrzny każdego elementu na 0 */
    padding: 0;             /* Ustawia padding (odstęp wewnętrzny) każdego elementu na 0 */
    box-sizing: border-box; /* Sprawia, że width i height zawierają padding i border */
    font-family: Arial, sans-serif; /* Ustawia domyślną czcionkę */
}
body { /* body = całe ciało strony */
    background: var(--primary-color-hover); /* Ustawia kolor tła strony */
    color: var(--text-color); /* Ustawia domyślny kolor tekstu */
}
/* ================= NAVBAR ================= */
.navbar { /* Klasa navbar */
    display: flex; /* Włącza flexbox (ustawia elementy w jednej linii) */
    align-items: center; /* Wyrównuje elementy w pionie do środka */
    padding: 15px 40px; /* Ustawia padding: 15px góra/dół, 40px lewo/prawo */
    background: var(--secondary-color); /* Ustawia półprzezroczyste tło (rgba = red,green,blue,alpha) */
    border-radius: 30px; /* Zaokrągla rogi elementu */
    margin: 20px auto; /* 20px góra/dół, auto wyśrodkowuje poziomo */
    width: 90%; /* Szerokość 90% kontenera */
    max-width: 1200px; /* Maksymalna szerokość 1200px */
    position: fixed; /* Przykleja element do ekranu (nie scrolluje się) */
    top: 20px; /* Odległość 20px od góry */
    left: 0; /* Wyrównanie do lewej */
    right: 0; /* Wyrównanie do prawej */
    z-index: 1000; /* Ustawia warstwę nad innymi elementami */
    box-shadow: 0 10px 20px rgba(0,0,0,0.3); /* Dodaje cień (x,y,blur,color) */
}
.navbar .icon { /* Ikona w navbar */
    font-size: 30px; /* Ustawia rozmiar czcionki (ikony) */
    color: var(--branding-color); /* Ustawia kolor ikony */
    margin-right: 10px; /* Dodaje odstęp z prawej strony */
}
.logo {
    font-size: 30px; /* Ustawia wielkość tekstu logo */
    font-weight: bold; /* Pogrubia tekst */
    letter-spacing: 1px; /* Ustawia odstęp między literami */
    color: var(--branding-color); /* Ustawia kolor logo */
    margin-right: 40px; /* Odstęp z prawej strony */
}
.nav-links {
    position: relative; /* Pozwala pozycjonować elementy względem niego */
    display: flex; /* Ustawia elementy w jednej linii */
    list-style: none; /* Usuwa kropki z listy */
    gap: 50px; /* Ustawia odstęp między elementami flex */
    flex: 1; /* Pozwala elementowi rozszerzyć się i zająć wolne miejsce */
    justify-content: center; /* Wyśrodkowuje elementy poziomo */
}
.nav-links a {
    text-decoration: none; /* Usuwa podkreślenie linku */
    color: var(--text-color); /* Ustawia kolor tekstu */
    font-weight: bold; /* Ustawia grubość czcionki */
    position: relative; /* Potrzebne do ::after */
    transition: 0.3s; /* Dodaje animację trwającą 0.3s */
}
.nav-links a::after { /* Pseudo-element tworzony po linku */
    content: ''; /* Tworzy pusty element */
    position: absolute; /* Ustawia pozycję absolutną względem linku */
    left: 0; /* Start od lewej */
    bottom: -5px; /* 5px poniżej tekstu */
    width: 0; /* Początkowa szerokość 0 */
    height: 3px; /* Wysokość linii 3px */
    background: var(--branding-color); /* Kolor linii */
    transition: width 0.3s; /* Animuje zmianę szerokości */
}
.nav-links a:hover::after {
    width: 100%; /* Po hover szerokość staje się 100% */
}
.btn-nav {
    background: linear-gradient(90deg, var(--branding-color), var(--primary-color)); /* Tworzy gradient */
    background-size: 200% 100%; /* Ustawia większe tło dla animacji */
    color: var(--text-color); /* Kolor tekstu */
    padding: 15px 30px; /* Odstęp wewnętrzny */
    border-radius: 8px; /* Zaokrąglenie rogów */
    text-decoration: none; /* Usunięcie podkreślenia */
    font-weight: bold; /* Pogrubienie */
    transition: all 0.3s ease; /* Animacja wszystkich zmian */
}
.btn-nav:hover {
    background-position: 100% 0; /* Przesuwa gradient w prawo */
}
/* RESPONSIVE */
@media (max-width: 768px) { /* Działa gdy ekran ma max 768px */
    .nav-links, .btn-nav {
        display: none; /* Ukrywa elementy */
    }
}
/* ================= HERO ================= */
.hero {
    height: 90vh; /* 90% wysokości okna przeglądarki */
    display: flex; /* Włącza flexbox */
    justify-content: center; /* Wyśrodkowuje poziomo */
    align-items: center; /* Wyśrodkowuje pionowo */
    text-align: center; /* Wyśrodkowuje tekst */
    background: url('homepagebackgroundimage.png') center/cover no-repeat; /* Ustawia obraz tła */
    position: relative; /* Potrzebne do overlay */
}
.hero::after {
    content: ''; /* Tworzy pusty element */
    position: absolute; /* Pozycja absolutna */
    top:0; left:0; right:0; bottom:0; /* Rozciąga na cały hero */
    background: rgba(0,0,0,0.5); /* Przyciemnia obraz */
    z-index:0; /* Ustawia warstwę */
}
.hero-content {
    position: relative; /* Ustawia warstwę nad overlay */
    width: 100%; /* Pełna szerokość */
    height: 200px; /* Stała wysokość */
    overflow: hidden; /* Ukrywa elementy wychodzące poza obszar */
    text-align: center; /* Wyśrodkowanie tekstu */
}
.slide {
    position: absolute; /* Nakłada elementy na siebie */
    top: 0; left: 0; /* Ustawia w lewym górnym rogu */
    width: 100%; /* Pełna szerokość */
    opacity: 0; /* Ustawia przezroczystość 0 */
    transform: translateY(20px); /* Przesuwa element w dół */
    transition: all 1s ease; /* Animuje wszystkie zmiany */
    color: var(--text-color); /* Kolor tekstu */
}
.slide.active {
    opacity: 1; /* Ustawia pełną widoczność */
    transform: translateY(0); /* Cofnięcie przesunięcia */
    z-index: 1; /* Warstwa nad innymi */
}
/* ================= HERO TEKST ================= */
.hero h1 {
    font-size: 48px; /* Ustawia wielkość czcionki nagłówka */
    margin-bottom: 20px; /* Dodaje odstęp pod nagłówkiem */
    color: var(--text-color); /* Ustawia kolor tekstu */
}
.hero p {
    font-size: 20px; /* Ustawia wielkość tekstu opisu */
    margin-bottom: 30px; /* Dodaje odstęp pod opisem */
    color: var(--text-color-muted); /* Ustawia przygaszony kolor tekstu */
}
/* PROJECTS */
.projects {
display: flex;
flex-direction: column;
gap: 60px; /* odstęp między boxami */
padding: 40px;
background: var(--primary-color); 
}
.project {
display: flex;
align-items: center;
gap: 30px;
background: var(--secondary-color);
border-radius: 15px;
max-width: 50%;
box-shadow: 0 8px 20px rgba(0,0,0,0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.project:hover {
transform: translateY(-5px);
background: var(--primary-color-hover);
box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}



.project-left {
    flex-direction: row;
}
.project-right {
    text-align: right;
    flex-direction: row-reverse;
    align-self: flex-end;
}
.project-content {
flex: 1;
padding: 15px;
}
.project-content h2 {
margin: 0 0 15px;
font-size: 24px;
color: var(--text-color);
}
.project-content p {
margin: 0;
font-size: 16px;
color: var(--text-color-muted);
line-height: 1.5;
}
.project-image {
width: 500px;
height: 300px;
object-fit: cover;
transition: all 0.3s ease;
}

.modal {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  justify-content: center; align-items: center;
  backdrop-filter: blur(6px);
}

.modal-box {
  width: 70%; height: 60%;
  background: var(--secondary-color);
  display: flex; border-radius: 20px; overflow: hidden;
  position: relative;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

.modal-left {
  width: 60%; position: relative;
  background: #000;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
}

.slider {
  position: relative; width: 100%; height: 100%;
  overflow: hidden;
}

.slides {
  display: flex; width: 100%; height: 100%;
  transition: transform 0.4s ease;
}

.slides img {
  width: 100%; height: 100%; object-fit: cover;
}

/* strzałki */
.arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  border: none; color: white;
  font-size: 28px; padding: 10px 15px;
  cursor: pointer; border-radius: 12px;
  z-index: 10;
}

.arrow:hover { background: var(--branding-color); color: #000; }

.arrow.left { left: 10px; }
.arrow.right { right: 10px; }

/* kropki */
.dots { display: flex; justify-content: center; gap: 10px; padding: 10px; }
.dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--text-color-muted); cursor: pointer; }
.dots .active { background: var(--branding-color); }

/* prawa strona */
.modal-right {
  width: 40%; padding: 25px;
  background: linear-gradient(145deg, var(--primary-color), var(--secondary-color));
  color: var(--text-color); display: flex; flex-direction: column;
  justify-content: flex-start; /* od góry */
}

.modal-right h2 { margin-bottom: 15px; font-size: 24px; }
.modal-right p { color: var(--text-color-muted); line-height: 1.5; }

/* X */
.close {
  position: absolute; top: 15px; right: 15px;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; justify-content: center; align-items: center;
  background: var(--primary-color); color: var(--text-color);
  font-size: 20px; cursor: pointer; z-index: 11;
  transition: 0.3s;
}
.close:hover { background: var(--branding-color); color: #000; }

/* KROPKI */
.dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px;
}

.dots span {
  width: 10px;
  height: 10px;
  background: var(--text-color-muted);
  border-radius: 50%;
  cursor: pointer;
}

.dots .active {
  background: var(--branding-color);
}

.btn-more {
  margin-top: 15px;
  padding: 12px 25px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: bold;
  color: var(--text-color);

  background: linear-gradient(90deg, var(--branding-color), var(--primary-color));
  background-size: 200% 100%;

  display: inline-flex;           /* flex w poziomie */
  align-items: center;            /* wyśrodkowanie pionowe */
  justify-content: center;        /* wyśrodkowanie poziome */
  gap: 8px;                       /* odstęp między ikoną a tekstem */

  transition: all 0.3s ease;
}

.btn-more:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* Responsywność */
@media (max-width: 768px) {
.project {
    flex-direction: column !important;
}

.project-image {
    width: 100%;
    height: auto;
}

.project-content {
    padding: 20px;
}
}

.service-info {
    padding: 80px 60px; 
    text-align: center; 
    background: var(--secondary-color); 
    margin: 0 auto;
}

.service-texts {
    padding: 40px 60px; 
    text-align: center; 
    background: var(--secondary-color); 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 300px;
}

.service-info h2 {
    font-size: 36px; 
    margin-bottom: 40px; 
    color: var(--text-color); 
}

.service-info h3 {
    font-size: 30px; 
    color: var(--branding-color); 
}

.service-info p {
    font-size: 20px; 
    font-weight: bold;
    color: var(--text-color-muted); 
    line-height: 1.5;
}

/* ================= SERVICES / PRODUCTS ================= */
.services {
    padding: 80px 60px; 
    /* 80px góra/dół, 60px lewo/prawo */
    text-align: center; 
    /* Wyśrodkowuje tekst */
    background: var(--primary-color); 
    /* Ustawia tło sekcji */
}
.services h2 {
    font-size: 36px; 
    /* Ustawia wielkość nagłówka */
    margin-bottom: 50px; 
    /* Dodaje odstęp pod nagłówkiem */
    color: var(--text-color); 
    /* Ustawia kolor tekstu */
}
.cards {
    display: flex; 
    /* Włącza flexbox */
    justify-content: center; 
    /* Wyśrodkowuje karty poziomo */
    gap: 30px; 
    /* Ustawia odstęp między kartami */
    flex-wrap: wrap; 
    /* Pozwala kartom przechodzić do nowej linii */
}
.card {
    background: var(--secondary-color); 
    /* Ustawia tło karty */
    padding: 30px; 
    /* Odstęp wewnętrzny */
    border-radius: 12px; 
    /* Zaokrągla rogi */
    width: 300px; 
    /* Ustawia stałą szerokość */
    transition: 0.3s; 
    /* Animuje zmiany przez 0.3 sekundy */
}
.card:hover {
    transform: translateY(-10px) translateX(10px); 
    /* Przesuwa kartę w górę i w prawo */
}
.card .icon i {
    font-size: 40px; 
    /* Ustawia wielkość ikony */
    margin-bottom: 10px; 
    /* Odstęp pod ikoną */
    color: var(--branding-color); 
    /* Ustawia kolor ikony */
}
.card h3 {
    color: var(--text-color); 
    /* Kolor nagłówka */
    margin-bottom: 15px; 
    /* Odstęp pod nagłówkiem */
}
.card p {
    color: var(--text-color-muted); 
    /* Przygaszony kolor opisu */
}
/* ================= CONTACT ================= */
.contact {
    padding: 60px; 
    /* Odstęp wewnętrzny sekcji */
    text-align: center; 
    /* Wyśrodkowanie tekstu */
    background: var(--primary-color); 
    /* Tło sekcji */
}
.contact h2 {
    color: var(--text-color); 
    /* Kolor nagłówka */
    margin-bottom: 10px; 
    /* Odstęp pod nagłówkiem */
}
.contact p {
    color: var(--text-color-muted); 
    /* Przygaszony kolor tekstu */
    line-height: 1.2;
}
.contact .icon i {
    font-size: 30px; 
    /* Wielkość ikony */
    margin-bottom: 10px; 
    /* Odstęp pod ikoną */
    color: var(--branding-color); 
    /* Kolor ikony */
}
/* ================= BRANDING TEXT ================= */
.branding {
    color: var(--branding-color); 
    /* Ustawia kolor brandingowy */
    font-weight: bold; 
    /* Pogrubia tekst */
}
/* ================= EFEKTY SCROLLA ================= */
.fade-in {
    opacity: 0; 
    /* Element jest niewidoczny */
    transform: translateY(30px); 
    /* Element jest przesunięty w dół */
    transition: all 0.8s ease-out; 
    /* Animacja pojawiania się */
}
.fade-in.show {
    opacity: 1; 
    /* Element staje się widoczny */
    transform: translateY(0); 
    /* Element wraca na swoje miejsce */
}

/* ================ CONTACT ================ */

/* Sekcja kontaktu z tłem */
.contact-section {
  height: 100vh; /* zajmuje prawie cały ekran */
  display: flex;
  justify-content: center; /* wycentrowanie poziome */
  align-items: center;     /* wycentrowanie pionowe */
  background: url('homepagebackgroundimage.png') center/cover no-repeat; /* tło jak w hero */
  position: relative;
}

/* Kontener całej sekcji */
.contact-boxes {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(145deg, var(--primary-color), var(--secondary-color)); /* gradient dla nowoczesnego wyglądu */
  padding: 50px 40px;
  border-radius: 25px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.3);
  width: 420px;
  margin: 150px auto; /* wycentrowany, ale trochę niżej */
  text-align: center;
  color: var(--text-color);
}

/* Nagłówek dużego boxa */
.contact-boxes h2 {
  font-size: 30px;
  margin-bottom: 10px;
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
}

.contact-boxes p {
    font-size: 15px;
    color: var(--text-color-muted);
    margin-bottom: 20px;
    text-align: center;
    line-height: 1.2;
}

/* Małe boxy kontaktowe */
.contact-box {
  display: flex;
  align-items: center;
  width: 100%; /* dopasowane do dużego boxa */
  background: var(--secondary-color);
  padding: 18px 25px;
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  transition: all 0.3s ease;
}

.contact-box:hover {
  transform: translateY(-5px) scale(1.02);
}

/* Ikona */
.contact-box .icon {
  font-size: 24px;
  color: var(--branding-color);
  margin-right: 20px;
}

/* Tekst */
.contact-box p {
  margin: 0;
  font-size: 16px;
  color: var(--text-color-muted);
  text-align: left;
}

/* Responsywność na małe ekrany */
@media (max-width: 500px) {
  .contact-boxes {
    width: 90%;
    padding: 30px 20px;
    margin: 100px auto;
  }
}