@charset "utf-8";html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{background-color:#fff;color:#fff;font-family:'Lato',sans-serif;font-size:20px;margin:0!important}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none;padding:0}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:''}a{text-decoration:none;color:inherit}ins,mark{background-color:#ff9;color:#000;text-decoration:none}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

/* Wrapper and Header */
.wrapper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-family: 'Arial', sans-serif;
}

/* Stylizacja kontenera galerii */
.content {
    width: 100%;
    margin: 0 auto; /* Wyśrodkowanie */
    text-align: justify;
    padding: 20px; /* Dodatkowy padding dla przestrzeni */
    box-sizing: border-box; /* Uwzględnienie paddingu w szerokości */
    background-color: #FFFFFF; /* Subtelne tło, aby sekcja się wyróżniała */
    border-radius: 8px; /* Zaokrąglone rogi kontenera */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Subtelny cień dla głębi */
}

/* Stylizacja galerii */
.gallery {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: auto;
    position: relative;
    border-radius: 8px;
}

/* Stylizacja kontenera slajdów */
.slides {
    display: flex;
    transition: transform 0.5s ease;
}

/* Stylizacja slajdów */
.slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

/* Efekt półprzezroczystości na slajdach */
.slide::before {
    content: ""; 
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 75, 124, 0.3); /* Delikatniejsze ciemnoniebieskie tło z mniejszą przezroczystością */
    z-index: 1;
    pointer-events: none;
}

.gallery .slide img {
		height: 100%;
}

/* Stylizacja obrazków */
.slide img {
    width: 100%;
    max-height: 720px;
    display: block;
    object-fit: cover; /* Wypełnienie slajdu obrazem */
}

/* Stylizacja minimalistycznego tekstu na slajdach */
.slide-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff; /* Biały kolor dla kontrastu */
    font-size: 28px; /* Większa czcionka dla lepszej czytelności */
    font-weight: 600; /* Grubszy font dla lepszej widoczności */
    text-align: center;
    z-index: 2;
    padding: 10px 20px; /* Dodanie wewnętrznego paddingu */
    background-color: rgba(0, 0, 0, 0.3); /* Ciemniejsze tło o mniejszej przezroczystości */
    border-radius: 5px; /* Delikatnie zaokrąglone rogi */
    max-width: 80%;
    /* Usunięcie cienia tekstu */
}

/* Przycisk w galerii */
.btn {
    position: absolute;
    top: 75%; /* Przesunięty niżej dla lepszej kompozycji */
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 14px 28px;
    z-index: 2;
    background-color: #1a4b7c;
    color: #fff;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s, transform 0.2s;
}

.btn:hover {
    background-color: #15507a;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.btn:active {
    background-color: #0e3a5b; 
    transform: translate(-50%, -50%) scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Strzałki nawigacyjne */
.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(26, 75, 124, 0.8); /* Ciemnoniebieskie strzałki */
    color: white;
    border: none;
    padding: 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 3;
    border-radius: 50%; /* Okrągłe strzałki */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.slider-arrow.left {
    left: 15px;
}

.slider-arrow.right {
    right: 15px;
}

.slider-arrow:hover {
    background-color: #15507a; /* Jaśniejszy odcień podczas najechania */
}

.slider-arrow:active {
    background-color: #0e3a5b; /* Najciemniejszy odcień po kliknięciu */
}

/* Stylizacja kropek nawigacyjnych */
.dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.dot.active {
    background-color: #1a4b7c; /* Dopasowanie koloru aktywnej kropki */
}

.dot:hover {
    background-color: #15507a; /* Lekko ciemniejszy odcień przy najechaniu */
}

/* Sekcja dodatkowej zawartości  main*/
.additional-content {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Line Style */
.line hr {
    border: none;
    height: 4px;
    background: linear-gradient(90deg, #a7cd64, #e0e0e0, #a7cd64);
    margin: 20px 0;
    border-radius: 10px;
}

/* Photo and Text Container */
.photo-and-text-container {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 20px;
}

/* Photo Section */
.photo {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border-radius: 10px;
}

.service-photo {
    max-width: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.service-photo:hover {
    transform: scale(1.05);
}

/* Text Content Section */
.text {
    flex: 1;
    padding: 20px;
}

.text h1 {
    font-size: 2rem;
    color: #7fb900;
    margin-bottom: 20px;
}

.text p {
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
    font-size: 1rem;
}

.text p strong {
    color: #333;
    font-weight: bold;
}

/* Stylizacja przycisku do dodatkowej zawartości main i aside*/
.content-btn {
    display: inline-block; /* Inline-block dla dostosowania marginesów */
    padding: 12px 25px; /* Wewnętrzne odstępy dla większego obszaru klikalnego */
    background-color: #007bff; /* Ciemnoniebieski kolor przycisku */
    color: #fff; /* Biały tekst */
    border: none; /* Brak obramowania */
    border-radius: 25px; /* Zaokrąglone rogi */
    cursor: pointer; /* Wskaźnik kursora */
    font-size: 1rem; /* Rozmiar czcionki dla czytelności */
    font-weight: bold; /* Pogrubienie tekstu */
    text-transform: uppercase; /* Duże litery dla wyróżnienia */
    margin-top: 15px; /* Odstęp nad przyciskiem */
    transition: all 0.3s ease; /* Płynne przejście dla efektu hover */
    box-shadow: 0 4px 8px rgba(26, 75, 124, 0.3); /* Subtelny cień */
}

/* Efekt hover dla przycisku */
.content-btn:hover {
    background-color: #0056b3; /* Ciemniejszy niebieski przy najechaniu */
    box-shadow: 0 6px 12px rgba(22, 61, 102, 0.4); /* Ciemniejszy cień po najechaniu */
    transform: scale(1.05); /* Lekki efekt powiększenia */
}

/* Efekt focus dla przycisku (dostępność) */
.content-btn:focus {
    outline: none; /* Usunięcie domyślnego obrysu */
    box-shadow: 0 0 0 4px rgba(26, 75, 124, 0.4); /* Własny obrys dla dostępności */
}

/* Efekt active dla przycisku */
.content-btn:active {
    transform: scale(0.95); /* Lekki efekt zmniejszenia */
    box-shadow: 0 2px 4px rgba(26, 75, 124, 0.4); /* Zmniejszony cień */
}

.additional-content .content-btn {
	background-color: #7fb900; 
}

.additional-content .content-btn:hover{
	background-color: #749F07;
}

/* Sekcja aside i oferty */
aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-color: #fff;
}

/* Offert Container Styles */
.offert-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
    max-width: 1200px;
}

.offert {
    display: flex;
    flex-direction: row;
    background-color: #95C53F; /* Light green background */
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.offert-photo {
    width: 50%;
}

.offert-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.offert-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    width: 50%;
    text-align: center;
}

.offert-content h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 10px;
}

/* Quote Section Styles */
.quote-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    width: 100%;
    max-width: 1200px;
    background: url('images/imgquotebg.png');
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
	margin-bottom: 15px;
}

.quote-content {
    text-align: center;
}

.quote-content h1 {
    font-size: 2rem;
    color: #ffffff;
    margin-bottom: 10px;
}

.quote-content p {
    font-size: 1.2rem;
    color: #F7F7F7;
}

/* Stylizacja kontenera stopki */
footer {
    background-color: #1a4b7c; /* Ciemnoniebieskie tło pasujące do przycisków */
    color: #fff; /* Biały tekst */
    padding: 40px 20px; /* Wewnętrzne odstępy */
    display: flex; /* Flexbox dla układu */
    align-items: center; /* Wyrównanie do środka w pionie */
    justify-content: space-between; /* Rozstawienie zawartości */
    flex-wrap: wrap; /* Zawijanie elementów dla responsywności */
}

/* Stylizacja zdjęć w stopce */
footer .Fphoto {
    flex: 1 1 100px; /* Elastyczność i minimalna szerokość */
    text-align: center; /* Wyśrodkowanie obrazków */
    margin: 10px; /* Margines wokół zdjęć */
}

footer .Fphoto img {
    max-width: 150px; /* Maksymalna szerokość obrazków */
    height: auto; /* Zachowanie proporcji */
    border-radius: 10px; /* Zaokrąglone rogi */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}

/* Stylizacja treści stopki */
.footer-content {
    flex: 2 1 200px; /* Elastyczność i minimalna szerokość */
    text-align: center; /* Wyśrodkowanie tekstu */
    margin: 10px; /* Margines wokół treści */
    display: flex; /* Flexbox dla układu */
    flex-direction: column; /* Ułożenie elementów w kolumnie */
    align-items: center; /* Wyśrodkowanie treści */
    gap: 10px; /* Odstępy między elementami */
}

/* Stylizacja linków w stopce */
.footer-content a {
    color: #fff; /* Biały kolor linków */
    text-decoration: none; /* Usunięcie podkreślenia */
    font-weight: bold; /* Pogrubienie tekstu */
    margin: 5px 0; /* Margines dla linków */
    transition: color 0.3s ease; /* Płynne przejście koloru */
}

.footer-content a:hover {
    color: #ffdd00; /* Zmiana koloru na żółty po najechaniu */
}

/* Stylizacja tekstu w stopce */
.footer-content p {
    margin: 5px 0; /* Marginesy nad i pod */
    font-size: 0.9rem; /* Mniejszy rozmiar czcionki */
    opacity: 0.8; /* Lekka przezroczystość */
}

/* Pliki cookies i ich stylizacja */
/* Ikonka cookies */
.cookie-icon {
  position: fixed;
  right: 0;
  margin: 25px;
  bottom: 0;
  background-color: #7fb900;
  color: #fff;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
}

.cookie-icon:hover {
	background-color: #94D300;
}

.cookie-icon button {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
}

/* Ustawienia cookies */
.cookie-settings {
  position: fixed;
  right: 0;
  bottom: 60px;
  background-color: #fff;
  color: #333;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: none; /* Ukryte domyślnie */
  z-index: 1000;
}

.cookie-settings button {
  background-color: #7fb900;
  border: none;
  border-radius: 25px;
  padding: 5px 10px;
  color: #ffffff;
  cursor: pointer;
}

.cookie-settings button:hover {
	background-color: #94D300;
	transition: all 0.3s ease;
}

.cookie-settings p {
  margin: 0 0 10px;
}

/* Baner cookies */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #7fb900;
  color: #fff;
  text-align: center;
  padding: 15px;
  z-index: 1000;
  display: none; /* Ukryte domyślnie */
}

.cookie-banner p {
  margin: 0;
  padding: 0;
}

.cookie-banner a {
  decoration: none;
  color: #1a4b7c;
  text-decoration: underline;
}

.cookie-banner a:hover {
	color: #ffffff;
	transition: all 0.3s ease;
}

.cookie-banner button {
  border-radius: 25px;
  background-color: #007bff;
  border: none;
  padding: 5px 10px;
  color: #FFFFFF;
  cursor: pointer;
  margin-top: 10px;
}

.cookie-banner button:hover {
	background-color: #1E5791; 
	transform: scale(1.05);
	transition: all 0.3s ease;
}

/* Hamburger Menu - Desktop does not show */
.hamburger {
    display: none;
}