/* header */
body.scrolled header{position: fixed; top: 0; max-width: 100%; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; border-radius: 0; background-color: white;}
header{position: fixed; top: 48px; max-width: 1290px; width: 100%; padding: 0px; border-radius: 6px; margin: 0 auto; left: 50%; transform: translateX(-50%); z-index: 3; transition: all 350ms;}
header .container{display: flex; gap: 30px; justify-content: space-between; max-width: 1290px; width: 100%; margin: 0 auto;}
body.scrolled header .logo{}
body.scrolled header{padding: 10px 30px;}

/* error-page */
.error-page{padding: 100px 30px;}

header .logo .white{display: none;}
header .logo.white-logo .white{display: block;}
header .logo.white-logo .normal{display: none;}
header .logo img{object-fit: contain; height: 44px;}

body.page header .logo img{height: 48px;}

body.scrolled header .logo .white{display: none;}
body.scrolled header .logo .normal{display: block;}

header .nav{display: flex; list-style: none; align-items: center; gap: 60px;}
header .nav .menu{display: flex; gap: 50px; list-style: none; flex-wrap: wrap;}
header .nav .menu li{display: flex; gap: 9px; position: relative;}
header .nav .menu li a {font-style: normal;font-weight: 600;font-size: 13px;color: #ffffff;transition: all 200ms;text-transform: uppercase;white-space: nowrap;letter-spacing: -0.225px; display: flex; gap: 8px;}
header .nav .menu li:hover a{color: #ed6717;}
header .nav .menu li:hover a .drop-down-icon svg path{fill: #ed6717;}

header .nav .menu li a.active{color: #ed6717;}
header .nav .menu li a.active .drop-down-icon svg path{fill: #ed6717;}
header .nav .hamburger{display: none; justify-content: center; align-items: center; gap: 7px; cursor: pointer;}
header .nav .hamburger .bar{height: 17px; width: 2px; background-color: black;}

header .nav .menu li:hover ul.hasdropdown{display: block; box-shadow: 0px 0px 5px #0000004f;}
header .nav .menu li a{position: relative;}
header .nav .menu li:hover a::before{content: ''; position: absolute; width: 100%; height: 67px; position: absolute; top: 0; left: 0;}
header .nav .menu ul.hasdropdown {list-style: none;position: absolute;background-color: white;display: none;top: 35px;transform: translateX(-15px);border-top: 2px solid #ed6717;border-radius: 2px; transition: all 250ms;}
header .nav .menu ul.hasdropdown li{position: relative; transition: all 250ms;}
header .nav .menu ul.hasdropdown li a {transition: all 250ms;}
header .nav .menu ul.hasdropdown ul{top: 0; left: 100%;}

body.scrolled header .nav .menu ul.hasdropdown{top: 50px; box-shadow: 0px 0px 5px #0000004f;}

header .nav .menu ul.hasdropdown li a{color: #666;font-size: 13px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.195px;transition: all 250ms; padding: 10px 15px; width: 100%; text-transform: none;}
header .nav .menu ul.hasdropdown li:hover a{color: #363636;}
header .nav .menu ul.hasdropdown li:hover{background: #ed6717;} 
header .nav .menu ul.hasdropdown li:hover a{color: #fff;}

header .nav .menu ul.hasdropdown li a.awarded {color: #ed6717;}
header .nav .menu ul.hasdropdown li:hover a.awarded {color: #fff;}

header .nav .menu li.dropdown-link .drop-down-icon{}
header .nav .menu li.dropdown-link .drop-down-icon svg path{fill: white; transition: all 250ms;}

body.scrolled header .nav .menu li a{color: #292b29;}
body.scrolled header .nav .menu li.dropdown-link .drop-down-icon svg path{fill: #292b29;}

.leaflet{background: white;position: fixed;top: 0;right: -422px;max-width: 422px;width: 100%;display: flex;flex-direction: column; transition: all 200ms; z-index: 3; height: 100vh; padding-left: 50px; align-items: end; -webkit-box-shadow: -6px 1px 15px -10px rgba(152, 152, 152, 0.59);
  -moz-box-shadow: -6px 1px 15px -10px rgba(152, 152, 152, 0.59);
  box-shadow: -6px 1px 15px -10px rgba(152, 152, 152, 0.59);}

.leaflet.active{right: 0;}
.leaflet .controls{background: #ed6717; width: 60px; height: 53px; position: relative; margin-top: 50px; transition: all 200ms; cursor: pointer; margin-bottom: 4rem;}
.leaflet .controls::before{content: ''; width: 13px; height: 12px; background-image: url(../images/leaflet/close.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; top: 50%; left: 50%; transform: translate(-50%, -50%); position: absolute;}
.leaflet .controls:hover{background-color: #ed6717;}
.leaflet .content{width: 100%; margin-bottom: 60px; padding-right: 20px;}
.leaflet .content.mobile{display: none;}

.leaflet .content a{color: #181818;}
.leaflet .content .title{font-style: normal;font-weight: 700;font-size: 20px;line-height: 119.5%;color: #181818;}
.leaflet .content .subtitle{font-weight: 400;font-size: 18px;line-height: 119.5%;color: #181818; margin-bottom: 35px;}
.leaflet .content .main{font-style: normal;font-weight: 400;font-size: 17px;line-height: 95.5%;color: #181818;}
body.page .leaflet .content .main{padding-top: 0;}
body.page .leaflet .content .main::before{content: none;}
.leaflet .content .details{margin-top: 36px; display: flex; flex-direction: column; gap: 25px;}

.leaflet .content .media{display: flex; gap: 40px; flex-wrap: wrap;}

.leaflet .buttons{width: 100%;}

.banner-container{width: 100%;max-height: 900px; height: 100%; background-color:#1C1C1B; position: relative; min-height:450px;}
.banner-container::before{content: '';position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.6); z-index: 1;}
.banner-container .splide{min-height: 450px; height: 100%; max-height: 900px;}
.banner-container .splide__list{min-height: 450px;}
.banner-container .splide__slide img{height: 100%; width: 100%; object-fit: cover;}
.banner-container .splide__track{max-height: 900px;}
.banner-container .banner-content{position: absolute; top: 40%; z-index: 1; left: 0; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.banner-container .banner-content .title{font-style: normal;font-weight: 800;font-size: clamp(1.875rem, -1.035rem + 6.071vw, 6.250rem) !important /*100px->30px*/;line-height: 106.2%;color: #FFFFFF;text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59); margin-bottom: 10px; text-align: center;}
.banner-container .banner-content .title .first-word {color: #ed6717;}
.banner-container .banner-content .description{font-style: normal;font-weight: 800;font-size: clamp(1.500rem, 0.003rem + 3.122vw, 3.750rem) /*60px->24px*/;line-height: 26px;color: #F2F2F2;text-shadow: 0px 0px 7px rgba(0, 0, 0, 0.59); width: 100%; margin-bottom: 30px; text-align: center;}
.banner-container .splide__arrows{position: absolute;z-index: 2;width: 100%;display: flex; gap: 4px; top: 55%; justify-content: space-between; padding: 0 30px; transition: all 250ms;}
.banner-container:hover .splide__arrows{padding: 0 50px;}
.banner-container .splide__arrows .splide__arrow{position: relative; height: 35px; width: 35px; opacity: 1; top: 0; transform: none; transition: all 200ms; left: auto; right: auto; background-color: #ffffff47;}
.banner-container .splide__arrows .splide__arrow.splide__arrow--next svg{fill: black;}
.banner-container .splide__arrows .splide__arrow.splide__arrow--prev svg{fill: black;}
.banner-container .splide__arrows .splide__arrow svg{fill: white;}
.banner-container .scrollDown{width: 30px; height: 30px; display: flex; justify-content: center; align-items: center; cursor: pointer; margin-top: 50px; animation: bounce 3.3s infinite 2s}
.banner-container .scrollDown svg{transform: scale(1.3);}
.banner-container .scrollDown svg path{fill: #bbb; transition: all 250ms;}
.banner-container .scrollDown:hover svg path{fill: #ffffff;}
.banner-container .splide__pagination{bottom: 60px; gap: 5px;}
.banner-container .splide__pagination li button{width: 11px; height: 11px; transition: all 250ms;}
.banner-container .splide__pagination li button.is-active{background-color: #ed6717;}

/* .aboutus */
.aboutus{padding: 80px 15px;}
.aboutus .root{display: flex; gap: 50px;}
.aboutus .about-container{position: relative; max-width: 775px; width: 100%; padding: 20px;}
.aboutus .about-container .title {position: absolute;top: 60px;left: 0;background-color: #fff;padding: 30px 45px 30px 0;width: 100%;max-width: 460px;}
.aboutus .about-container .title h1{text-align: right;}
.aboutus .about-container .image{width: 100%;max-width: 100%;padding-left: 130px;}

.aboutus .description{max-width: 435px; width: 100%; padding: 30px 0; display: flex; flex-direction: column; gap: 30px; justify-content: center;}
.aboutus .description p{color: rgb(45, 44, 49); font-size: 14px !important; font-weight: 400; line-height: 1.8; text-align: justify;}
.aboutus .description a{font-size: 14px !important; color: #ed6717; transition: all 250ms; font-weight: 500;}
.aboutus .description a:hover{color: #464646;}

/* section image text */
.offer-boxes{position: relative;}
.offer-boxes .offer-box{display: flex; position: relative; flex-wrap: wrap; overflow: hidden;}
.offer-box .offer-image {flex: 1 1 50%;position: relative; overflow: hidden;}
.offer-box .offer-image::before {content: '';width: 100px;height: 100px;background-color: #fafafa;transform: rotate(45deg) translate(-50%, -50%);position: absolute;top: 50%;right: -55px;z-index: 1;}
.offer-box.reverse .offer-image::before{right: auto; left: -55px;}
.offer-box .offer-image .image {background-repeat: no-repeat;background-position: center center;background-size: cover;position: relative;transition: all .5s;display: block;width: 100%;height: 100%;}
.offer-box .offer-content {flex: 1 1 50%;text-align: center;padding: 140px;background-color: #fafafa;position: relative;}
.offer-box .offer-content p {text-align: center;margin-bottom: 50px;}
.offer-box .offer-content h2{margin-bottom: 50px;}
.offer-box .offer-image:hover .image{transform: scale(1.1);}

/* realizationsList */
.realizationsList{padding: 100px 30px;}
.realizationsList .container-wide{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.realizationsList .title{text-align: center; margin-bottom: 50px;}
.realizationsList .realization.slider .splide__slide img{width: 100%; height: 100%; object-fit: cover; transition: all 250ms;}
.realizationsList .realization.slider .splide__slide:hover img{transform: scale(1.1);}
.realizationsList .realization.slider .splide__slide{overflow: hidden; border-radius: 6px;}
.realizationsList .read-more{margin-top: 30px;}

/* cta-banner */
.cta-banner{padding: 100px;background-repeat: no-repeat;background-position: center top;background-size: cover; margin-bottom: 100px;}
.cta-banner h2{margin-bottom: 60px; color: #fff; text-align: center;}
.cta-banner .first-word{color: #ed6717;}
.cta-banner .container-wide{display: flex;flex-direction: column;justify-content: center;align-items: center;}

/* .pageTitle */

.pageTitle{height: 350px; position: relative; background-size: cover;}
.pageTitle .container-wide{width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.pageTitle .title{color: white; margin-top: 60px; padding: 0 30px;}

/* site */

.page-content{padding: 60px 30px;}
.page-content p{text-align: justify; font-size: 15px !important;}
.page-content .row{font-size: 15px; font-weight: 400; line-height: 1.8; color: rgb(45, 44, 49); text-align: justify; margin-top: 10px;}
.page-content img{border-radius: 6px; max-height: 280px; height: 100%;}
.page-content a{color: #ed6717; transition: all 250ms;}
.page-content ul{padding-left: 30px;}
.page-content ul li{font-size: 15px; font-weight: 400; line-height: 1.8; color: rgb(45, 44, 49);}
.page-content a:hover{color: #363636;}

/* gallery */
/* Kontener siatki */
.gallery-container {padding: 100px 30px;display: grid;grid-template-columns: repeat(4, 1fr); /* zawsze 4 w rzędzie na desktopie */gap: clamp(8px, 1.2vw, 16px);}
.gallery-container .tile {position: relative;overflow: hidden;border-radius: 6px;background: #f3f4f6;box-shadow: 0 1px 2px rgba(0,0,0,.06);}
.gallery-container .tile::before {content: "";display: block;padding-top: 66.6667%; /* proporcja ~3:2 */}
.gallery-container .tile > a,
.gallery-container .tile > a > img {position: absolute;inset: 0;width: 100%;height: 100%;display: block;}
.gallery-container .tile > a > img {object-fit: cover;transition: transform .35s ease, filter .35s ease;}
.gallery-container .tile:hover > a > img {transform: scale(1.04);filter: saturate(1.02);}


/* blog */

/* Siatka bloga */
.blog-container {padding: 100px 30px;display: grid;grid-template-columns: repeat(3, 1fr); /* domyślnie 3 w rzędzie */gap: clamp(12px, 2vw, 24px);align-items: stretch;}

/* Karta artykułu */
.article {display: grid;grid-template-rows: auto auto 1fr;gap: 10px;padding: clamp(10px, 1.2vw, 16px);background: #fff;border-radius: 8px;box-shadow: 0 1px 3px rgba(0,0,0,.08);text-decoration: none;color: inherit;transition: transform .2s ease, box-shadow .2s ease;}
.article .read-more{margin-top: 10px; margin-bottom: 10px;}
.article:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Obrazek z zachowaniem proporcji */
.article .image {position: relative;overflow: hidden;border-radius: 6px;background: #f3f4f6;aspect-ratio: 16 / 9;}
.article .image img {width: 100%;height: 100%;object-fit: cover;display: block;transition: transform .35s ease;}
.article:hover .image img {transform: scale(1.04);}
.article .title {font-size: clamp(1.05rem, 1.2vw, 1.3rem);font-weight: 700;line-height: 1.25;letter-spacing: .2px;color: #292b29;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.article .short {color: rgb(45, 44, 49);font-size: 14px;line-height: 1.5;/* 3 linie skrótu */display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;overflow: hidden;}
.article:focus-visible {outline: 3px solid #6366f1;outline-offset: 3px;box-shadow: 0 0 0 6px rgba(99,102,241,.2);}

/* strona głowna widget listy artykułów */
.articlesList {padding: 0 30px;padding-bottom: 80px;}
.articlesList .title-section{display: flex; justify-content: center; align-items: center; margin-bottom: 40px;}
.articlesList .splide .splide__arrow--prev{left: -5em;}
.articlesList .splide .splide__arrow--next{right: -5em;}
.articlesList .splide .splide__track{padding: 20px 5px;}


.articlesList .article{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,.08);text-decoration:none;color:inherit;transition:transform .2s ease, box-shadow .2s ease;min-height: 415px;}
.articlesList .article .stretched-link{position:absolute; inset:0; z-index:1; /* klikalna całość */}

/* clamp – zostaw jak masz */
.articlesList .article .short{color:#2d2c31;font-size:14px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:calc(1.5em * 2); /* fallback */word-break:break-word;}

/* żeby linki wewnątrz opisu były klikalne NAWET nad stretched-linkiem */
.articlesList .article .short a{ position:relative; z-index:2; }

/* strona bloga - artykułu */
body.blogArticle .title-section{max-width: 1075px; width: 100%; margin: 0 auto; margin-top: -180px;}
body.blogArticle .title-section .image{width: 100%; max-height: 516px; height: 100%; position: relative;}
body.blogArticle .title-section .image a{height: 100%; width: 100%; display: block;}
body.blogArticle .title-section .image a img{width: 100%; height: 100%; max-height: 516px; object-fit: cover; border-radius: 6px;}
body.blogArticle .title-section .title{padding: 0 50px; margin-bottom: 30px; margin-top: 30px;}
body.blogArticle .title-section .created{padding: 0 50px; color: #ed6717; font-weight: 600;}
body.blogArticle .title-section .title h1{color: #292b29; margin: 20px 0;}

body.blogArticle .page-content{padding: 60px 30px; padding-top: 20px;}
body.blogArticle .page-content p{color: #464646;}

body.blogArticle .page-content p > a > img{margin-top: 10px; transform: scale(1.02); max-height: 365px;}
/* Preferencje użytkownika */
@media (prefers-reduced-motion: reduce) {
  .article, .article .image img {
    transition: none;
  }
}


/* footer */
footer{background-color: #131313; padding: 0 10px;}
footer .footer-menu{display: flex; gap: 30px; justify-content: center; align-items: center; padding-top: 60px; padding-bottom: 40px;}
footer .footer-menu a{text-decoration: none; color: #fff; transition: all 250ms; font-weight: 600; font-size: 13px; text-transform: uppercase;}
footer .footer-menu a:hover{color: #ed6717;}

footer .footer-company{color: #fff; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 30px; padding-bottom: 30px;}

footer .footer-company p{font-size: 13px !important; font-weight: 500;}

footer .footer-company div{display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap;}
footer .footer-company div i{color: #ED6717;}
footer .footer-company div .adress p{color: white;}
footer .footer-company div br{display: none;}
footer .footer-company a{color: white; transition: all 250ms;}
footer .footer-company a:hover{color: #ED6717}
footer .footer-company .phones p a{padding-left: 35px; position: relative;}
footer .footer-company .phones p a:first-child{padding-left: 0;}

footer .footer-company .phones p a::before {content: "\f095";font-family: "Font Awesome 5 Free";font-weight: 900; margin-right: .35rem;left: 0;color: #ED6717;}

footer .bottom{display: flex; align-items: center; justify-content: center; gap: 60px; padding-bottom: 35px;}

footer .socials{display: flex; justify-content: center; align-items: center; gap: 10px;}
footer .socials div i{font-size: 22px;}

footer .copyright{font-size: 13px; color: white;}
/* end of footer */

/* form */
.contact-container{display: flex; flex-wrap: wrap; gap: 30px;}
.contact-container .contact-details{flex-basis: calc(50% - 15px); display: flex; flex-direction: column; gap: 60px;}
.contact-container .contact-form{flex-basis: calc(50% - 15px);}
.contact-map{width: 100%; min-height: 450px; margin-top: 50px;}
.contact-map iframe{width: 100%; border-top: 3px solid #f7f7f7;}

.contact-container .contact-details .contact-content{display: flex; flex-direction: column; gap: 30px;}
.contact-container .contact-details .contact-content .contact-block{padding-left: 60px; position: relative; display: flex; flex-direction: column; gap: 5px; justify-content: center; min-height: 45px;}
.contact-container .contact-details .contact-content .contact-block strong{font-size: 20px !important; font-weight: 700; color: #374151;}
.contact-container .contact-details .contact-content .contact-block p{font-size: 20px !important;}
.contact-container .contact-details .contact-content .contact-block::before {content: '';background-repeat: no-repeat;background-position: left top;position: absolute;left: 0;top: 10px;width: 25px;height: 25px; background-size: cover;}
.contact-container .contact-details .contact-content .contact-address::before {background-image: url('../images/icons/marker.png');}
.contact-container .contact-details .contact-content .contact-nip::before {background-image: url('../images/icons/contract.png');}
.contact-container .contact-details .contact-content .contact-phone::before {background-image: url('../images/icons/phone.png');}
.contact-container .contact-details .contact-content .contact-mail::before {background-image: url('../images/icons/mail.png');}
.contact-container .contact-details .contact-content .contact-fb::before {background-image: url('../images/icons/fb.png');}
.contact-container .contact-details .contact-content .contact-ig::before {background-image: url('../images/icons/instagram.png');}
.contact-container .contact-details .contact-content .contact-block a{color: rgb(45, 44, 49); transition: all 250ms;}
.contact-container .contact-details .contact-content .contact-block a:hover{color: #ED6717;}



.error { color: red; font-size: 0.9em; }
.success { color: green; font-size: 1em; margin-top: 1em; }

.contact-form .form-container{display: flex; flex-direction: column; align-items: center; gap: 60px;}
    /* Kontener formularza */
#contactForm{width: 100%;max-width: 720px;margin-inline: auto;display: grid;gap: 16px;}

/* Etykiety jako kolumny */
#contactForm > label{display: grid;gap: 8px;font-weight: 600;color: #292b29; /* ciemny grafit */}

/* Pola tekstowe */
#contactForm input[type="text"],
#contactForm input[type="email"],
#contactForm input[type="tel"],
#contactForm textarea{appearance: none;width: 100%;padding: 12px 14px;border: 1px solid #e5e7eb; /* szary border */border-radius: 6px;background: #ffffff;color: #292b29;font: inherit;line-height: 1.5;outline: none;transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;}

/* Placeholder */
#contactForm ::placeholder{ color: #9ca3af; font-weight: 400;}

/* Hover */
#contactForm input:hover,
#contactForm textarea:hover{border-color: #d1d5db;}

/* Focus */
#contactForm input:focus-visible,
#contactForm textarea:focus-visible{border-color: #ED6717;             /* niebieski */box-shadow: 0 0 0 4px rgba(206, 206, 206, 0.15);}

/* Textarea rozmiar */
#contactForm textarea{min-height: 140px;resize: vertical;}

/* Błędy */
#contactForm .error{font-weight: 500;font-size: .9rem;line-height: 1.4;color: #b91c1c;            /* czerwony tekst */background: #fee2e2;       /* jasne tło błędu */border: 1px solid #fecaca; /* obwódka błędu */padding: 8px 10px;border-radius: 10px;}
#contactForm .error:empty{ display: none; }

/* Podświetl pole z błędem (dzięki :has) */
#contactForm > label:has(.error:not(:empty)) input,
#contactForm > label:has(.error:not(:empty)) textarea{border-color: #dc2626;box-shadow: 0 0 0 4px rgba(220, 38, 38, .12);}

/* reCAPTCHA centrowanie */
#contactForm .g-recaptcha{display: flex;}
#errorCaptcha{ margin-top: 6px; }

/* Przycisk wyślij */
#contactForm button[type="submit"]{width: fit-content; border: 0; cursor: pointer; font-family: "Montserrat", sans-serif;}


/* Komunikat globalny */
#responseMsg{display: none;margin-top: 4px;padding: 12px 14px;border-radius: 10px;font-weight: 600; width: 100%;}
#responseMsg.success{display: block;color: #065f46;background: #dcfce7;border: 1px solid #86efac;}
#responseMsg.error{display: block;color: #7f1d1d;background: #fee2e2;border: 1px solid #fecaca;}

/* Disabled */
#contactForm input:disabled,
#contactForm textarea:disabled{background: #f3f4f6;color: #9ca3af;cursor: not-allowed;}
#contactForm button[disabled]{opacity: .6;cursor: not-allowed;transform: none;box-shadow: none;}

/* --- Zgoda (consent) --- */
#contactForm .consent{display: grid;grid-template-columns: 20px 1fr;align-items: start;gap: 10px;font-weight: 600; /* tytuł etykiety */}

/* Checkbox – większy, z akcentem */
#contactForm .consent input[type="checkbox"]{width: 18px;height: 18px;margin-top: 3px; /* wyrównanie do linii tekstu */accent-color: #ED6717;}

/* Tekst zgody – lżejszy */
#contactForm .consent span{font-weight: 500;color: #374151;line-height: 1.55;  font-size: 14px;}
#contactForm .consent span a{color: #ED6717;text-underline-offset: 2px;}
#contactForm .consent span a:hover{text-decoration: underline;}

/* Konsent – błąd pod spodem */
#contactForm .consent .error{grid-column: 1 / -1;}

/* Responsywność */
@media (max-width: 480px){
  #contactForm{ gap: 14px; }
  #contactForm button[type="submit"]{width: 100%;justify-content: center;}
}

/* Preferencje dostępności: mniej ruchu */
@media (prefers-reduced-motion: reduce){
  #contactForm *{ transition: none !important; }
}


@keyframes bounce {
  from, 20%, 53%, 80%, to {
    transform: translate3d(0,0,0);
  }

  40%, 43% {
    transform: translate3d(0, -30px, 0);
  }

  70% {
    transform: translate3d(0, -15px, 0);
  }

  90% {
    transform: translate3d(0, -4px, 0);
  }
}


/* height */
@media screen and (max-height: 800px){
  .leaflet{justify-content: center;}
  .leaflet .controls{top: 0; position: absolute;}
}


@media screen and (max-width: 1550px){
  
  .banner-container .splide__arrows{padding: 0 60px;}
  .banner-container:hover .splide__arrows{padding: 0 80px;}

  .articlesList .splide .splide__arrow--prev{left: -0.5em; width: 2em; height: 2em;}
  .articlesList .splide .splide__arrow--next{right: -0.5em; width: 2em; height: 2em;}
}


@media screen and (max-width: 1370px){
  .banner-container .splide__arrows{padding: 0 75px;}
  .banner-container:hover .splide__arrows{padding: 0 95px;}
}


@media screen and (max-width: 1310px){
  /* header */
  header{left: 30px; right: 30px; transform: none; width: calc(100% - 60px);}
  body.scrolled header{left: 0; right: 0; width: 100%;}

  .aboutus .about-container{max-width: 50%;}
  .aboutus .about-container .image{padding-left: 60px;}
}

@media screen and (max-width: 1200px){
  header .nav .menu li a,
  body.scrolled header .nav .menu li a{font-size: 14px; line-height: 15px;}
  header .logo{width: 130px; height: 65px; display: flex; align-items: center; justify-content: center;}
  body.scrolled header{padding: 0 30px;}

  .offer-box .offer-content{padding: 100px;}

}


@media screen and (max-width: 1150px){
  header .nav{gap: 30px;}
  header .nav .menu{gap: 30px;}

  .aboutus{padding: 60px 15px;}
  .aboutus .root{gap: 30px; justify-content: center;}
  .aboutus .description{padding: 20px;}

  body.blogArticle .title-section .image{padding: 0 30px;}
}


@media screen and (max-width: 1050px){
  header .nav{gap: 40px;}

  .offer-box .offer-content{padding: 80px;}

  .realizationsList{padding: 80px 30px;}
}

@media screen and (max-width: 1024px){

  header .nav .hamburger{display: flex; background: #fffc; padding: 8px; border-radius: 4px; transform: rotate(90deg); gap: 6px;}
  header .nav .hamburger .bar{height: 27px; width: 3px; background-color: #373737; border-radius: 10px;}

  header .nav .menu{gap: 15px;position: absolute;display: flex;flex-direction: column;top: -48px;right: -330px;max-width: 300px;width: 300px;background: white;height: 100vh;align-items: center;justify-content: center; box-shadow: 5px 0px 29px #00000075;}
  header .nav .menu.active{right: -30px;}
  body.scrolled header .nav .menu{top: 0;}

  .leaflet{max-width: 350px;}
  .leaflet .content{display: none;}
  .leaflet .content.mobile{display: block;}
  .leaflet .content.mobile .menu{list-style: none; display: flex; flex-direction: column; gap: 15px;}
  .leaflet .content.mobile .menu li::before{content: none;}
  .leaflet .content.mobile .menu li a{font-style: normal;font-weight: 400;font-size: 14px;color: #6F6F6E;transition: all 200ms;text-transform: uppercase; display: flex; gap: 10px;}
  .leaflet .content.mobile .menu li ul.hasdropdown{list-style: none; padding-top: 0; position: relative; overflow: hidden; height: 0; opacity: 0; transition: all 350ms;}
  .leaflet .content.mobile .menu li ul.hasdropdown.active{list-style: none; padding-top: 10px; position: relative; height: auto; opacity: 1; overflow: auto; display: flex; flex-direction: column; gap: 5px;}
  .leaflet .content.mobile .menu li ul.hasdropdown li:nth-child(1){position: relative; padding-top: 10px;}
  .leaflet .content.mobile .menu li ul.hasdropdown li:nth-child(1)::before{content: ''; position: absolute; top: -3px; width: 88px; height: 2px; background-color: #ED6717; border-radius: 100xp;}
  .leaflet .content.mobile .menu li ul.hasdropdown li a{font-style: normal;font-weight: 400;font-size: 15px;line-height: 19px;color: #6F6F6E;transition: all 200ms; text-transform: none;}
  .leaflet .content.mobile .menu li ul.hasdropdown li a.awarded{color: #ED6717;}

  /* footer */
  footer .footer-company .phones p a{width: 100%; min-width: 200px; display: block; padding-left: 0;}
  footer .footer-company .adress,
  footer .footer-company .email{flex-basis: auto;}
  footer .footer-company{flex-wrap: wrap;}

  .aboutus .root{gap: 10px;}
  .aboutus .about-container .image{padding-left: 0;}


  .gallery-container {grid-template-columns: repeat(3, 1fr);}

  .blog-container {grid-template-columns: repeat(2, 1fr); /* tablety: 2 w rzędzie */}

  .articlesList .splide .splide__track{padding: 10px 5px;}

}

@media screen and (max-width: 970px){
  .aboutus-container .content-container .content{max-width: 80%;}


}

@media screen and (max-width: 767px){
  .banner-container .splide__arrows{padding: 0 40px;}
  .banner-container:hover .splide__arrows{padding: 0 45px;}

  .aboutus{padding: 30px 15px;}
  .aboutus .root{flex-direction: column;}
  .aboutus .about-container{max-width: 100%; max-height: 360px; position: relative; overflow: hidden;}
  .aboutus .about-container .image{height: 100%;}
  .aboutus .about-container .image img{height: 100%; width: 100%; border-radius: 4px;}
  .aboutus .description{max-width: 100%;}

  .offer-box .offer-content{padding: 30px;}
  .offer-box .offer-image::before{width: 50px; height: 50px; right: -25px;}
  .offer-box.reverse .offer-image::before{right: auto; left: -25px;}

  .realizationsList{padding: 40px 30px;}

  .gallery-container{padding: 60px 30px; grid-template-columns: repeat(2, 1fr);}

  .blog-container{padding: 60px 30px;}

  body.blogArticle .title-section .image a img{max-height: 330px;}
  body.blogArticle .title-section .created{padding: 0 30px;}
  body.blogArticle .title-section .title{padding: 0 30px;}

  body.blogArticle .title-section .image{padding: 0 15px;}

  .page-content .row{gap: 5px; margin-top: 5px;}
  .page-content img{width: 100%;}

  .page-content a{display: block;}
  .page-content p a{display: inline;}


  /* articles list */
  .articlesList .article{min-height: auto;}

  /* contact */
  .contact-container{gap: 60px;}
  .contact-container .contact-details{flex-basis: 100%;}
  .contact-container .contact-form{flex-basis: 100%;}
  .contact-form .form-container{align-items: flex-start;}
}

@media screen and (max-width: 640px){
  .blog-container {grid-template-columns: 1fr; /* telefony: 1 w rzędzie */}
  .article {padding: 12px;}

  .gallery-container {grid-template-columns: 1fr;}
}

@media screen and (max-width: 600px){
  header .logo{width: 130px;height: 50px; margin: 5px 0;}

  .banner-container .splide__arrows{display: none;}

  .leaflet{max-width: 320px;}
  footer .bottom{gap: 30px;}

  .offer-boxes .offer-box{flex-direction: column;}
  .offer-boxes .offer-box.reverse{flex-direction: column-reverse;}
  .offer-box .offer-image{flex: 1 100%; padding: 0 30px;}
  .offer-box .offer-image:hover .image{transform: none;}
  .offer-box .offer-image .image{min-height: 275px; height: 100%; border-radius: 4px;}
  .offer-box .offer-image::before{content: none;}

  .offer-box .offer-content{padding: 30px; padding-bottom: 50px;}

  .cta-banner{padding: 80px 30px; margin-bottom: 60px;}

  .articlesList{padding-bottom: 60px;}
  
}


@media screen and (max-width: 500px){
  header{left: 15px; right: 15px; width: calc(100% - 30px); padding: 0 10px;}

  footer .bottom{flex-direction: column-reverse;}
  footer .footer-company div{flex-basis: 100%;}
  footer .footer-company p{text-align: center;}
  footer .footer-company p a{display: flex; justify-content: center; align-items: center;}

  footer .footer-menu{flex-wrap: wrap; gap: 20px;}

  .aboutus .about-container .title{top: 50%; background-color: #ffffffe8; padding: 20px;}
  .aboutus .about-container .title h1{text-align: center;}

  .error-page{padding: 60px 30px;}

  body.blogArticle .title-section .image a img{max-height: 260px;}
}

@media screen and (max-width: 450px){
  body.blogArticle .title-section .image a img{max-height: 230px;}
}