html{
scroll-behavior:smooth;
}

section{
scroll-margin-top:80px;
}


body {
    font-family: "Montserrat", sans-serif;
    color:#222;
    background:#f4fbf6;
    line-height:1.6;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.hero {
    height: 900px;

    background:
        linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)),
        url(1000001299.jpg);

    background-size: cover;
    background-position: center;

    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top:-1px;
    color: white;
}

.hero-container{
    max-width:900px;
    width:100%;
    padding:0 60px;

    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
}


.hero-container h1 { /* glowny naglowek */
    font-size: 60px;
    margin-bottom: 25px;
    line-height: 1.1;
    font-weight: 800;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    opacity:0;
    transform:translateY(40px);
    animation:fadeUp 1s ease forwards;
    animation-delay:0.3s;
}

.hero-container p {
    font-size: 22px;
    line-height: 1.7;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    max-width: 700px;
    opacity:0; 
    transform:translateY(40px);
    animation:fadeUp 1s ease forwards;
    animation-delay:0.6s;
}

@keyframes fadeUp{
to{
opacity:1;
transform:translateY(0);
}
}

.offers {                     
    padding: 100px 20px;
    text-align: center;
    background: #fafafa;
}

.offers h2 {
    font-size:48px;
    font-weight:800;
    margin-bottom:70px;
}

.services-grid {               /* tu sa odleglosci i wysokosci ukladu zdj */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1600px;
    margin: 0 auto;
}

.service-card{
    background:rgb(223,250,232);
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
    transition:transform 0.3s, box-shadow 0.3s;
}

.service-card:hover{
    transform:translateY(-10px) scale(1.02);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.service-card img {       /* wyskosc i szerokosc zdjecia kart*/
    width: 100%;
    height: 260px; 
    object-fit: cover;
}

.service-card h3 {
    font-size: 20px;
    margin: 15px;
}

.service-card p {           
    font-size: 15px;
    margin: 0 15px 20px 15px;
    line-height: 1.5;
}





/* pierw sekcja o nas 
background color lekko zielony
opisik
*/
.information {
    background: #e8f5e9;
    padding: 200px 20px;       /* tu zmieniam szerokosc tego o nas*/
    background: linear-gradient(to bottom, #e8f5e9, #dff8e7);
    display: flex;
    align-items: center;
}

.information-container {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

.information h2 {
    font-size:48px;
    font-weight:800;
    margin-bottom:30px;
}

.information p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
    color: #333;
}






.gallery {               /* galeria wykonanych prac */
    padding: 100px 20px;
    text-align: center;
    background: #fafafa;
}

.gallery h2 {
    font-size:48px;
    font-weight:800;
    margin-bottom:70px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;

    max-height: 600px;
    overflow: hidden;
    transition: max-height 0.6s ease;
    overflow: hidden;
}

.gallery-grid.expanded {
    max-height: 2000px;
}


.gallery-item:hover img{
    transform: scale(1.08);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.gallery-item {
    border-radius: 10px;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}


.hidden {
    display: none;
}

button {
    margin-top: 40px;
    padding: 12px 30px;
    border: none;
    background-color: rgb(223, 250, 232); /* jasnozielony */
    color: #333; /* ciemny tekst dla kontrastu */
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

button:hover {
    background-color: #c9f0c0; /* ciut ciemniejszy zielony przy hover */
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.15);
}

.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.9);

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

    opacity: 0;
    pointer-events: none;
    transition: 0.4s;
    z-index:9999;
    backdrop-filter: blur(5px);
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    transform: scale(0.8);
    transition: 0.4s;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox.active img {
    transform: scale(1);
}

/* sekcja dlaczego warto nas wybrać */

.why-us{
    padding:120px 20px;
    background:linear-gradient(to bottom,#dff8e7,#c8f0d3);
    text-align:center;
}

.why-us h2{
    font-size:48px;
    font-weight:800;
    margin-bottom:70px;
}

.why-container{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:50px;
max-width:1400px;
margin:0 auto;
}

.why-card{
    background:white;
    padding:40px 30px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:all 0.3s ease;
}

.why-card:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,0.15);
}

.why-icon{
width:90px;
height:90px;
margin:0 auto 25px auto;

background:#e8f5e9;
border-radius:50%;

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

overflow:hidden;
}

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

.why-card h3{
    font-size:22px;
    margin-bottom:15px;
}

.why-card p{
    font-size:16px;
    line-height:1.6;
    color:#444;
}

.contact{
padding:120px 20px;
background:#f4fbf6;
text-align:center;
}

.contact h2{
font-size:48px;
font-weight:800;
margin-bottom:60px;
}

.contact-container{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
max-width:1200px;
margin:0 auto;
align-items:center;
}

.contact-info{
text-align:left;
}

.contact-info h3{
font-size:24px;
margin-bottom:20px;
}

.contact-info p{
font-size:16px;
margin-bottom:10px;
color:#444;
}

.contact-form form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:14px;
border:1px solid #ddd;
border-radius:8px;
font-size:14px;
font-family:"Montserrat",sans-serif;
transition:0.2s;
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:#7edc9a;
outline:none;
}

.contact-form textarea{
min-height:130px;
resize:vertical;
}

.contact-form button{
margin-top:10px;
padding:14px;
border:none;
background:#c8f0d3;
font-weight:600;
cursor:pointer;
border-radius:8px;
transition:0.3s;
}

.contact-form button:hover{
background:#aee5be;
transform:translateY(-2px);
}








/* stopka */
.footer{
background:#1f1f1f;
color:rgb(255, 255, 255);
padding:60px 20px;
}

.footer-container{
display:flex;
justify-content:space-between;
max-width:1200px;
margin:0 auto;
flex-wrap:wrap;
gap:40px;
}

.footer a{
color:#c8f0d3;
text-decoration:none;
}

.footer a:hover{
text-decoration:underline;
}

.copyright{
text-align:center;
margin-top:40px;
font-size:14px;
color:#aaa;
}

.footer p{
margin-bottom:8px;
}


/* NAVBAR */
.navbar{
position:fixed;
top:0;
left:0;
width:100%;
height:80px; /* KLUCZOWE */
background:rgba(200,240,211,0.95);
backdrop-filter: blur(10px);
transition: all 0.3s ease;
z-index:1000;
will-change: height, background;
display:flex;
align-items:center;
}

/* PO SCROLLU */
.navbar.scrolled{
height:60px;
background:rgba(180,235,200,0.95);
}

/* zmniejszenie logo */
.navbar.scrolled .logo img{
height:100px;
}

/* zmniejszenie odstępów */
.navbar.scrolled .nav-container{
padding:10px 40px;
}

.navbar.scrolled .logo-text{
font-size:18px;
}

.nav-container{
max-width:1600px;
margin:0 auto;
padding:0 40px 0 10px; /* mniej z lewej */
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
}

/* logo */
.logo img{
height:150px; /* większe */
transition:0.3s;
}

.logo{
display:flex;
align-items:center;
gap:12px;
margin-left:10px;
}




/* menu */
.nav-links{
list-style:none;
display:flex;
gap:40px;
margin-left:auto;
}

.nav-links a{
text-decoration:none;
color:#2d2d2d;
font-weight:600;
font-size:15px; /* lekko mniejsze */
transition:0.3s;
}

.nav-links a:hover{
color:#2f8f4e;
}

.nav-links a{
position:relative;
}

.nav-links a::after{
content:"";
position:absolute;
bottom:-5px;
left:0;
width:0;
height:2px;
background:#2f8f4e;
transition:0.3s;
}

.nav-links a:hover::after{
width:100%;
}

#scroll-trigger{
height: 1px;
}

.navbar-spacer{
height:80px;
transition: height 0.3s ease;
background:linear-gradient(rgba(200,240,211,0.95), rgba(200,240,211,0));
}

.navbar.scrolled + .navbar-spacer{
height:60px;
}








/* ===== RESPONSYWNOŚĆ DLA TELEFONÓW ===== */
@media (max-width: 500px) {

  /* HERO */
  .hero {
    height: 600px;
  }
  
  .hero-container {
    padding: 0 20px;
  }
  .hero-container h1 {
    font-size: 34px;
  }
  .hero-container p {
    font-size: 18px;
    max-width: 100%;
  }

  /* OFERTY */
  .services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-card img {
    height: 200px;
  }
  .service-card h3 {
    font-size: 18px;
  }
  .service-card p {
    font-size: 14px;
  }

  /* SEKCJA O NAS */
  .information {
    flex-direction: column;
    padding: 80px 20px;
  }
  .information h2 {
    font-size: 32px;
  }
  .information p {
    font-size: 16px;
  }

  /* GALERIA */
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .gallery-item img {
    height: 180px;
  }
  button#showMore {
    width: 100%;
    font-size: 16px;
  }

  /* DLACZEGO WARTO NAS WYBRAĆ */
  .why-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .why-card {
    padding: 25px 15px;
  }
  .why-card h3 {
    font-size: 20px;
  }
  .why-card p {
    font-size: 14px;
  }
  .why-icon {
    width: 70px;
    height: 70px;
  }

  /* KONTAKT */
  .contact-container {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .contact h2 {
    font-size: 32px;
  }
  .contact-info h3 {
    font-size: 20px;
  }
  .contact-info p {
    font-size: 14px;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    font-size: 14px;
  }
  .contact-form textarea {
    min-height: 100px;
  }

  /* STOPKA */
  .footer-container {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }
  .footer h3 {
    font-size: 18px;
  }
  .footer p {
    font-size: 14px;
  }

  /* NAVBAR */
  .nav-links {
    gap: 15px; /* zmniejszamy odstęp, ale nie zmieniamy kierunku flex */
    flex-wrap: wrap; /* pozwala elementom przejść do nowego wiersza, jeśli brak miejsca */
    justify-content: center; /* centrowanie linków */
}
  }
  .nav-links a {
    font-size: 14px;
  }
  .navbar.scrolled .nav-container {
    padding: 10px 20px;
  }

  @media (max-width: 500px) {

  .navbar{
    height:80px; /* mniejszy navbar */
  }

  .navbar.scrolled{
    height:70px;
  }

  .logo img{
    height:60px; /* DUŻO mniejsze logo */
  }

  .navbar.scrolled .logo img{
    height:50px;
  }

  .logo{
    margin-left:-10px; /* mniej przesunięte */
  }

  .logo-text{
    font-size:16px;
  }

  .navbar-spacer{
    height:80px;
  }

  .navbar.scrolled + .navbar-spacer{
    height:70px;
  }

  section{
    scroll-margin-top:90px;
  }

}