/*
Theme Name: KrukTerm 2024
Theme URI: https://wordpress.org/themes/krukterm2024/
Author: KrukTerm
Author URI: https://krukterm.pl
*/

@import url("https://use.typekit.net/lsj4ksv.css");

html {
    scroll-behavior: smooth;
}

body {
    font-family: din-2014, sans-serif;
    font-weight: 400;
    font-style: normal;
    overflow: hidden;
}

.swiper-opinia-klienta .swiper-slide {
  width: auto !important; /* Pozwól Swiperowi zarządzać szerokością */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* Internet Explorer/Edge */
    user-select: none;         /* Standard */
}

.swiper-opinia-klienta .swiper-slide .box {
  max-width: 400px; /* Ograniczenie szerokości wewnętrznego kontenera */
  margin-left: auto;
  margin-right: auto; /* Opcjonalne wyśrodkowanie */
  display: block; /* Lub inline-block w zależności od potrzeb */
}

.container {
    padding: 0 2rem;
}

.swiper-container {
    width: 100%;
    height: 90%;
    padding: 5rem;
}

.swiper-slide {

    background: #fff;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
}

.rating-container {
    display: flex;
    justify-content: flex-end; /* Wyrównuje elementy do prawej */
    align-items: center;      /* Wyrównuje w pionie tekst i gwiazdki */
    gap: 10px;                /* Odstęp między tekstem "5/5" a gwiazdkami */
}

.rating-stars {
    width: 90px;  /* Możesz dostosować szerokość gwiazdek */
    height: auto; /* Zachowuje proporcje obrazka */
}

@media (min-width: 1920px){
    .navbar-link, a.navbar-item {
    font-size: 1.1rem;
}
}

/* --- Style dla urządzeń mobilnych --- */
@media screen and (max-width: 768px) {

    /* Zmieniamy główny kontener 'media' na układ kolumnowy */
    .box .media {
        flex-direction: column; /* Ustawia elementy (zdjęcie i treść) jeden pod drugim */
        align-items: center;    /* Wyśrodkowuje wszystko w poziomie */
    }

    /* Usuwamy margines po prawej stronie zdjęcia i dodajemy pod nim */
    .box .media .media-left {
        margin-right: 0;
        margin-bottom: 1rem; /* Tworzy odstęp między zdjęciem a tekstem poniżej */
    }

    /* Wyśrodkowujemy tekst pod zdjęciem */
    .box .media .media-content {
        text-align: center; /* Cała treść (imię, stanowisko, mail) będzie wyśrodkowana */
    }
}

.ppl {
    background: #f1f1f1;
}

.navbar-item, .navbar-link {
    padding: .5rem .5rem;
}


.navbar-menu.is-active {
    max-height: calc(100vh - 62px); /* Przykładowa wysokość - dostosuj */
    /*
       100vh - pełna wysokość viewportu
       - 52px (lub inna wysokość) - wysokość paska nawigacji na górze
    */
    overflow-y: auto; /* Pozwala na przewijanie pionowe, gdy zawartość jest większa */
    /*
       Opcjonalnie: overflow-y: scroll; jeśli wolisz zawsze widoczny pasek przewijania.
    */
    padding-bottom: 80px; /* Dodatkowy padding na dole, aby nie było zasłonięte przez "Szybki kontakt!" itp. */
    box-sizing: border-box; /* Upewnia się, że padding jest wliczony w max-height */
}

/* Jeśli masz paski na dole ekranu (np. te przyciski Szybki Kontakt) */
/* Zwiększ padding-bottom w zależności od wysokości tych pasków */
/* Możesz potrzebować ustalić wysokość swojego górnego paska nawigacji */
.navbar.is-fixed-top {
    height: 62px; /* Przykład, zmierz swoją rzeczywistą wysokość */
}

.container-general {
    padding: 0;
    margin: 0 auto;
    width: 100%;
}

.container-general .gallery-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 85vh;
}

.container-general .gallery-wrap .item {
    flex: 1;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: none;
    transition: all 0.8s ease;
    position: relative;
    filter: grayscale(0.1);
}

.container-general .gallery-wrap .item:hover {
    filter: grayscale(0);
}

.container-general .gallery-wrap .item:hover {
    flex: 3;
}

.wrap-effect-1 .item:first-of-type {
    background-image: url("img/1.webp");
    text-align: left;
}

.wrap-effect-1 .item:nth-of-type(2) {
    background-image: url("img/2.webp");
    text-align: center;
}

.wrap-effect-1 .item:nth-of-type(3) {
    background-image: url("img/3.webp");
    text-align: right;
}


.overlay {
    width: 100%;
    height: 100%;
    background: rgb(0, 0, 0);
    color: #fff;
    font-weight: 400;
    background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 56%, rgba(0, 0, 0, 0) 100%);
    padding-left: 1rem;
    transition: all 0.9s ease-in-out;
    opacity: 1;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
}


/* .swiper-slide .item .overlay:hover {
    background: rgb(255, 0, 0);
    background: linear-gradient(180deg, rgba(255, 0, 0, 0) 70%, rgba(255, 0, 0, 1) 100%);
    transition: all 0.9s ease-in-out;
    opacity: 1;
} */

a.linkcap {
    position: relative;
    bottom: 3rem;
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    opacity: 0;
    text-transform: uppercase;

}

.swiper-slide .item .overlay:hover+a.linkcap {
    opacity: 1;
    transition: all 0.9s ease-in-out;
    pointer-events: none;
}

.swiper-slide .item .overlay:hover>.sidetxt {
    opacity: 0;
    pointer-events: none;
}

.headertextbox {
    position: absolute;
    bottom: 4rem;
    width: 500px;
    height: 300px;
}

.swiper-slide h2 {
    line-height: 2.5rem;
    text-transform: uppercase;
    font-weight: 800;
    font-style: normal;
    z-index: 99;
    font-size: 3rem;
    color: #fff;
    margin-bottom: 1rem;
}

.badge {
    position: absolute;
    right: 3rem;
    top: 6rem;
    rotate: 30deg;
    z-index: 1;
    width: 150px;
    height: 150px;
}

.headermobile {
    display: none;
}

@media (max-width: 991.98px) {
    .badge {
        display: none;
    }

    .headermobile {
        display: block;
    }

    .headermobile p {
        line-height: 1rem;
    }

    .headermobile a {
        display: block;
        margin-top: 2rem;
    }

    .headermobile h2 {
        color: #f1f1f1;
        font-weight: 700;
        text-transform: uppercase;
        font-size: 2rem;
        line-height: 1.8rem;
        margin-bottom: 1rem;
    }

    .hero.desktophero {
        display: none;
    }

    .mobile1 {
        background: url('img/1m.webp');
        min-height: 80vh;
        background-position: bottom center;
        background-size: cover;
        display: flex;
        align-items: flex-end;
        padding: 2rem 0;
    }

    .mobile2 {
        border-top: 10px solid #fff;
        background: url('img/2m.webp');
        min-height: 80vh;
        background-position: bottom center;
        background-size: cover;
        display: flex;
        align-items: flex-end;
        padding: 2rem 0;
    }

    .mobile3 {
        border-top: 10px solid #fff;
        background: url('img/3m.webp');
        min-height: 80vh;
        background-position: bottom center;
        background-size: cover;
        display: flex;
        align-items: flex-end;
        padding: 2rem 0;
    }
}

.counters {
    color: #ccc;
    background-color: rgb(24, 27, 32);
    border-top: 10px solid white;
    border-bottom: 10px solid white;
    text-align: center;
    padding: 2rem 0;
}

.counters span {
    display: block;
    line-height: 1.5rem;
    color: #ccc;
}

.count {
    display: inline;
    color: #1FFFBC;
    font-weight: 700;
}

section.family {
    color: #000;
    background: url('img/family.webp');
    /* background-attachment: fixed; */
    background-size: cover;
    background-position: 55% 10%;
    padding: 5rem 0;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
}

section.family strong,
section.opinie strong {
    color: #000;
}

@media (max-width: 991.98px) {
    section.family {
        background: url('img/family_mobile.webp');
        background-position: 30% 50%;
    }

    section.family:not(section.family .card) {
        text-align: center;
    }
}

section.family h1 {
    color: #000;
}

.family .card {
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    border: 1px solid #ccc;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.familytxt {
    margin-bottom: 2rem;
}

.family .card img {
    max-width: 30px;
    max-height: 30px;
}

.family h4 {
    font-size: 200;
    text-transform: uppercase;
    font-size: 1rem;
}

.has-text-primary {
    color: #EF5613 !important;
}

a.has-text-primary {
    display: block;
    margin-top: 2rem;
    font-weight: 700;
}

.family img {
    margin-top: 2rem;
}

section.services {
    padding: 5rem 0;
    background: url('img/servicesbg.webp');
    background-size: cover;
}

section.services p {
    color: #f1f1f1;
}

section.services span {
    color: #ccc;
}

@media (max-width: 991.98px) {
    section.services {
        background: url('img/servicesbgm.webp');
        background-size: cover;
        background-position: 50% 50%;
    }
}



html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
    overflow: hidden;
    position: fixed;
    width: 100%;
}
html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}

.pum-overlay.pum-active,
	.pum-overlay.pum-active .popmake.active {
    		display: block !important;
	}

.services h1,
.services h2,
.realizacje h2,
.blog h4,
.cennik h4,
.subpage h2,
.referencje h4,
.opinie h2,
.realizacje h4,
.blog h1,
.cennik h1,
.subpage h1,
.referencje h1 {
    text-transform: uppercase;
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 2rem;
    line-height: 3rem;
}

.services h2 {
    color: white;
}

.media.branch-item {
    cursor: pointer;
}

@media (max-width: 991.98px) {

    .services h1,
    .realizacje h1,
    .blog h1,
    .cennik h1,
    .subpage h1,
    .subpage h4,
    .referencje h1 {
        text-transform: uppercase;
        font-size: 2rem;
        line-height: 2.2rem;
    }
}

.services h1 {
    color: #fff;
    line-height: 2.5rem;
}

span.features {
    color: #A3A3A3;
    margin-top: 2rem;
    display: block;
    text-transform: uppercase;
}

.services a {
    text-decoration: underline;
    margin-top: 2rem;
    display: block;
}

section.opinie {
    border-top: 1px solid #ccc;
    color: #1c1c1c;
    background: #fff url('img/krukterm.svg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 5%;
    padding: 5rem 0;
}

@media (max-width: 991.98px) {
    section.opinie {
        background-position: 50% 1%;
    }
}

section.opinie h1 {
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 3rem;
    line-height: 2.5rem;
    margin-bottom: 2rem;
}

.reviews {
    margin-top: 3rem;
}

.reviews .card {
    padding: 2rem;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.2);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #1c1c1c;
}

.reviews .card p {
    line-height: 1rem;
}

.reviews .card span.name {
    margin-top: 1rem;
    display: block;
    font-weight: 800;
    color: #000;
}

.reviews .card .opinieheader {
    display: flex;
    margin-bottom: 1rem;
}

.reviews .card .stars {
    margin-right: 1rem;
}

.cta {
    background: #EF5613;
    padding: 3rem 0;
    color: #fff;
}

.cta2 {
    background-color: #4A4A4A; /* Zgodnie z obrazkiem */
    color: #FFFFFF;
    padding: 3rem 0; /* Zwiększona przestrzeń */
}

.cta2 .container {
    max-width: 1200px; /* Maksymalna szerokość kontenera */
    margin: 0 auto;
    padding: 0 1rem;
}

.cta2 .columns {
    display: flex;
    flex-wrap: wrap; /* Zezwól na zawijanie kolumn */
    align-items: center;
}

.cta2 .column {
    flex: 1;
    padding: 1rem;
}

@media screen and (max-width: 768px) {
    .cta2 .column.is-half-tablet {
        flex-basis: 100%;
    }
}


.ctax {
    font-size: 1.5rem; /* Dopasowanie do obrazka */
    font-weight: 700;
    white-space: nowrap; /* Zapobiega zawijaniu "DARMOWA WYCENA" */
}

.cta1 {
    font-size: 2.5rem; /* Większy rozmiar numeru telefonu */
    font-weight: 700;
    display: flex; /* Użyj flexbox dla lepszego wyrównania */
    align-items: center; /* Wyrównanie pionowe */
}

.cta1 img {
    margin-right: 10px; /* Odstęp między ikoną a numerem */
}

.cta1 a {
    text-decoration: none;
    color: #FFFFFF;
}

.rating {
    font-size: 3rem;
    color: #f5be38;
    font-weight: 700;
    display: inline; /* Aby zachować w jednej linii z obrazkiem gwiazdek */
}

.cta2 .is-size-6 {
    font-size: 0.9rem !important; /* Zmniejszony rozmiar tekstu "Na podstawie..." */
}

/* Dodatkowe wyrównanie dla lewej kolumny */
.cta2 .column:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Wyrównaj do lewej */
}

span.cta1 {
    font-weight: 800;
    color: #fff;
    font-size: 2rem;
    line-height: 2.5rem;
}

span.ctax {
    font-weight: 800;
    color: #fff;
    font-size: 2rem;
    line-height: 2.5rem;
}

.cta .column {
    padding: 0 1.2rem;
}

@media (max-width: 991.98px) {

    .cta {
        text-align: center;
    }

    .cta .column {
        padding: 1rem 1.2rem;
    }

    span.cta1 {
        display: block;
        font-weight: 800;
        color: #fff;
        font-size: 2rem;
        line-height: 2rem;
        padding: 1rem 0;
    }
}

section.realizacje {
    background: #f1f1f1;
    padding: 5rem 0;
}

.realizacje h1 {
    color: #000;
}

/* .blog {
    color: #1c1c1c;
    background: #fff;
    padding: 5rem 0;
} */

.blog h1 {
    color: #000;
}

.blog svg {
    width: 20px;
    height: 20px;
}

.cennik {
    color: #1c1c1c;
    background: #f1f1f1;
    padding: 5rem 0;
}

.cennik h1 {
    color: #000;
}

button.is-primary {
    margin-top: 2rem;
    background-color: #EF5613;
    color: #fff;
}

.footer {
    color: #ccc;
    padding: 5rem 0;
    background: rgb(24, 27, 32);
}

.label {
    color: #f1f1f1;
}

h3 {
    font-weight: 700;
    font-size: 3rem;
    line-height: 2.5rem;
    text-transform: uppercase;
    margin: 2rem 0;
}

.blogpost h3 {
    font-size: 2rem;
    line-height: 2.5rem;
}

.footer h3 {
    color: #fff;
}

span.contact {
    font-weight: 700;
    display: block;
    font-size: 1.5rem;
}

.formularz {
    margin-top: 2rem;
}

h1.tel {
    color: #EF5613;
    font-weight: 700;
    font-size: 3rem;
}

.socialmedia img {
    padding: 0.2rem;
    width: 40px;
    margin-bottom: 3rem;
}

.footerright {
    text-align: right;
}

.copyright {
    margin-top: 3rem;
    color: #525252;
    max-width: 400px;
    float: right;
}

@media (max-width: 991.98px) {

    .copyright {
        margin-top: 3rem;
        color: #525252;
        max-width: unset;
        float: none;
        padding: 2rem 0;
    }

    .footerright {
        text-align: center;
    }

    h1.tel {
        margin-top: 3rem;
        color: #EF5613;
        font-weight: 700;
        font-size: 2rem;
    }
}

/* BLOG */

section.blogpost {
    background: rgb(255, 255, 255);
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(180, 180, 180, 0.5944502801120448) 100%);
    color: 000;
    padding: 5rem 0;
}

.blogpost ul {
    list-style: circle;
}


section.blogpost img:not(:first-child) {
    margin: 3rem 0;
    border-radius: 20px;
}

section.blogpost img:first-child {
    border-radius: 20px;
}


section.blogpost .entry {
    margin-top: 3rem;
    border-top: 1px solid #ccc;
    padding-top: 3rem;
}

section.blogpost h2 {
    font-size: 2rem;
    line-height: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

section.blogposts h2 {
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.7rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.bloghead {
    padding: 5rem 0;
}

section.blogpost h4 {
    font-size: 2rem;
    line-height: 2rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

section.blogpost h2.entrytitle {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 2.5rem;
    color: #000;
    line-height: 2.6rem;
}

section.blogpost .container {
    border: 1px solid #f1f1f1;
    box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 3rem;
    border-radius: 10px;
}

section.blogpost .zajawka {
    font-style: italic;
    margin: 2rem 0;
}

section.blogposts {
    padding: 5rem 0;
}

section.blogposts .card {
    padding: 2rem;
    height: 100%;
}

section.blogposts .card img {
    border-radius: 10px;
}

.tytulposta {
    font-size: 1.5rem;
    line-height: 1.6rem;
    font-weight: 700;
    margin: 1rem 0;
}

section.blogposts a {
    color: #000;
}

a.czytaj {
    color: #EF5613 !important;
    font-weight: 700;
    text-decoration: underline;
    margin-top: 2rem;
    display: block;
}

/* PODSTRONA */

section.pageheader {
    background: #f1f1f1;
    border-bottom: 1px solid #ccc;
    padding: 15rem 0 5rem 0;
    min-height: 50vh;
    background-size: cover!important;
    background-position: 50% 50%!important;
}

h1.pageheaderh {
    font-size: 3rem;
    line-height: 3rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
}

@media (max-width: 991.98px) {
    h1.pageheaderh {
        font-size: 2rem;
        line-height: 2.2rem;
    }
}

section.subpage {
    padding: 5rem 0;
}

section.subpage img {
    border-radius: 20px;
}

section.subpage h2,
section.subpage h4 {
    font-weight: bold;
    font-size: 2rem;
}

p.subtxt {
    color: #fff;
}

/* USŁUGA */

.servicezajawka {
    color: #000;
    background: #fff;
    padding: 5rem 0;
}

/* właściwości */

.service_features {
    color: #f1f1f1;
    background: #151515;
    padding: 5rem 0;
}

.service_features h2 {
    color: #EF5613;
    margin-bottom: 2rem;
    font-size: 3rem;
    font-weight: 700;
    text-transform: uppercase;
}

.service_features strong {
    font-size: 1rem;
    color: #fff;
}

.service_features p {
    color: #929292;
}

.properties-section {
    background-color: #151515;
    color: white;
    padding: 2rem;
}


@media (max-width: 991.98px) {
    .properties-section {
        padding: 0;
    }
}

.property-item {
    margin-bottom: 1.5rem;
}

.property-item:last-child {
    margin-bottom: 0;
}

.property-title {
    color: #ff5722;
    font-weight: bold;
}

.property-icon {
    margin-right: 0.5rem;
}

/* GWARANCJA */

.guarantee-section {
    background-color: #f5f5f5;
    color: #333;
    padding: 5rem 0;
}

.guarantee-title {
    color: #ff5722;
    font-weight: bold;
}

.guarantee-subtitle {
    font-weight: bold;
    color: #333;
}

.guarantee-text {
    margin-top: 1rem;
}

.large-text {
    font-size: 5rem;
    font-weight: 700;
    line-height: 3rem;
    color: #ff5722;
}

.bold-text {
    font-size: 2.69rem;
    font-weight: bold;
}

input,
textarea {
    border-radius: 5px;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    font-weight: 500;
}

input[type=submit] {
    padding: 0.5rem;
    margin: 0.5rem 0;
}

input {
 width: 100%;
}

#pum-1491 {
    background: rgba(0, 0, 0, 0.5);
}

.pum-theme-1482 .pum-container,
.pum-theme-motyw-domyslny .pum-container {
    background: url("img/popup.webp") !important;
}

#total_field_id_2 {
    display: none;
}

.referencje {
    padding: 5rem 0;
    border-top: 1px solid #ccc;
}

ul,
ol {
    margin: 1rem;
}

ul {
    list-style: circle;
}

span.rating {
    font-size: 3rem;
    color: #f5be38;
    font-weight: 700;
    display: inline;
}

.country {
    background: #f1f1f1 url(img/town.webp) no-repeat;
    background-size: cover;
    padding: 5rem 0;
}

.contactcontact {
    padding: 5rem 0;
}

.contactcontact h4 {
    font-weight: bold;
    font-size: 2rem;
}

.pum-theme-1482 .pum-content,
.pum-theme-motyw-domyslny .pum-content {
    max-width: 60%;
}

@media (max-width: 991.98px) {

    .pum-theme-1482 .pum-content,
    .pum-theme-motyw-domyslny .pum-content {
        max-width: 100%;
    }
}

.wpcf7-list-item {
    margin: 1rem 0 0 0;
    font-size: 0.9rem;
}

.subpage h3 {
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 2rem;
    text-transform: uppercase;
    margin: 1rem 0;
}

.uslugizbiorczo {
    padding: 5rem 1rem;
}

.copyright {
    position: relative;
    margin-top: 1rem;
}

.copyright a {
    color: #ccc;
    display: block;
}

.uslugizbiorczo .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.uslugizbiorczo .card .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.city {
    padding: 5rem 0;
}

.city .card {
    padding: 2rem;
}

.city h2 {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 2rem;
}

/* MAPKA */

.controls {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
        }
        .controls label {
            font-weight: bold;
            font-size: 1.1em;
            color: #34495e;
        }
        .select-wrapper {
            position: relative;
            display: inline-block;
            border-radius: 4px;
            overflow: hidden;
            border: 1px solid #ccc;
            background-color: #f9f9f9;
        }
        #service-select {
            width: 300px; /* Szerokość rozwijanej listy */
            padding: 10px 15px;
            border: none;
            background: transparent;
            font-size: 1em;
            cursor: pointer;
            -webkit-appearance: none; /* Usuwa domyślny styl strzałki w Chrome/Safari */
            -moz-appearance: none;    /* Usuwa domyślny styl strzałki w Firefox */
            appearance: none;
        }
        .select-wrapper::after {
            content: '▼';
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
            color: #555;
        }

        #mapid {
            height: 600px;
            width: 100%;
            border: 1px solid #ddd;
            border-radius: 4px;
            box-shadow: inset 0 0 5px rgba(0,0,0,0.05);
        }
        .legend {
            background: rgba(255, 255, 255, 0.9);
            padding: 12px;
            border-radius: 6px;
            box-shadow: 0 0 10px rgba(0,0,0,0.15);
            font-size: 14px;
            line-height: 1.8em;
            color: #333;
        }
        .legend h4 {
            margin-top: 0;
            margin-bottom: 10px;
            color: #2c3e50;
            font-weight: bold;
        }
        .legend i {
            width: 18px;
            height: 18px;
            float: left;
            margin-right: 8px;
            opacity: 0.8;
            border-radius: 3px;
        }

        .oddzialy .card {
            padding: 3rem;
        }