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

:root {
    --kolor-podstawowy: #2c3e50;
    --kolor-akcentu: #3498db;
    --kolor-sukcesu: #27ae60;
    --kolor-tla: #ffffff;
    --kolor-tekstu: #2c3e50;
    --kolor-jasny: #ecf0f1;
    --kolor-cienia: rgba(0, 0, 0, 0.1);
    --czcionka-glowna: 'Arial', 'Helvetica', sans-serif;
    --promien-zaokraglenia: 8px;
    --rozmiar-bazowy: 16px;
}

body {
  font-family: var(--czcionka-glowna); 
  font-size: var(--rozmiar-bazowy); 
   line-height: 1.6; 
  color: var(--kolor-tekstu); 
  background-color: var(--kolor-tla);
}

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

.energia-naglowek {
  background: var(--kolor-tla);
  box-shadow: 0 2px 10px var(--kolor-cienia);
  position:   fixed;
  top: 0;
   left: 0;
    right: 0;
   z-index: 1000;
                    padding: 15px 0; 

}

.nawigacja-glowna {
    display: flex;
    justify-content: space-between;
	align-items: center;
   position: relative;
}

.marka-logo img {
	 height  : 50px;
   width: auto;
}

.nawigacja-przelacznik {
   display: none;
}


.etykieta-przelacznika {


    display:      none; 
	   cursor    :    pointer; 
	  padding: 15px; 
	   z-index: 2;
}

.hamburger-ikona {
          width: 30px;
  height: 3px;
  background: var(--kolor-podstawowy);
   position: relative;
    transition: all 0.3s ease;
} 

.hamburger-ikona:before,
.hamburger-ikona:after {
  content: '';
   position:        absolute;
  width: 30px;
   height: 3px;
  background: var(--kolor-podstawowy);
   transition :      all 0.3s ease; 
	
}

.hamburger-ikona:before {
 top: -8px;
}

.hamburger-ikona:after {
  top: 8px;
}

.otoczka-nawigacji {
      display: flex;
    align-items: center;} 

.lista-nawigacyjna {
       display: flex;
  list-style   :       none;
   gap: 30px;
   margin: 0;
	
}

.link-nawigacyjny {
  color: var(--kolor-tekstu);
   text-decoration: none;
     font-size: 16px;
  font-weight: 500;
    transition: color 0.3s ease;
                    padding: 10px 15px;
  border-radius: var(--promien-zaokraglenia);
}

.link-nawigacyjny:hover {
  color: var(--kolor-akcentu);
  background-color: var(--kolor-jasny);
}@media screen and (max-width: 768px) {
    .etykieta-przelacznika {
        display: block;
    }

    .otoczka-nawigacji {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background: var(--kolor-tla);
        transition: all 0.3s ease;
        padding-top: 80px;
        flex-direction: column;
        align-items: center;
    }

    .lista-nawigacyjna {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 0;
    }

    .element-nawigacji {
        width: 100%;
        text-align: center;
        margin: 15px 0;
    }

    .link-nawigacyjny {
        display: inline-block;
        padding: 15px 20px;
        font-size: 18px;
        width: 100%;
    }

    .nawigacja-przelacznik:checked ~ .otoczka-nawigacji {
        left: 0;
    }

    .nawigacja-przelacznik:checked ~ .etykieta-przelacznika .hamburger-ikona {
        background: transparent;
    }

    .nawigacja-przelacznik:checked ~ .etykieta-przelacznika .hamburger-ikona:before {
        transform: rotate(45deg);
        top: 0;
    }

    .nawigacja-przelacznik:checked ~ .etykieta-przelacznika .hamburger-ikona:after {
        transform: rotate(-45deg);
        top: 0;
    }
}section {
    padding:        80px 0;
}

.sekcja-bohater {
  background: linear-gradient(135deg, var(--kolor-jasny) 0%, #fff 100%);
  padding: 120px 0 80px;
    margin-top: 80px;
}

.tresc-bohatera {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
  gap: 60px;
}

.naglowek-glowny {
  font-size: 3.5rem;
    font-weight: 700;
  color: var(--kolor-podstawowy);
    margin-bottom: 20px;
  line-height: 1.2;
}

.podtytul-bohatera {
                    font-size: 1.25rem; 
	  line-height: 1.6; 
	   color: #555; 
	    margin-bottom: 30px; 

}

.akcje-bohatera {
    display: flex;
   gap: 20px;
   align-items: center;
}

.obraz-bohatera img {
   width: 100%;
   height  :  auto;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 10px 30px var(--kolor-cienia);
}

.przycisk-podstawowy,
.przycisk-wtorny,
.przycisk-cta,
.przycisk-wyslij {
  padding: 15px 30px;
     border-radius: var(--promien-zaokraglenia);
      text-decoration: none;
     font-weight: 600;
     font-size: 16px;
       transition: all 0.3s ease;
       display: inline-block;
     cursor: pointer;
      border: none; 
	
}

.przycisk-podstawowy,
.przycisk-cta,
.przycisk-wyslij {
  background: var(--kolor-akcentu);
    color: white;
}



.przycisk-podstawowy:hover,
.przycisk-cta:hover,
.przycisk-wyslij:hover {
	background: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(52, 152, 219, 0.3);
}

.przycisk-wtorny {
	   background: transparent;
  color: var(--kolor-podstawowy);
  border: 2px solid var(--kolor-podstawowy);
     }

.przycisk-wtorny:hover		{
  background: var(--kolor-podstawowy);
  color: white;
  transform: translateY(-2px);
}

.naglowek-sekcji {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--kolor-podstawowy);
    text-align: center;
   margin-bottom: 50px;
}

.sekcja-uslugi {
  background: var(--kolor-tla);
}



.siatka-uslug  {

   display     : grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; 
	
}

.karta-uslugi {
  background: white;
   padding: 30px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 5px 20px var(--kolor-cienia);
  text-align: center;
    transition: transform 0.3s ease;
}

.karta-uslugi:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}


.karta-uslugi img {
  width: 100%;
   height: 200px;
  object-fit: cover;
  border-radius: var(--promien-zaokraglenia);
  margin-bottom: 20px;
}

.karta-uslugi h3 {
  font-size: 1.5rem;
  color: var(--kolor-podstawowy);
   margin-bottom: 15px;
   font-weight: 600;
}

.sekcja-o-nas {
  background: var(--kolor-jasny);
}

.tresc-o-nas {
    display: grid;
   grid-template-columns     :      1fr 1fr;
    align-items    :   center;
    gap: 60px;
}

.opis-o-nas p {
	 margin-bottom: 20px;
	 font-size: 1.1rem;
    line-height: 1.7; 

}

.obraz-o-nas img {
  width   :100%;
 height   :  auto;
  border-radius: var(--promien-zaokraglenia);
     }

.sekcja-proces {

	  background: var(--kolor-tla);
}

.siatka-procesu {
          display   :grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
}

.krok-procesu {
    text-align    :      center;
   padding: 30px 20px;
}

.numer-kroku {
    width: 80px;
    height: 80px;
  border-radius: 50%;
  background: var(--kolor-akcentu);
  color: white;
    display   :        flex;
               align-items: center;
  justify-content: center;
    font-size     :1.5rem;
     font-weight: 700;
    margin: 0 auto 20px; 
	
}

.krok-procesu h3 {

	    font-size: 1.3rem;
  color: var(--kolor-podstawowy);
  margin-bottom: 15px;
} 

.sekcja-sukcesy {
  background: var(--kolor-jasny);
}

.siatka-opinii {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.karta-opinii {
      background: white;
    padding: 30px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 5px 20px var(--kolor-cienia);
    position: relative;
}

.karta-opinii p {
	 font-style: italic;
	 margin-bottom: 20px;
   font-size: 1.1rem;
                    line-height: 1.6;
}

.autor-opinii {
  border-top: 1px solid var(--kolor-jasny);
  padding-top:    15px;
}

.autor-opinii strong{
  display: block; 
  color: var(--kolor-podstawowy); 
				 font-weight: 600;
}

.autor-opinii span
{
	color: #666;
  font-size: 0.9rem;
}

.sekcja-cta {
  background: linear-gradient(135deg, var(--kolor-podstawowy) 0%, #34495e 100%);
       color: white;
   text-align: center;
}

.tresc-cta h2 {
   font-size     :2.5rem;
  margin-bottom: 20px; 

}

.tresc-cta p {
    font-size: 1.2rem;
    margin-bottom: 30px;
  opacity: 0.9;
}

.przycisk-cta {
  background: var(--kolor-sukcesu);
    font-size: 1.1rem;
               padding: 20px 40px;
}

.przycisk-cta:hover {
                    background: #2ecc71;
}

.sekcja-kontakt   {


  background: var(--kolor-tla);
	}

.tresc-kontaktu {


   display: grid;
    grid-template-columns: 1fr 2fr;
  gap: 60px;


}

.informacje-kontaktowe h3 {
  color: var(--kolor-podstawowy);
  font-size  :      1.5rem;
	 margin-bottom: 20px;
}

.informacje-kontaktowe p {
    margin-bottom: 20px;
    line-height  :    1.6;


}

.formularz-kontaktowy {
   background: white;
	padding: 40px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 10px 30px var(--kolor-cienia);
}

.grupa-pola {
    margin-bottom: 25px;
}

.grupa-pola input,
.grupa-pola select,
.grupa-pola textarea {
  width: 100%;
  padding: 15px;
   border: 2px solid #ddd;
  border-radius: var(--promien-zaokraglenia);
    font-size: 16px;
        transition: border-color 0.3s ease;
    font-family: inherit;
}

.grupa-pola input:focus,
.grupa-pola select:focus,
.grupa-pola textarea:focus {
      outline: none;
  border-color: var(--kolor-akcentu);

}

.grupa-pola textarea {
   resize: vertical;
  min-height: 120px;
}

.stopka-glowna {
  background: var(--kolor-podstawowy);
     color: white;
   padding: 60px 0 20px;
}

.tresc-stopki {
   display  :     grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
   margin-bottom: 40px;
}

.sekcja-stopki h4 {
  margin-bottom: 20px;
 font-size: 1.2rem;
}

.sekcja-stopki ul {
    list-style: none;
}

.sekcja-stopki ul li {
  margin-bottom:   10px;


}

.sekcja-stopki a
	{
    color: #bdc3c7;
   text-decoration: none;
    transition: color 0.3s ease;
}



.sekcja-stopki a:hover {
         color: white;
}

.logo-stopki {
  height   :       60px;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.dno-stopki {
					border-top: 1px solid #34495e;
     padding-top: 20px;
    text-align: center;
  color: #bdc3c7;
}

.sekcja-misja,
.sekcja-doswiadczenie,
.sekcja-podejscie,
.sekcja-certyfikaty,
.sekcja-dlaczego {
   padding: 80px 0;
}

.sekcja-misja {
  background: var(--kolor-jasny);
}

.siatka-wartosci,
.siatka-metod {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.karta-wartosci,
.karta-metody {


   background: white;
  padding: 30px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 5px 20px var(--kolor-cienia);
    transition: transform 0.3s ease;
}

.karta-wartosci:hover,
.karta-metody:hover {
  transform: translateY(-5px);
}

.karta-wartosci h3,
.karta-metody h3 {
  color: var(--kolor-podstawowy);
   font-size: 1.3rem;
   margin-bottom: 15px;
  font-weight: 600;
}

.sekcja-doswiadczenie {
  background: var(--kolor-tla);
}

.tresc-doswiadczenia,
.tresc-certyfikatow    {

    gap   :      60px;
   align-items:       center;
  grid-template-columns: 1fr 1fr;
  display: grid;

}

.lista-specjalizacji,
.lista-kompetencji  {
  list-style: none;
  margin-top: 20px;
}

.lista-specjalizacji li,
.lista-kompetencji li {
         padding: 8px 0;
   padding-left: 20px;
  position: relative;
}

.lista-specjalizacji li:before,
.lista-kompetencji li:before {
  content: "→";
  color: var(--kolor-akcentu);
	 font-weight: bold;
    position: absolute;
  left: 0;
}

.obraz-doswiadczenia img,
.obraz-certyfikatow img {
  width: 100%;
	height: auto;
  border-radius: var(--promien-zaokraglenia);
}

.sekcja-podejscie {
	  background: var(--kolor-jasny);

}

.siatka-metod {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.sekcja-certyfikaty {
  background: var(--kolor-tla);
}


.sekcja-dlaczego {

  background: var(--kolor-jasny);
     }

.siatka-argumentow {
                    display:    grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 40px;
}

.karta-argumentu {
  text-align     :  center;
  padding: 30px 20px;
}



.numer-argumentu {
    width: 60px;
   height: 60px;
  border-radius    : 50%;
  background: var(--kolor-sukcesu);
    color: white;
  display: flex;
   align-items: center;
   justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 auto 20px;
}

.karta-argumentu h3		{
  color: var(--kolor-podstawowy);
 font-size: 1.2rem;
	margin-bottom    :        15px;
  font-weight: 600;}

.sekcja-podziekowania {
  background: linear-gradient(135deg, var(--kolor-jasny) 0%, #fff 100%);
	 padding: 120px 0 80px;
   margin-top: 80px;
}

.tresc-podziekowan {
    text-align: center;
    max-width: 800px;
  margin: 0 auto;
}

.ikona-sukcesu {
   margin-bottom: 30px;
}

.okrag-sukcesu {
   width: 80px;
    height: 80px;
    border-radius    :  50%;
  background: var(--kolor-sukcesu);
  color: white;
    display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
   font-weight: bold;
    margin: 0 auto;
  box-shadow: 0 10px 30px rgba(39, 174, 96, 0.3);
}

.podtytul-podziekowania {
  font-size  :1.25rem;
	color: #555;
	 margin-bottom: 50px;
    line-height: 1.6;
}

.informacje-nastepne {
    margin: 60px 0; 
	   text-align:       left;
}

.informacje-nastepne h2 {

  text-align   : center;
  color: var(--kolor-podstawowy);
     font-size: 2rem;
  margin-bottom: 40px;
}

.siatka-krokow {

	               display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.krok-nastepny {
    background: white;
  padding: 30px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 5px 20px var(--kolor-cienia);
  text-align: center;
}

.numer-kroku-nastepnego {
   width: 50px;
   height :   50px;
   border-radius: 50%;
  background: var(--kolor-akcentu);
    color: white;
  display: flex;
  align-items: center;
    justify-content: center;
   font-size    :   1.2rem;
   font-weight   : 700;
  margin: 0 auto 20px;
} 

.krok-nastepny h3 {
  color: var(--kolor-podstawowy); 
	font-size: 1.2rem; 
   margin-bottom: 15px; 
	 font-weight: 600;
}

.dodatkowe-informacje {
    margin-top: 60px;

   padding-top: 40px;

   border-top: 1px solid #ddd;
}

.dodatkowe-informacje h2 {
  color: var(--kolor-podstawowy);
   font-size: 1.8rem;
  margin-bottom: 20px;
}

.dodatkowe-informacje p {


    font-size: 1.1rem;
   margin-bottom: 30px;
   color: #555;
}  

.akcje-dodatkowe {
    display: flex; 
	   gap: 20px; 
	    justify-content:      center; 
	   margin-top: 30px;
}

.obraz-podziekowania {
    text-align: center;

	   margin-top: 60px;
}

.obraz-podziekowania img {
         max-width  :    400px;
   width: 100%;
	height: auto;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 10px 30px var(--kolor-cienia);
}

.sekcja-kontakt-info {
  background: var(--kolor-tla);

	  padding: 80px 0;
}

.szybki-kontakt {
    display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         gap: 40px;
  margin-top: 40px;
}

.karta-kontaktu {
  background     :    white;
  padding: 40px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 5px 20px var(--kolor-cienia);
    text-align: center;
}

.karta-kontaktu h3 {
  color: var(--kolor-podstawowy);
    font-size     :  1.5rem;
    margin-bottom: 20px;
  font-weight: 600;
	
}

.numer-telefonu,
.adres-biura {
   font-size: 1.3rem;
        font-weight: 600;
  color: var(--kolor-akcentu);
       margin-bottom: 15px;


}

.karta-kontaktu p:last-child {
     color: #666;
  font-size: 0.95rem;
}

.sekcja-dokument {


  background: var(--kolor-tla);
  padding: 120px 0 80px;
       margin-top: 80px;}

.tresc-dokumentu {
   max-width: 800px;
   margin: 0 auto;
  background: white;
  padding: 60px;
  border-radius: var(--promien-zaokraglenia);
  box-shadow: 0 10px 30px var(--kolor-cienia);
}



.data-aktualizacji {
    color: #666;
	font-style: italic;
   margin-bottom: 40px;
  text-align: center;
}

.tresc-polityki h2 {
  color: var(--kolor-podstawowy);
    font-size: 1.5rem;
   margin-top: 40px;
    margin-bottom  :       20px;
    font-weight: 600;
	
}

.tresc-polityki h3

{
  color: var(--kolor-akcentu); 
		font-size :      1.2rem; 
	  margin-top: 30px; 
	  margin-bottom: 15px; 
		font-weight    :  600;
}

.tresc-polityki p		{

	   margin-bottom: 20px;
  line-height: 1.7;
  text-align: justify;}

.tresc-polityki p strong {
  color: var(--kolor-podstawowy);
      font-weight     :     600;
}@media screen and (max-width: 768px) {
    .naglowek-glowny {
        font-size: 2.5rem;
    }

    .naglowek-sekcji {
        font-size: 2rem;
    }

    .tresc-bohatera,
    .tresc-o-nas,
    .tresc-kontaktu,
    .tresc-doswiadczenia,
    .tresc-certyfikatow {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .akcje-bohatera {
        flex-direction: column;
        align-items: stretch;
    }

    .siatka-uslug,
    .siatka-procesu,
    .siatka-opinii,
    .siatka-krokow,
    .szybki-kontakt {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .akcje-dodatkowe {
        flex-direction: column;
        align-items: center;
    }

    .tresc-stopki {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    section {
        padding: 60px 0;
    }

    .sekcja-bohater {
        padding: 100px 0 60px;
    }
}

@media screen and (max-width: 480px) {
    .pojemnik-glowny {
        padding: 0 15px;
    }

    .naglowek-glowny {
        font-size: 2rem;
    }

    .formularz-kontaktowy {
        padding: 30px 20px;
    }

    .tresc-dokumentu {
        padding: 40px 30px;
    }

    .przycisk-podstawowy,
    .przycisk-wtorny,
    .przycisk-cta,
    .przycisk-wyslij {
        padding: 12px 25px;
        font-size: 14px;
    }
}