/* Sprawdzanie czemu ekran na komórce się poziomo scrolluje
*{
    outline:1px solid red;
}
*/

/*Menu Main*/

nav.navbar.navbar-expand-lg li a:hover {
    color: #cd0000 !important;
}

.container-header .metismenu>li.level-1.active>a,
.container-header .metismenu>li.level-1.active>a {
    color: #2823e1 !important;      /* kolor tekstu aktywnej pozycji */
    font-weight: bold;              /* pogrubienie tekstu */
    text-decoration: underline;     /* opcjonalne podkreślenie */
}

/*Logo w widoku mobilnym*/

@media (max-width: 991px) {

    .container-topbar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #mod-custom194 {
        order: 1; /* logo na górze */
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
    }

    .navbar {
        order: 2; /* menu pod logo */
        width: 100%;
    }

    #mod-custom227 {
        order: 3; /* sociale pod menu */
    }

    .logo-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
/*Logo w widoku mobilnym*/

/* Banner */

#mod-custom199 img{
height: 4.11458vw;
display: inline-block;
vertical-align: middle;
margin: 0;
  }

.dolacz:hover
 {
    background: #1cb502 !important;      /* kolor tekstu aktywnej pozycji */
    /*font-weight: bold;*/              /* pogrubienie tekstu */
    /*text-decoration: underline;*/     /* opcjonalne podkreślenie */
}


.bg-PIC {
    background-image: url("/images/5Banner/main-bannerQW.webp");
  /*background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
              url('/images/5Banner/main-bannerQW.webp') center/cover no-repeat;*/
}

.bg-SIZE {
    background-size:cover;
}

.container-banner {
  display: flex;
  position: static;
}

.justify-center {
    justify-content: center;
}

.font-bold {
    font-weight: 700;
}

.gap-5 {
   gap: 0.1rem !important;
}
.mb-10 {
  margin-bottom:30px;
}

.mt-8 {
    margin-top: 2rem;
}

.py-16 {
    padding-top: 11rem;
    padding-bottom: 8rem;
}

.text-3xl
 {
    font-size: 2.1rem;
    line-height: 2.25rem;
}

.text-neutral-200
 {
    --tw-text-opacity: 1;
    color: rgb(229 229 229 / var(--tw-text-opacity));
}

@media (min-width: 1200px) {
    .w1200\:px-32 {
        padding-left: 8rem;
        padding-right: 8rem;
    }
}


@media (min-width: 900px) {
        .banner-text-xl {
            font-size: 1.4rem;
            line-height: 1.75rem;
        }
    }

@media (min-width: 900px) {
        .text-area-xl {
            font-size: 1.6rem;
            line-height: 2.75rem;
        }
    }

/* Banner / Social media */

.social-panel {
  display: flex;
  gap: 40px;
  justify-content: center;
  align-items: center;
  margin: 2px 0;
  flex-wrap: wrap;
}

.social-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  transition: transform 0.3s ease, color 0.3s ease;
  font-family: "Arial", sans-serif;
}

.social-btn i {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 26px;
  color: #fff;
  margin-bottom: 8px;
  transition: transform 0.3s ease;
}

/* Facebook */
.social-btn.facebook i {
  background: #1877f2;
}
.social-btn.facebook:hover i {
  background: #0d5cd6;
  transform: scale(1.1);
}
.social-btn.facebook span {
  color: #1877f2;
}

/* Instagram */
.social-btn.instagram i {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-btn.instagram:hover i {
  filter: brightness(1.2);
  transform: scale(1.1);
}
.social-btn.instagram span {
  color: #d6249f;
}

/* Ogólne efekty */
.social-btn:hover {
  transform: translateY(-3px);
}
.social-btn span {
  font-size: 15px;
  font-weight: 600;
}

@media (max-width: 600px) {
  .social-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

@media (min-width: 900px) {
    @media (min-width: 600px) {
        .text-area-xl-social {
            font-size: 1.3rem;
            line-height: 2.75rem;
        }
    }
}

/* Czytaj więcej w Banner */

.ease-in {
    transition-timing-function: 
cubic-bezier(.4, 0, 1, 1);
}
.duration-200 {
    transition-duration: .2s;
}
.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: 
cubic-bezier(.4, 0, .2, 1);
    transition-duration: .25s;
}
.text-white {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}
.font-medium {
    font-weight: 500;
}
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}
.py-2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.px-10 {
    padding-left: 1.3rem;
    padding-right: 1.3rem;
}
.bg-mainColor {
    --tw-bg-opacity: 1;
    background-color: rgb(44 96 173 / var(--tw-bg-opacity));
}
.rounded-xl {
    border-radius: .75rem;
}

/* Logo */

@media (min-width: 500px) {
    .w500\:w-24 {
        width: 6rem;
    }
}  
  .mx-auto {
    margin-left: auto;
    margin-right: auto;
}
  
  .w-20
 {
    width: 5rem;
}

/* Article list */

.blog-featured {
  margin-top: 0px; /* tyle, ile wysokość banera */
}

.text-muted{
  font-size:0.9em;
}

.blog-items img {
  display: block !important;
}

.blog-items {
  display: flex;
  flex-wrap: nowrap;      /* nie przełamuj wiersza */
  overflow-x: auto;       /* w razie potrzeby przewijanie poziome */
  gap: 20px;               /* odstęp między obrazami — zmień wg uznania */
  justify-content: flex-start; /* wyrównaj do lewej, lub center, lub space-between */
}

.blog-item figure {
  border-radius: 8px;
  overflow: hidden; /* bardzo ważne */
}

.blog-item figure img,
.blog-item a img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* proporcje szerokość/wysokość */
  object-fit: cover;
  display: block;
  height: 340px;
  transition: transform 0.3s ease;
}

.blog-item img{
  transition: transform 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

.blog-item figure:hover img {
  transform: scale(1.05); /* jeśli chcesz efekt powiększenia */
}

.blog-item figure:focus img {
  transform: scale(1.05); /* jeśli chcesz efekt powiększenia */
}

.blog-item-link {
  text-decoration: none;
}

.category-title-wrapper {
  text-align: center;
  margin-bottom: 2rem;
}

.category-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: #224FAA;
  position: relative;
}

.category-title::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background-color: #0d6efd;
  margin: 0.5rem auto 0;
  border-radius: 3px;
}
  
.article-card {
background: #fff;
border-radius: 20px;
padding: 20px;
margin: 15px;
flex: 1 1 calc(33% - 30px);
box-sizing: border-box;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}


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


.article-title a {
color: #333;
text-decoration: none;
}


.article-image {
width: 100%;
border-radius: 10px;
margin-bottom: 10px;
}


.article-intro {
color: #555;
}


.article-date {
font-size: 0.85em;
color: #999;
margin-bottom: 10px;
}

.item-image {
  margin: 0;
  overflow: hidden;
  border-radius: inherit; /* odziedziczy zaokrąglenie od rodzica */
}

/* Breadrumbs */
body:has(.mod-breadcrumbs__here):has(.container-banner) .mod-breadcrumbs__here {
  color: #000; 
}
body:has(.mod-breadcrumbs span):has(.container-banner) .mod-breadcrumbs span {
  color: #000; 
}

/*.mod-breadcrumbs span {
color: #fff;  
}*/

.pt-12 {
    padding-top: 3rem;
}

.pt-12-f {
    padding-top: 3rem;
}

.pbU-4 {
    padding-bottom: 3rem;
}

/* FOOTER */

.cis-footer{ background:linear-gradient(90deg,#12366d,#41457e); color:#fff; padding:50px 30px 25px; }
.cis-footer{ width:100%; }
.cis-footer-grid{ max-width:1400px; margin:auto; display:grid; grid-template-columns:repeat(4,1fr); gap:50px; }
.cis-footer-col h3{ font-size:1.2rem; margin-bottom:20px; text-transform:uppercase; }
.cis-footer-col p{ margin-bottom:15px; line-height:1.6; }
.cis-footer-col i{ color:#ffac33; margin-right:10px; width:20px; }
.cis-footer-logo{ text-align:center; }
.cis-footer-logo img{ width:180px; margin-bottom:20px; }
.cis-footer a{ color:#fff; text-decoration:none; }
.cis-footer a:hover{ color:#ffac33; }
.cis-footer-bottom{ max-width:1400px; margin:40px auto 0; padding-top:25px; border-top:1px solid rgba(255,255,255,.15); display:flex; justify-content:space-between; gap:30px; }
.cis-footer-data{ display:flex; flex-wrap:wrap; gap:25px; }
.cis-footer-copy{ text-align:right; }
.cis-footer-copy a{ margin-left:20px; }

.contact-item {
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    column-gap: 12px;
    margin-bottom: 10px;
}

.contact-item i {
    width: 18px;
    flex-shrink: 0;
}

.contact-item span {
    text-align: left;
}

.contact-item {
    justify-content: flex-start;
}

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


/* TABLET */

@media (max-width:1000px){

    .cis-footer-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .cis-footer-bottom{
        flex-direction:column;
    }

    .cis-footer-copy{
        text-align:left;
    }
}

/* MOBILE */

@media (max-width:768px){
  
    .cis-footer-grid,
    .cis-footer-bottom{
        padding-left:20px;
        padding-right:20px;
    }

    .cis-footer{
        padding:40px 20px;
    }

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

    .cis-footer-col i{
        display:block;
        margin:0 auto 10px;
    }

    .cis-footer-data{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }

    .cis-footer-copy{
        text-align:center;
    }

    .cis-footer-copy a{
        display:block;
        margin-top:10px;
        margin-left:0;
    }
}

.footer .grid-child
 {
    justify-content: center !important;

}

.flex
 {
    display: flex;
}

.gap-2
 {
    gap: .5rem;
}

.gapU-4
 {
    gap: 1rem;
}

.gapF-4
 {
    gap: 2rem;
}

.grid {
    display: grid;
}

.grid-cols-1{
    grid-template-columns:1fr;
}



/* FOOTER OFF */


.margin0 {
  margin: 0;
}

@media (min-width: 900px) {
    .w900\:gap-y-6 {
        row-gap: 1.5rem;
    }
}
@media (min-width: 600px) {
    .w600\:flex {
        display: flex;
    }
}

@media (min-width: 800px) {
    .w800\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .w900\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}
  
  @media (min-width: 900px) {
    .w900\:gap-x-12 {
        -moz-column-gap: 3rem;
        column-gap: 3rem;
    }
}
  
    @media (min-width: 900px) {
    .w900\:gap-x-12-f {
        -moz-column-gap: 11rem;
        column-gap: 11rem;
    }
}
  
  @media (min-width: 600px) {
    .w600\:pt-16 {
        padding-top: 2rem;
    }
}
.text-mainColor
 {
    --tw-text-opacity: 1;
    color: rgb(255 172 51 / var(--tw-text-opacity));
}

.text-sm {
  font-size: 1rem;
  line-height: 1.25rem;
}
  
 .text-sm-CIS {
 font-size: 1.2rem;
 line-height: 1.5rem;
}
  
 .text-sm-WPZ {
 font-size: 0.9rem;
 line-height: 1.5rem;
}

.text-xl {
  font-size: 1.1rem;
  line-height: 1.75rem;
}



@media (max-width: 768px) {
.article-card {
flex: 1 1 calc(100% - 30px);
}
}


@media (width >= 1200px) {
    h2, .h2 {
        font-size: 1rem;
    }
}

/*Responsive*/

@media screen and (max-width:960px) {
    img#mod-custom199 { display:none }
}

@media (min-width: 800px) {
    .w800\:text-2xl {
        font-size: 1.5rem;
        line-height: 2rem;
    }
}

.readmore {
  color: #0d6efd;
  font-weight: 500;
  margin-top: auto;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.readmore::after {
  content: " →";
  transition: transform 0.2s;
}

.blog-item:hover .readmore::after {
  transform: translateX(3px);
}

.text-mainTextColor
 {
    --tw-text-opacity: 1;
    color: rgb(38 38 38 / var(--tw-text-opacity));
}

/*Stationary*/



body {
    /* font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); */
    
    font-family: Rubik,Rubik Fallback;
    
}

.font-semibold {
    font-weight: 600;
}

.items-center
 {
    align-items: center;
}

/*
header .banner {
    height: 13.875vw;
    background: #1D1D1B;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding-top: 3.38542vw;
    background-size: cover;
    background-position: center center;
}*/

#mod-custom221 {
  
z-index: 0;
  
}

.container-topbar {
	border-bottom: 1px solid rgb(173 138 138 / 20%);
    color: #fff;
	display: flex;
  	width:100%;
  	align-items: center;
    justify-content: space-between;
 	padding: 0.38125vw 3.125vw;
  	position: sticky; /*relative*/
    top: 0;
    left: 0;
  
  	display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    /* -webkit-box-pack: justify; */
    -ms-flex-pack: justify;

	/*margin-left: auto;
	margin-right: auto;
    margin-bottom: 10px;
	max-width: 1320px;
    top: 40px;*/
}

#mod-custom194 img{
	width: 7.11458vw;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
  }


#mod-custom194 p {
  margin:0px;
}

#mod-custom199 p {
  margin:0px;
}

#mod-custom200 p {
  margin:0px;
}

#mod-custom222 p {
  color: black;
}


@media (min-width: 1199px){
.blog-featured.item-title {
    font-size: 1.7rem;
 }
}

@supports (display:grid)
.site-grid {
    grid-gap: 0 3em;
    display: grid;
    grid-template-areas:
        ". banner banner banner banner ."
        ". top-a top-a top-a top-a ."
        ". top-b top-b top-b top-b ."
        ". comp comp comp comp ."
        ". side-r side-r side-r side-r ."
        ". side-l side-l side-l side-l ."
        ". bot-a bot-a bot-a bot-a ."
        ". bot-b bot-b bot-b bot-b .";
    grid-template-columns: [full-start] minmax(0,1fr) [main-start] repeat(4,minmax(0,23.875rem)) [main-end] minmax(0,1fr) [full-end];
}

._access-icon {
  bottom: unset !important;
  left: unset !important;
  right: 10px;
  top: 102px;
  
  width: 40px !important;;
  height: 40px !important;;
  font-size: 30px !important;;
  line-height: 39px !important;;
}

._access-menu.left {
    left: unset !important;
    right: 0;
}

._access-menu.bottom {
    bottom: unset !important;
}

.btn {

    line-height: 0.7;
  	padding: 8.5px 1rem;
    margin: -2px;
}

.button.btn.btn-primary {
  margin-bottom: 2px;
  margin-right: 9px;
  background: none;
  border: none;
  color: inherit;
  width: 25px;
  height: 25px;
  line-height: 25px;
  padding: 0;
  margin: 0;
  font-size: 21px;
  box-shadow: none;
}

.btnX {
  color: #000!important;
    background: #fff0c3;
    border: none;
    padding: 0.7375vw 2.25vw;
    display: inline-block;
    vertical-align: middle;
    font-size: 0.8vw;
    line-height: .98958vw;
    font-weight: 700;
    -webkit-transition: all .2s;
    transition: all .2s;
    letter-spacing: .03906vw;
    border-radius: 50px;
    text-align: center;
    margin: 0;
    cursor: pointer;
    text-decoration: none!important;
    -webkit-appearance: none;
    -webkit-box-shadow: 0 0.26042vw 0.52083vw rgba(1,210,98,.3);
    box-shadow: 0 0.26042vw 0.52083vw rgba(1,210,98,.3);
    position: relative;
    top: 0; 
}

.btnX:hover {
    top: 0.10417vw;
    -webkit-box-shadow: 0 0 0.52083vw rgba(1,210,98,.3);
    box-shadow: 0 0 0.52083vw rgba(1,210,98,.3);
    color: #000;
  	background: #a7e5aa;
}

.container-header {
   background-color: #fff; /* #220e4d; */
   background-image: none;
}

.container-header .mod-menu>li>a,.container-header .mod-menu>li>span {
    color: black; /* currentColor */
}

.container-header nav {
    margin-top: 0em; /* margin-top: 0.5em; */
    padding: 0;
}

.container-header .grid-child {
    padding: 0em;  /* padding: 0.5em; */
}



.djslider-loader-default {

    overflow: visible !important;
  	z-index: 999;
  	top: -260px;
    right: 135px;
}

.djslider-default img.dj-image {
    border-radius: 10%;
}

.grid-child.container-below-top   {
	max-width: 1400px !important;
}

.facebook {
  align-self: flex-end;
}

.hamburger {
display: none;
}
  
  
/* w pliku index.php zmiana nazwy na logo -> nologo aby wyłączyć logo wybrane z narzędzia templatki */


/*.grid-child.banner  {*/
/*  background-image: url(https://test.mpklomza.pl/images/1Logo/hands1920.webp);*/
/*  height:300px;*/
/*  background-size: cover;*/
/*  /*background-position: 50% 50%; */
/*  max-width: none;*/  
/*}*/

/*.grid-child.banner {
    height: 14.875vw;
    background: #1d1d1b;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    padding-top: 3.38542vw;
    background-size: cover;
    background-position: center center;
    background-image: url(https://test.mpklomza.pl/images/1Logo/hands1920fadeX.webp);
    max-width: 1920px !important;
}*/

.item-content p img {
margin-right:10px;
}

.ja-topbar {
  /* border-top: 1px solid #eeeeee; */
  /*  border-bottom: 1px solid #eeeeee; */
  margin-bottom:15px;
}

.logo-wrapper {
  display: flex;
  align-items: center;       /* wyrównuje pionowo logo i tekst */
  justify-content: flex-start; /* logo po lewej, tekst obok po prawej */
  font-size: 1.5rem;
}

.logo-link {
  margin-right: 15px;        /* odstęp między logo a tekstem */
  /* opcjonalnie: ustawienie wysokości logo */
}

.logo-link img {
  display: block;            /* usuwa odstępy wokół obrazka */
  height: 80px;              /* przykładowa wysokość — dostosuj */
  width: auto;
}

.logo-text h1 {
  margin: 0;
  font-size: 1.5rem;         /* dostosuj wielkość napisu */
}

.logo-text p {
  margin: 0;
  font-size: 1rem;           /* wielkość podtytułu */
  color: #555;               /* przykład koloru */
}

.metismenu.mod-menu .mm-toggler {

    color: black; /* currentColor; */

}

.metismenu.mod-menu .metismenu-item>a,.metismenu.mod-menu .metismenu-item>button,.metismenu.mod-menu .metismenu-item>span {
  font-size: 16px;
  font-weight: 500;
  text-transform: uppercase;
}

.mod_search126 {
border: 1px solid; 
/* border-left-color: #eeeeee; */
border-right-color: #eeeeee;  
}

.navbar-expand-md {
border: 1px solid; 
border-left-color: #eeeeee;
border-right-color: #eeeeee;  
}

.nazwa-firmy {
  position:relative;
  color: #3b57a6;
  justify-content: flex-start;
}

.off-canvas-toggle {
    background: #ffffff;
    border-radius: 0;
    border-width: 0 1px 0 1px;
    border-style: solid;
    border-color: #760a0a;
    color: #666666;
    padding: 0;
    height: 47px;
    line-height: 47px;
    float: left;
    width: 47px;
}

.outer{
  display:flex;
  flex-direction:row;
}

.topbar-right .btn {
    height: 47px;
    line-height: 47px;
    width: 47px;
    padding: 0;
    text-align: center;
    background: none;
    border-left: 1px solid #eeeeee;
    float: left;
}

a:not([class]) {
    text-decoration: none;
}

header.header .logo {
  display: inline-block;
}

#mod-custom194 { /* CIS logo */
/*    align-items: center;
    display: flex;
    right: 22px;
    top: 15px;*/
}

#mod-custom194 img {
 /* max-width:135px; */
}

#mod-custom146 { /* Logo 'UM w Łomży - Zasmakuj' */
/*    align-items: center;
    display: flex;
  	position: absolute;
  	right: 40px;
    top: 9px;*/
}

#mod-custom196 {
/*  border: 1px solid;
  border-right-color: #eeeeee; */ 
}

#mod-custom197 {
/*  border: 1px solid;
  border-right-color: #eeeeee; */ 
}

#mod-custom198 {
/*  border: 1px solid;
  border-right-color: #eeeeee;*/  
}

#mod-custom199 { /* BIP' */
/*    align-items: center;
    display: flex;
    position: absolute;
    right: 195px;
    top: 12px;*/
}



#mod-custom200 {
/*    align-items: center;
    display: flex;
    position: absolute;
    right: 330px;
    top: 16px; */
}

.searchsearchbar.mod_search126 {
  
  margin: 0 0 0 7px; /* margin: 12px 0 0 12px; */
  padding-top: 5px;
}


/*
display: flex;

    right: 22px;
    top: 20px;
    color: #cc3533;
    text-decoration: none;
    font-weight: 700;
*/

/*Sekcja 'O NAS'*/

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    /* font-family: var(--cassiopeia-font-family-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"); */
    font-weight: var(--cassiopeia-font-weight-headings, 500);
    font-family: Rubik, Rubik Fallback;
}

.tytul h2 {
font-family: Rubik, Rubik Fallback;
text-transform:uppercase;
color: #161616;
font-weight: 500;
font-size: 28px;
font-style: normal;
letter-spacing: 1.3px;
text-transform: uppercase;
line-height: 1.4;
margin: 0 0 15px 0;
position: relative;
}
h3 {
  text-transform:uppercase;
}

.tresc p{
font-family: Mulish, Oswald, Arial, Helvetica, sans-serif;  
}
    
    /*kafelki Projekty*/
    
    .projects {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 20px;
  font-family: Arial, sans-serif;
}

.intro {
  margin-bottom: 30px;
  color: #555;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.project-card {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  transition: 0.2s;
}

.project-card:hover {
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  transform: translateY(-3px);
}

.project-card h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}

.meta {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}

.badge {
  display: inline-block;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 20px;
  font-weight: bold;
}

.badge.active {
  background: #e6f4ea;
  color: #2e7d32;
}

.badge.done {
  background: #eceff1;
  color: #455a64;
}

.btn {
  display: inline-block;
  padding: 8px 14px;
  background: #1976d2;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
}

.btn:hover {
  background: #125aa0;
}
    
    /*Koniec kafelki*/
    
    /*Artykuł formatowanie */
    
    .custom-article .article-info {
  color: #888;
  font-size: 0.9rem;
  margin-bottom: 20px;
    }     

    
    .article-content h2 {
  border-left: 4px solid #2b6cb0;
  padding-left: 10px;
}
    .custom-article {
  max-width: 1080px;
  margin: 40px auto;
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
}
    
    .article-content h2 {
  font-size: 1.6rem;
  margin-top: 2em;
  margin-bottom: 0.6em;
  font-weight: 600;
  position: relative;
}

/*
.article-content h2::before {
  content: "";
  position: absolute;
  left: -15px;
  top: 8px;
  width: 5px;
  height: 20px;
  background: #2b6cb0;
}
*/
    
    .article-content p {
  margin-bottom: 1.5em;
}

.article-content h2 {
  margin-top: 2.5em;
}
    
    figure.item-image.left {
  float: none; /* jeśli chcesz wyłączyć opływanie */
}
    
    body {
  background: #f5f7fa !important;
}
    
    .com-content-article__image,
.com-content-article img {
  margin-bottom: 20px;
}
    
    .info-box {
  background: #f0f7ff;
  border-left: 4px solid #2b6cb0;
  padding: 15px;
  border-radius: 6px;
  margin: 1.5em 0;
}

.highlight {
  background: #fff7ed;
  padding: 3px 6px;
  border-radius: 4px;
}
    .article-content ul li::marker {
  color: #2b6cb0;
}
    .article-content a {
  /*color: #ffffff;*/
  text-underline-offset: 3px;
}

.article-content a:hover {
  text-decoration: underline;
}
    /* koniec Artykuł formatowanie */
    
    /* breadcrumb */    

.breadcrumb {
  font-size: 0.9rem !important;
  color: #888 !important;
  margin-bottom: 15px !important;
}

.breadcrumb a {
  color: #666 !important;
  text-decoration: none !important;
}

.breadcrumb a:hover {
  color: #2b6cb0 !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #bbb !important;
}
          
      /* koniec breadcrumb */
    
      /* przycisk powrót */  
    .article-nav {
  margin-top: 40px;
}

.btn-back {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 6px;
  background: #f5f7fa;
  color: #2b6cb0;
  text-decoration: none;
}
      /* koniec powrót */

    /*.item-title {
display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    }*/
    
    /* sekcja dokumenty */
    
.docs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.doc-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.doc-card:hover {
  transform: translateY(-5px);
}

.doc-icon {
  font-size: 40px;
  margin-bottom: 10px;
}

.doc-title {
  font-weight: 600;
  margin-bottom: 15px;
}

 .doc-btn {
 display: inline-flex;
 align-items: center;
 gap: 8px;

 padding: 8px 16px;
 color: #fff;
 border-radius: 6px;
 text-decoration: none;
 font-weight: 500;
}

/* PDF */
.doc-btn.pdf {
 background: #e53935;
}
.doc-btn.pdf:hover {
  background: #c62828;
}

/* Word */
.doc-btn.doc {
  background: #2b579a;
}

/* Excel */
.doc-btn.xls {
  background: #1d6f42;
}

/* inne */
.doc-btn.file {
  background: #607d8b;
}
    
    /* koniec sekcji */
    /* styl gov.pl */
.docs-list {
  margin-top: 20px;
}

.doc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  border-bottom: 1px solid #e0e0e0;
}

.doc-row:hover {
  background: #f8f9fa;
}

.doc-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.doc-left i {
  font-size: 22px;
  color: #d32f2f;
}

.doc-name {
  font-weight: 600;
  margin-bottom: 3px;
}

.doc-meta {
  font-size: 13px;
  color: #666;
}

.doc-download {
  padding: 6px 12px;
  border: 1px solid #1e73be;
  color: #1e73be;
  border-radius: 6px;
  text-decoration: none;
  font-size: 14px;
}

.doc-download:hover {
  background: #1e73be;
  color: #fff;
}
    /* koniec gov.pl */
 /* Kontakt */   
    .cis-container {
        max-width: 1100px;
        margin: auto;
        font-family: Arial, sans-serif;
        color: #1f2a37;
        line-height: 1.6;
    }

    .cis-hero {
        background: #0f3d5e;
        color: white;
        padding: 40px 20px;
        text-align: center;
        border-radius: 10px;
    }

    .cis-hero h1 {
        margin: 0 0 10px;
        font-size: 30px;
    }

    .cis-hero p {
        margin: 0 0 20px;
        opacity: 0.9;
    }

    .cis-btns {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .cis-btn {
        padding: 12px 16px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: bold;
        display: inline-block;
    }

    .cis-btn-primary {
        background: #ffcc00;
        color: #1f2a37;
    }

    .cis-btn-secondary {
        background: white;
        color: #0f3d5e;
    }

    .cis-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 15px;
        margin-top: 25px;
    }

    .cis-card {
        background: #ffffff;
        padding: 18px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .cis-card h3 {
        margin-top: 0;
        color: #0f3d5e;
        font-size: 18px;
    }

    .cis-section {
        margin-top: 35px;
    }

    .cis-section h2 {
        color: #0f3d5e;
        margin-bottom: 12px;
    }

    .cis-form {
        background: #fff;
        padding: 18px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    .cis-form input,
    .cis-form textarea {
        width: 100%;
        padding: 12px;
        margin-bottom: 10px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
    }

    .cis-form button {
        background: #0f3d5e;
        color: white;
        border: none;
        padding: 12px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
    }

    .cis-form button:hover {
        background: #0c2f49;
    }

    .cis-info {
        background: #eaf2f8;
        padding: 12px;
        border-radius: 8px;
        font-size: 14px;
        margin-top: 10px;
    }

    .cis-map {
        width: 100%;
        height: 300px;
        border: 0;
        border-radius: 10px;
    }

    @media (max-width: 600px) {
        .cis-hero h1 {
            font-size: 22px;
        }
    }
    
    /*WCAG*/
    
    .wcag-container {
        max-width: 1000px;
        margin: auto;
        font-family: Arial, sans-serif;
        color: #1f2a37;
        line-height: 1.6;
    }

    .wcag-box {
        background: #ffffff;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    }

    .wcag-title {
        color: #0f3d5e;
        font-size: 26px;
        margin-bottom: 10px;
    }

    .wcag-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }

    @media (max-width: 700px) {
        .wcag-grid {
            grid-template-columns: 1fr;
        }
    }

    label {
        display: block;
        font-weight: bold;
        margin-bottom: 5px;
        margin-top: 10px;
    }

    input, textarea, select {
        width: 100%;
        padding: 12px;
        border: 2px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
    }

    input:focus, textarea:focus, select:focus {
        border-color: #0f3d5e;
        outline: 3px solid #cfe3f3;
    }

    .wcag-help {
        font-size: 13px;
        color: #555;
        margin-top: 3px;
    }

    .wcag-error {
        color: #b00020;
        font-size: 13px;
        margin-top: 3px;
        display: none;
    }

    .wcag-btn {
        margin-top: 15px;
        background: #0f3d5e;
        color: white;
        padding: 12px 18px;
        border: none;
        border-radius: 6px;
        cursor: pointer;
        font-weight: bold;
    }

    .wcag-btn:focus {
        outline: 3px solid #ffcc00;
    }

    .wcag-info {
        background: #eaf2f8;
        padding: 12px;
        border-radius: 8px;
        margin-top: 15px;
        font-size: 14px;
    }
    
    /* END WCAG */
    
    /* =========================
   KONTAKT – LAYOUT OGÓLNY
========================= */

.com-contact__form,
.contact-form {
    font-size: 16px;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1.0fr 1.0fr;
    gap: 30px;
}

.contact-box {
    background: #ffffff;
    padding: 24px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.contact-box h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-intro {
    margin-bottom: 15px;
    color: #4b5563;
}

.contact-title {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 30px;
    color: #1f2a37;
}

/* =========================
   🔥 FORMULARZ – FIX JOOMLA
========================= */

/* 2 kolumny: label | pole */
#contact-form .control-group {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 8px 20px;
    align-items: center;
    margin-bottom: 15px;
}

/* label */
#contact-form .control-label {
    margin: 0;
}

/* kontener inputa */
#contact-form .controls {
    width: 100%;
}

/* inputy */
#contact-form input,
#contact-form textarea {
    width: unset;
    max-width: 100%;
}

/* textarea do góry */
#contact-form textarea {
    align-self: start;
}

/* =========================
   CHECKBOXY
========================= */

/* Joomla checkbox */
#contact-form .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 🔥 RODO jako normalny element prawej kolumny */
#contact-form .rodo-group {
    display: grid;
    grid-template-columns: 180px 1fr;
}

#contact-form .rodo-group .control-label {
    /* pusta lewa kolumna */
}

#contact-form .rodo-group .controls {
    grid-column: 2;
}

/* checkbox + tekst */
#contact-form .rodo-group .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* checkbox */
#contact-form .rodo-group input[type="checkbox"] {
    margin-top: 4px;
}
    
/* checkbox */
#contact-form .rodo-group input[type="checkbox"] {
    width: unset !important;
}

/* =========================
   CAPTCHA
========================= */

#contact-form .g-recaptcha {
    margin: 20px 0;
    grid-column: 2;
}

/* =========================
   PRZYCISK
========================= */

#contact-form .btn {
    font-size: 18px;
    padding: 14px 24px;
    border-radius: 6px;
    background: #1d4ed8;
    border: none;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
}

/* przycisk w kolumnie inputów */
#contact-form .control-group:last-of-type .controls {
    grid-column: 2;
}

#contact-form .btn:hover {
    background: #1e40af;
}

/* =========================
   DOSTĘPNOŚĆ
========================= */

button:focus,
input:focus,
textarea:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* =========================
   RODO BOX
========================= */

.rodo-info {
    margin-top: 20px;
    padding: 15px;
    background: #f9fafb;
    border-left: 4px solid #1d4ed8;
    font-size: 15px;
}

.rodo-info a {
    color: #1d4ed8;
    text-decoration: underline;
}

/* =========================
   UTYLITKI
========================= */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
    
    /* 🔥 LEPSZE WYRÓWNANIE DOŁU */
#contact-form .rodo-group .controls {
    display: flex;
    align-items: flex-start;
}

/* checkbox + tekst */
#contact-form .rodo-group .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
    
      #contact-form .controls .form-check-input {
      width: unset !important;
    }

/* checkbox trochę niżej (lepsze optycznie) */
#contact-form .rodo-group input[type="checkbox"] {
    margin-top: 4px;
}

/* tekst RODO */
#contact-form .rodo-group label {
    font-size: 15px;
    font-weight: 500;
    color: #374151;
}

/* 🔥 PRZYCISK – wyrównanie do kolumny */
#contact-form .control-group:last-of-type {
    display: grid;
    grid-template-columns: 180px 1fr;
}

#contact-form .control-group:last-of-type .controls {
    grid-column: 2;
}

/* odstęp między przyciskiem a RODO */
#contact-form .btn {
    margin-bottom: 15px;
}
    

/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }

    #contact-form .control-group {
        grid-template-columns: 1fr;
    }

    #contact-form .g-recaptcha,
    #contact-form .btn {
        grid-column: 1;
    }
}
    
  /* =========================
  GALERIA PHOCA
========================= */  
    
   /* GRID */

#phocagallery .pg-categories-items-box {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

/* KARTA */

#phocagallery .pg-category-box {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.25s ease;
}
    
    #phocagallery .pg-category-box {
    cursor: pointer;
}

#phocagallery .pg-category-box a {
    display: block;
}

#phocagallery .pg-category-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
    
    

/* HOVER */

.pg-category-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(0,0,0,.14);
}

/* OBRAZ */

.pg-category-box-image {
    overflow: hidden;
    line-height: 0;
}

.pg-category-box-image img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    transition: transform .6s ease;
    display: block;
}

.pg-category-box:hover img {
    transform: scale(1.06);
}

/* TYTUŁ */

#phocagallery .pg-category-box-info {
    background: #f8f8f8;
    padding: 12px 15px;
    text-align: left;
}

#phocagallery .pg-category-box-title {
    position: static !important;
    background: none !important;
    color: #222 !important;
    padding: 0 !important;
}    
    
#phocagallery .pg-category-box-title a {
    color: #222;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
}

/* UKRYJ tylko ikonę */

.pg-category-box-title svg {
    display: none;
}

/* UKRYJ licznik zdjęć */

.pg-category-box-count {
    display: none;
}

/* IKONKI */

.pg-category-box-title svg,
.pg-category-box-count {
    display: none;
}
  
  .pg-category-box {
  height: 320px; /* dopasuj do swoich potrzeb */
}
  
  .pg-category-box-title a {
    display: block;
    min-height: 90px;
}

/* RSS + POWERED */

.pg-top-icons,
#phocagallery .pagination,
#phocagallery form,
#phocagallery > div[style*="Powered by"] {
    display: none;
}
    
/* TYTUŁ STRONY - Galeria zdjęć */    
    #phocagallery .page-header {
    padding: 40px 10px 20px;
    text-align: center;
}

#phocagallery .page-header h1 {
    font-size: 50px;
    font-weight: 800;
    margin-bottom: 12px;
}
    
/* KATEGORIA */ 
#phocagallery .pg-category-view {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

#phocagallery .pg-category-view .pg-box {
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#phocagallery .pg-category-view .pg-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}    
    
 /* WYCZYŚĆ IKONY LICZNIKI */   
    
    #phocagallery .pg-category-box-count {
    display: none;
}

#phocagallery .ph-si-category {
    display: none;
}
  /* MINIATURKI */
  
.pg-item-box {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.pg-item-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-item-box-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.85);
    color: #000;
    padding: 6px;
    font-size: 13px;
}
  
/* MOBILE GALERIA */

@media (max-width:768px){

.pg-categories-items-box{
    grid-template-columns:1fr;
    gap:20px;
}

.pg-category-box-image img{
    height:260px;
}
  }
  
  
/* =====================================
   MOBILE CIS ŁOMŻA
===================================== */

@media (max-width:768px){

/* HEADER */

.container-topbar{
    padding:10px 15px !important;
    display:flex !important;
    align-items:center;
    justify-content:space-between;
}

.logo-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}

.logo-link{
        flex-shrink:0;
    }

    .logo-link img{
        width:auto !important;
        min-width:50px;
        height:55px !important;
        max-width:none;
    }

    .logo-text{
        flex:1;
        min-width:0;
    }
/* UKRYJ ZBĘDNE ELEMENTY */

#mod-custom199,
.social-panel{
    display:none !important;
}

/* MENU */

.navbar{
    width:auto !important;
}

.navbar-toggler{
    margin-left:auto;
}
  
      .navbar-toggler {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .navbar-collapse {
        width: 100%;
    }

    .container-header .navbar-toggler {
        border: 1px solid #ddd;
        padding: 8px 12px;
        border-radius: 6px;
    }

    .container-header .navbar-toggler-icon {
        filter: invert(1);
    }
  
.container-header .navbar-toggler {
    color: #000;
    cursor: pointer;
    border: 1px solid #fff;
}

.navbar-collapse{
    margin-top:10px;
    background:#fff;
    border-radius:10px;
    padding:10px;
}

.mod-menu li{
    border-bottom:1px solid #eee;
}

.mod-menu a{
    display:block;
    padding:12px 15px !important;
}

/* HERO */

.py-16{
    padding-top:3rem !important;
    padding-bottom:3rem !important;
}

.bg-PIC{
    min-height:auto !important;
    padding:30px 15px !important;
    text-align:center;
}

.bg-PIC img{
    width:120px !important;
}

.bg-PIC h1{
    font-size:1.9rem !important;
    line-height:1.2;
}

.bg-PIC p{
    font-size:1rem !important;
}

.dolacz{
    display:block;
    width:100%;
    margin-top:20px;
}
  
/* ACCESSIBILITY DOSTEPNOSC  */  
  
      ._access-icon{
        right:5px !important;
        transform:none !important;
    }

/* AKTUALNOŚCI */

.blog-items{
    display:flex !important;
    flex-direction:column !important;
    overflow:visible !important;
    gap:20px;
}

.blog-item,
.article-card{
    width:100% !important;
    margin:0 !important;
}

.blog-item figure img,
.blog-item a img,
.item-image img{
    width:100%;
    height:220px !important;
    object-fit:cover;
}

.item-title{
    font-size:1.1rem;
    padding:15px;
}

.readmore{
    display:block;
    padding:0 15px 15px;
}

/* PAGINACJA */

.pagination{
    justify-content:center;
    flex-wrap:wrap;
}

/* STOPKA */

.footer-wrap{
    max-width:1400px;
    margin:0 auto;
    padding:40px 30px;
}

.footer-col{
    margin-bottom:25px !important;
}

.gapF-4{
    gap:20px !important;
}

/* BREADCRUMB */

.mod-breadcrumbs{
    display:none !important;
}

/* GALERIA */

.pg-categories-items-box,
.pg-category-view{
    grid-template-columns:1fr !important;
}

.pg-category-box-image img{
    height:220px !important;
}

/* PRZYCISK TELEFONU */

.mobile-call{
    position:fixed;
    right:15px;
    bottom:15px;
    z-index:9999;
}

.mobile-call a{
    width:60px;
    height:60px;
    border-radius:50%;
    background:#2c60ad;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    box-shadow:0 5px 15px rgba(0,0,0,.25);
}

} 
/* =====================================
   KONIEC - MOBILE CIS ŁOMŻA
===================================== */  

/*menu.css
banner.css
blog.css
article.css
contact.css
gallery.css
footer.css
mobile.css*/